Question

我创建了一个表单，如下所示

<label>Search:</label>
        <form name="findrecipe" action="#">

            <input type="radio" name="search" id="search_name" value="name" checked>Name
            <input type="radio" name="search" id="search_ing" value="ingredients">Ingredients<br/>
            <input type="text" name="searchBox" onchange="javascript:addBox(this.value);"/>
            <div id="search">
            </div>
        <input type="submit" value="Submit" />
        </form>

每次使用java脚本代码

更改字段时，我都会添加一个框

function addBox(formVal){
    var temp = this.value;
    alert(formVal);
    if(document.getElementById("search_ing").checked){
        document.getElementById("search").innerHTML += "<br/><input type='text' name='searchBox' onchange='javascript:addBox();'/>";
        this.value = temp;
    }
}

正如你所看到的，我已经尝试重新输入值，这样它就不会清除前面框中的值，但我肯定有问题。如何添加文本字段而不清除其余字段？

由于

Answer 1

尝试将新元素附加到容器而不是附加HTML标记。

$('.container').append($('br')).append($('input'));

jQuery文档：http://api.jquery.com/append/

Answer 2

看起来你传递的是表单值，但是除了alert（）之外它忽略了它。

更改

var temp = this.value;

到

var temp = formVal;

并更改

this.value = temp;

到

document.getElementById("search").value = temp;

Answer 3

虽然你没有使用任何jQuery，但你已经标记了jQuery的问题，所以我冒昧地使用jQuery ......

我将html简化为：

<label>Search:</label>
<form name="findrecipe" action="#">
    <input type="radio" name="search" id="search_name" value="name" checked />Name
    <input type="radio" name="search" id="search_ing" value="ingredients" />Ingredients<br/>
    <input class="searchbox" type="text" name="searchBox" />
    <br/>
    <input type="submit" value="Submit" />
</form>

使用以下javascript：

$(function() {
    $('form').on('change', '.searchbox', function() {
       $('form').append('<br/><input class="searchbox" type="text" name="searchBox" />');
    });
});

每当有人更改现有输入的值时，jQuery就会添加一个新输入，但不会更改现有输入，因此会保留所有现有值。

有一个演示here。

Answer 4

您的部分问题是您没有像您认为的那样设置输入值。

在

的例子中

this.value = temp;

“this”指的是DOMWindow，而不是输入，所以你试图设置窗口的值，而不是输入。

我的解决方案（快速HTML注入黑客方式）将是

的内容

function addBox(formVal){
    var temp = formVal;
    //alert(formVal);
    if(document.getElementById("search_ing").checked){

        document.getElementById("search").innerHTML += "<br/><input type='text' name='searchBox' onchange='addBox(this.value);' value='"+formVal+"'/>";
        //this.value = temp;
    }
}

如果我有更多的时间，我会使用一些更优雅的东西（这是没有经过测试的，所以它不会开箱即用）

var newINput = document.createElement("input");
newINput.type='text';
newINput.value= "";
newInput.name= some unique name ;

document.getElementById('search').appendChild(newINput);

使用Javascript添加文本字段但值继续擦除

4 个答案: