ajaxを使用して1つのページに複数のフォームを作成し、データを投稿し、選択したフォームの入力フィールドを指定します。

Question

動的に複数のフォームとjsコード（20+）を作成するページがあります。ユーザが選択ドロップダウンからアイテムを選択すると（トリガを変更する）、ajaxを介して別のスクリプトにデータをポストします。

変更されました]を選択しそれに基づいて合格するフィールドの入力データを指定する方法はありますなどは、Form1、Form2を、たForm3：

フォーム名が似ていますか？

たとえば、：adId：$（ 'input [name $ = "ad_id"]'）。val（） 目的のデータを取得するために選択するフォームを指定する必要があります。

changeCat2の選択が変更された場合は、その特定のフォーム（form2）からad_id値を渡します。

EDIT - その他のコード：

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('select.changeCat2').change(function(){ 
       $.ajax({ 
       type: 'POST', 
       url: 'cat_update.php', 
       data: {selectFieldValue: $('changeCat').val(), mlsId: $('input[name$="mls_id"]').val(), adId: $('input[name$="ad_id"]').val(), imageId: $('input[name$="image_id"]').val(), photoUrl: $('input[name$="photo_url"]').val()}, 
       dataType: 'html' 
        }); 
       }); 
      }); 
     </script> 

<form method="post" action="" name="form2"> 
<input type="hidden" name="mls_id" value="W7631557"> 
<input type="hidden" name="ad_id" value="107"> 
     <select name="changeCat2"> 
      <option value="Living Room">Living Room</option> 
      <option value="Dining Room">Dining Room</option> 
      <option value="Family Room">Family Room</option> 
      <option value="Den/Office">Den/Office</option> 
      <option value="Kitchen">Kitchen</option> 
      <option value="Exterior">Exterior</option> 
      <option value="Bedrooms">Bedrooms</option> 
      <option value="Bathrooms">Bathrooms</option> 
      <option value="Pool/Patio">Pool/Patio</option> 
      <option value="Great Room">Great Room</option> 
      <option value="Balcony/Porch/Lanai">Balcony/Porch/Lanai</option> 
     </select> 
     <input type="hidden" name="image_id" value="2"> 
     <input type="hidden" name="photo_url" value="http://myimages/"> 
     </form> 

Answer 1

それは質問から、あなたが望むものを正確に伝えるのは難しいですが、答えはイエス、あなたはあなたがあなたのAJAX呼び出しで送信データをmicromanageことができていますあなたがどんなやり方でも。

ajax呼び出しの受信者には特定のデータが必要な場合がありますが、これは問題の範囲外です。以下の例は、あなたが望む操作を行う方法のアイデアを与えるはずです。

$(document).ready(function() { 
 
    $('select[name="changeCat2"]').change(function(){ 
 
    // stop here - you can define your own data, 
 
    // and access whatever you need from the current state of the form 
 
    var myData = { // start with what you need for sure 
 
     'mls_id': $('input[name="mls_id"]').val(), 
 
    }; 
 
    var category = $('select[name="changeCat2"]').val(); 
 
    // optionally add some data 
 
    if (category === 'Living Room') { 
 
     myData['changeCat2'] = category; 
 
     myData['ad_id'] = $('input[name="ad_id"').val(); 
 
    } 
 
    console.log(myData); 
 
    return; // just for this example so the ajax doesn't really run 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'cat_update.php', 
 
     data: myData, // only the data you chose to include 
 
     dataType: 'html' 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form method="post" action="" name="form2"> 
 
    <input type="hidden" name="mls_id" value="W7631557"> 
 
    <input type="hidden" name="ad_id" value="107"> 
 
    <select name="changeCat2"> 
 
    <option value="Living Room">Living Room</option> 
 
    <option value="Dining Room">Dining Room</option> 
 
    <option value="Family Room">Family Room</option> 
 
    <option value="Den/Office">Den/Office</option> 
 
    <option value="Kitchen">Kitchen</option> 
 
    <option value="Exterior">Exterior</option> 
 
    <option value="Bedrooms">Bedrooms</option> 
 
    <option value="Bathrooms">Bathrooms</option> 
 
    <option value="Pool/Patio">Pool/Patio</option> 
 
    <option value="Great Room">Great Room</option> 
 
    <option value="Balcony/Porch/Lanai">Balcony/Porch/Lanai</option> 
 
    </select> 
 
    <input type="hidden" name="image_id" value="2"> 
 
    <input type="hidden" name="photo_url" value="http://myimages/"> 
 
</form>