AJAX JS PHP HTML複数の同じ名前

Question

私はPHPから生成された複数のフォームを持っており、IDと名前のHTML入力があります。 私はこれらすべてのものをキャッチする方法を理解できません。 私はすべてがボタン

<?$command = "SELECT * FROM example "; 
$query1 = $db->query($command); 
while ($rowExample = $query1->fetch()) {?> 
<div data-role="collapsibleset" style="padding-left:10px;"> 

    <form id = "form"> 
     <div style=" font-weight:400;" data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-inset="false"> 
      <h3><span style="color:#ff9884"><?echo$rowExample['postcode'] ;?> </span><span style="color:#9fd6d9;"><?echo $rowExample['address'];?></span></h3> 
      <p><?echo $rowExample[title]?></p> 

      <p><a href="tel:<?echo $rowExample[phone]?>"><?echo $rowExample[phone]. "</a> " .$rowExample[FullName];?></p> 

      <p><a target="_blank" href="https://www.google.com/maps/place/<?echo str_replace(" ","+",$rowExample['postcode']);?>"><?echo $rowExample['postcode']?></a> <?echo $rowExample['address']?></p> 


      <input type="hidden" id="orderID" name="orderID" value="<? echo $rowExample['orderID']?>"> 
      <input type="hidden" id="destination" name="destination" value="<? echo $rowExample['orderDestination']?>"> 
      <div class="ui-grid-b"> 
       <div class="ui-block-a"> 
        <div class="ui-corner-all" style="background-color:#6B8761;"> 
         <button type="submit" id="submit" class="ui-btn ui-btn-inline">Done</button> 
        </div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="ui-corner-all" style="background-color:#587C87;"><button type="submit" id="submit" class="ui-btn ui-btn-inline">Go to Info</button></div> 
       </div> 
       <div class="ui-block-c"> 
        <div class="ui-corner-all" style="background-color:#946354;"><button type="submit" id="submit" class="ui-btn ui-btn-inline">Skipped</button></div> 
       </div> 
      </div> 
     </div> 
    </form> 

の名前の行わ原因となり、最も興味深いのは、JSで「完了」ボタンを一つ押すと、私はこれは私に生成されたすべてのフォームを表示し、それ

$('#submit').click(function(){ 

var orderID = $('#orderID').val(); 
var destination = $('#destination').val(); 

var data = 'orderID='+orderID+'&destination='+destination; 
console.log(data); 

$.ajax({ 
    type:"POST", 
    url: "worker/worker.php", 
    data: data, 
    success: function(){ 
     alert("It was Done"); 
    } 
}); 
return false; 
    }); 

にアドバイスしてください。 クリックが実行されただけです。

Answer 1

すべてのフォームに一意のIDを追加することをお勧めします。次に、.closestメソッドを使用してどのフォームが送信されたかを調べることができます。一意の要素を使用する場合は、同じ要素を選択し、idを使用する場合はclassを使用する必要があります。したがって、すべてのサブミット要素に対して同じID「submit」を使用することは適切ではありません。 idの代わりにclassを使用します。フォームタグの使用例を見ることができます。

$('#submit').click(function(event){ 
 
event.preventDefault(); 
 
var formId = $(this).closest("form").attr("id"); 
 

 
var orderID = $('#'+ formId +' #orderID').val(); 
 
var destination = $('#'+ formId +' #destination').val(); 
 

 
var data = 'orderID='+orderID+'&destination='+destination; 
 
console.log(data); 
 

 
$.ajax({ 
 
    type:"POST", 
 
    url: "worker/worker.php", 
 
    data: data, 
 
    success: function(){ 
 
     alert("It was Done"); 
 
    } 
 
}); 
 
return false; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<?php 
 
    $i = 0 
 
    while ($rowExample = $query1->fetch()) { 
 
    $i++; 
 
    ?> 
 
     <form class="form" id="form-<?php echo $i;?>"> 
 
      ... 
 
     </form> 
 
    
 
    <?php }?>

Answer 2

idの値をclassの値に置き換えてください。マークアップは少なくとも有効です。だから、例えば：

<form id = "form"> 

はなる可能性があります：

ちょうど

<form class = "form"> 

かさえ：

<form> 

あなたがidまたはclass全くことを使用する必要がない場合。 （私は見ていないよ必要がありますない限り、あなたはおそらく、このコードでは、あなたのid秒のいずれかのは必要ありません。しかし、私はその上で正しくない可能性があります。あなた自身のテストと検証がそれを決定します。）

---

その後、一歩踏み込んで自分自身に尋ねてください。ボタンを送信する必要があるものは何ですか？ 注文IDと先から値を取得し、AJAXリクエストでそれを送る

：

現在、あなたのコードは、ように、その質問に答えます。

しかし...あなたは複数ためのID入力及び複数先の入力を備えています。だからどれが入力ですか？

代わりに、質問への答えとしてこれを考える：

ボタンがクリックされたフォームの場合は、注文IDと先から値を取得し、それを送信AJAXリクエストで

具体的には、必要な入力を特定します。

---

まず、すべての送信ボタンに対して1つのクリックハンドラが必要です。十分に簡単：

$('button[type="submit"]').click(function() { 
    // code described below will go here 
}); 

はだから今type="submit"のいずれかのボタン上の任意のクリックのために、この関数が呼び出されます。そして、この機能は何をしますか？現在の書式の入力を取得します。 jQueryの用語では、これは一般に、必要な要素を識別するためのDOMトラバーサルを必要とします。論理的には、<form>が含まれていることを参照し、その中に<input>要素が含まれているとします。

このような何か作業をする必要があります：

var orderID = $(this).closest('form').find('input[name="orderID"]').val(); 

基本的には、「この」（クリックしたボタン）から開始し、その後、そのフォーム内<input>にあなたを見つけ、最も近い<form>にHTMLを上に移動します」その名前で探しています。 （同じ<form>に同じ名前の<input>が複数ある場合は、これを調整する必要があります）。

destinationの値も繰り返します。その時点で残りのコードはの代わりに、ページの値のの値とのとなるはずの値でなければなりません。