0

我有一个我创建的表格如下

<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;
    }
}

如您所见，我尝试重新输入该值，这样它就不会清除前面框中的值，但我肯定有问题。如何在不清除其余部分的情况下添加文本字段？

谢谢

4

4 回答 4

1

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

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

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

于 2012-04-26T22:43:16.610 回答
0

看起来您正在传递表单值，但是除了 alert() 之外忽略了它。

改变

var temp = this.value;

至

var temp = formVal;

和改变

this.value = temp;

至

document.getElementById("search").value = temp;
于 2012-04-26T22:39:58.477 回答
0

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

在的情况下

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);
于 2012-04-27T02:47:54.903 回答
0

尽管您没有使用任何 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 将添加一个新输入，但不会更改现有输入，因此所有现有值都将保留。

这里有一个演示。

于 2012-04-26T23:14:01.947 回答