動的に作成された要素の値を取得する

iこのフォームでHTMLフォームを作成しました。ボタンをクリックすると、定義済みの条件に基づいて入力テキストフィールドが作成されます。今、私がしようとすると、私はそうすることはできませんアラートを使用して作成されたテキストフィールドに入力された値を取得します。動的に作成された要素の値を取得する

私持っている二つの質問

動的に作成したテキストフィールドからの入力を取得するための最良の方法は何ですか？私が書いたコードが動作しない理由を
あなたは私を伝えることができ

HTMLコードが

<BODY> 
<FORM> 
    <BR/> 
    <div align = "center"> 
     <br /><br /> 
     <INPUT type="button" value="Click To Enter Values" onclick="getkeywords()"/> 
    </div> 
    <div align="center" id="d_div"> 
     <form name="permavalues" id="d_form"> 
     </form> 
     <br/> <br/> 
    </div> 
</FORM>

私が使用しているJavaScriptコードはこれです：

function getkeywords() { 
    var index_array = new Array(); 
    var myString = "one and a two and a three = $ and four = $ and five = $"; 
    var splitresult = myString.split(" "); 

    for(i = 0; i < splitresult.length; i++) 
    { 
     if (splitresult[i] == "$" && i > 1) //retireving the keywords.. 
     { 
      add(splitresult[i-2]); 
     } 
    } 
}

getkeywordsで呼び出されるadd関数：

function add(s) { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 
    //Assign different attributes to the element. 
    element.setAttribute("type", "text"); 
    element.setAttribute("value", s); 
    element.setAttribute("name", s); 
    element.setAttribute("id", s); 

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

    //Append the element in page (in span). 
    foo.appendChild(element); 
    alert("Value=" + document.getElemebtById(s).value); 
}

私は私が主要な問題は、あなたが別のフォーム内のフォームを置くことができないですelement.setAtrribute("id",s);

出典

2012-11-21 Riddle

あなたはあなたのコードのタイプミスがあります： '警告（ "値=" + document.getElemebtById（S）.VALUE）;' '警告（ "値=" +のdocument.getElementById（S）でなければなりませんが。値））; ' – IvanL

ああ、私はそれを逃している必要があります...私は使用しているロジックにもっと関心がある正しいロジックです。ここでは、値の属性をsに設定していますが、テキストがWebページに表示され、ユーザーがいくつかの入力を入力すると、どのように取得できますか？ストアプロパティに格納されますか？ – Riddle

ユーザー入力値は、現在表示しているのと同じ方法でいつでも取得できます。 idで要素を選択し、値を取得します。 'document.getElementById（s）.value'です。 jQueryを使用する場合は、最後にすべての入力を処理して処理することができますが、当然のことながらページで何をするかによって異なります。 – IvanL

と間違いを持たなければならないと思います。 HTMLコード2行目と13行目を削除してください。

IvanL氏によると、もう1つの問題はあなたのタイプミスです。

他のコードは正常です。

完全にテストされた作業コードを以下に示します。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>test</title> 
<script language="javascript"> 
function getkeywords() { 
    var index_array = new Array(); 
    var myString = "one and a two and a three = $ and four = $ and five = $"; 
    var splitresult = myString.split(" "); 

    for(i = 0; i < splitresult.length; i++) 
    { 
     if (splitresult[i] == "$" && i > 1) //retireving the keywords.. 
     { 
      add(splitresult[i-2]); 
     } 
    } 
} 
function add(s) { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 
    //Assign different attributes to the element. 
    element.setAttribute("type", "text"); 
    element.setAttribute("value", s); 
    element.setAttribute("name", s); 
    element.setAttribute("id", s); 

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

    //Append the element in page (in span). 
    foo.appendChild(element); 
    alert("Value=" + document.getElementById(s).value); 
} 
</script> 
</head> 
<BODY> 
    <BR/> 
    <div align = "center"> 
     <br /><br /> 
     <INPUT type="button" value="Click To Enter Values" onclick="getkeywords()"/> 
     <br><br><br> 
     <input type="button" value="add" onclick="add('tt')"> 
    </div> 
    <div align="center" id="d_div"> 
     <form name="permavalues" id="d_form"> 
     </form> 
     <br/> <br/> 
    </div> 
</body> 
</html>

出典

2012-11-21 12:09:02

動的に作成テキストフィールドからの入力を取得するための最良の方法は何ですか？

JQueryを使用して、すべてのテキスト入力要素のフォームをトラバースし、それぞれの値を取得します。

また、各テキストフィールドに "txt_"のような共通名を付けてから、文字列（IE-txt_1、txt_2、txt_3、...）にインクリメンタルIDを追加して、フォームをプログラム的に反復することができます使用可能なフォームフィールドの総数を表す値に達するまで一致するフィールド。その値はjavascriptの整数になります。例えば

...

$("form input[type='text']").each(function() 
{ 
    // gets text value for each field in the form 
    var textFieldValue = this.value; 

    // do stuff 
});

出典

2013-04-24 02:10:21

は、すべての入力値を取得するためのjQueryコードの表情を持っています。

$(document).ready(function() 
{ 
    $('form#d_form input[type="text"]').each(
    function() 
    { 
     alert($(this).val()); 
    }); 
});

出典

2013-05-21 18:38:19

動的に作成された要素の値を取得する

答えて

関連する問題