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

ご覧のとおり、Iveは値を再入力しようとしたため、前のボックスの値はクリアされませんが、間違いなく問題が発生しています。残りをクリアせずにテキストフィールドを追加するにはどうすればよいですか？

ありがとう

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

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 に答える
0

問題の一部は、自分が思っているように、入力の値を設定していないことです。

のインスタンスでは

this.value = temp;

「これ」は入力ではなく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 に答える