使用Javascript添加文本字段，但值不断擦除

Adding text fields using Javascript but values keep erasing

本文关键字：擦除 Javascript 添加 文本 字段 使用      更新时间：2023-09-26

>我有一个表单 ive 创建

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

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

谢谢

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

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

j查询文档：http://api.jquery.com/append/

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

改变 

var temp = this.value;

自

var temp = formVal;

和改变 

this.value = temp;

自

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

虽然你没有使用任何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 都会添加新输入，但不更改现有输入，因此保留所有现有值。

这里有一个演示。

你的部分问题是你没有像你想象的那样设置输入的值。

在实例中 

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);
相关文章：