1

テキスト フィールドの動的生成に問題があります。フォームに選択ボックスがあり、ドロップダウンリストでの番号の選択に基づいてテキストフィールドを作成したいと考えています。したがって、ユーザーがいずれかを選択した場合、その下に 1 つのテキスト フィールドを作成します。私はそれを達成するためにjavascriptとonChangeイベントを使用しています。しかし、コードはどのブラウザーでも機能しません。

ドキュメントの head セクションで使用している JavaScript 関数は次のとおりです。

function addField() 
 {
 alert("Hello");
 var num=document.forms["myForm"]["timePerDay"].value;
   for(var i=0;i<num;i++)
    {
    var element = document.createElement("input");


    element.setAttribute("type", input);
    element.setAttribute("name", time[] );

    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);
    }
    }

選択フィールドは次のとおりです。

 <select name="timePerDay" onChange="javascript:addField();"> 
<option selected="selected">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<span id="fooBar">
</span>

JS関数にアラートメッセージを入れようとしたが、それが機能していないため、どのブラウザでもonChangeがまったく起動していないようです。では、何が問題なのか教えてください。このページはhttp://motushealth.com/form1.htmlで見ることができます。

PS: フォームで別の JS 関数を使用して検証していますが、 Onsubmit で動作します。それは完全に機能しています。

4

3 に答える 3

2

ここでの問題は構文エラーです。element.setAttribute("name", time[] ); time[]これは php では有効ですが、js では有効ではありません。

編集：

別のアプローチは、インライン js ( ...onClick='javascript:addField();'...) を使用しないことです。代わりwindow.onloadに、onDomReadyイベントで次のことを行ってください。

JS:

window.onload = function() {  /* or window.addEventListener */
    document.getElementById('timePerDay').onchange = addField;  /* or addEventListener */
};

マークアップは次のようになります。

<select id="timePerDay" name="timePerDay"> 
    <option selected="selected">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
于 2012-05-27T06:33:01.963 に答える
0

この問題が発生したのは、 which has unexpected tokenが発生したため、関数addField()が単にロードされていないためです。SyntaxErrortime[]]

この種の問題をデバッグするための 1 つのヒントは、常にWeb インスペクター(Chrome/Safari を使用している場合) またはFirebug (Firefox を使用している場合) でコンソール ログを確認することから始めることです。

これらの種類のタスクには jQuery の使用を検討することもできます。具体的には、on()またはの使用を検討してくださいchange()。

于 2012-05-27T07:00:09.490 に答える
0

2 時間以上コードをいじった後、ようやく問題が見つかりました。驚いたことに、問題は JS 自体のコードにありました。JS コードに問題があると、関数全体が機能せず、onChange も呼び出されないようです。

  1. 最初の問題は名前にあったので変更しました

    element.setAttribute("name", time[] ) から element.setAttribute("name", timer[] )

  2. 次に、タイプに論理エラーがあったため、変更しました

    element.setAttribute("type", input) から element.setAttribute("type", text); ご助力いただきありがとうございます。この素晴らしいコミュニティが大好きです。ロッキングを続けます。よろしく。

于 2012-05-27T06:48:02.103 に答える