複数のフォーム要素に単一のjs関数を使用する方法

ここでは、フォームのユーザーエントリ数に基づいて、1つのHTMLファイルにフォームが作成されます。ここで複数のフォーム要素に単一のjs関数を使用する方法

function jsfunction() { 
 
    var number1 = document.getElementById("number").value; 
 
    var number = parseInt(number1); 
 
    number += number; 
 
    document.getElementById("result").value = number; 
 
}

<body> 
 

 
<?php 
 
    // this value is dynamically generated by refering database. Each time it varies. 
 
    $count=2; 
 
?> 
 

 
<input type="text" value="<?php echo $count; ?>" id="countt"> 
 

 
<?php 
 
    for($i=0; $i<$count ; $i++) { 
 
?> 
 

 
<form> 
 
    Enter No: <input type="text" id="number" name="number" onblur="jsfunction()"/><br/> 
 
    Value: <input type="text" id="result"/> 
 
</form> 
 

 
<?php 
 
    } 
 
?> 
 

 
</body>

各フォームで私は1つの要素のためonclick="jsfunction()"を使用しています。問題はjsfunctionは最初のフォームでのみ動作しています。すべてのフォーム要素に対して個別にこの同じjsfunctionを実行する必要があります。

実際のコードは巨大なので、同じ小さなシナリオを共有しています。コードを見て助けてください。

ありがとうございます。

出典

2017-11-22 Avinash T

まあ、フォームごとに同じid="number"を使用しています。一意のIDを試してみて、関数に渡し：

jsfunction(the_id)

出典

2017-11-22 11:05:52 Vyko

。クリックされたコントロールが含まれているフォームを見つけて、一意のIDを持つ結果入力を見つける必要があります。どのIdを渡したいですか？両方、またはただ一つ？あなたの答えは申し訳ありませんが、実際には、重複した識別子は悪い習慣ですが、重複した識別子で解決することはできますが、単にDOMを繰り返してクリックされた要素の親を見つけ、その親フォームで 'querySelector'クリックされた要素の兄弟です。「誕生」の答えははるかに適切かつ明確ですが。 – Nope

あなたは動的にこのようなフォームに固有のIDを割り当てることができます。一意のID番号を持つパラメータをJS関数に渡すと、フォームを選択するのに役立ちます。問題が解決しない

function jsfunction(id) { 
 
    var number1 = document.getElementById("number_" + id).value; 
 
    var number = parseInt(number1); 
 
    number += number; 
 
    document.getElementById("result_" + id").value = number; 
 
}

<body> 
 

 
<?php 
 
    // this value is dynamically generated by refering database. Each time it varies. 
 
    $count=2; 
 
?> 
 

 
<input type="text" value="<?php echo $count; ?>" id="countt"> 
 

 
<?php 
 
    for($i = 0; $i < $count; $i++) { 
 
?> 
 

 
<form> 
 
    Enter No: <input type="text" id="number_<?php echo $i; ?>" name="number" onblur="jsfunction(<?php echo $i; ?>)"/><br/> 
 
    Value: <input type="text" id="result_<?php echo $i; ?>"/> 
 
</form> 
 

 
<?php 
 
    } 
 
?> 
 

 
</body>

出典

2017-11-22 11:09:35 unbirth

複数のフォーム要素に単一のjs関数を使用する方法

答えて

関連する問題