一页多个表单，使用ajax发布数据，指定选中表单中的哪些输入字段

Question

我有一个动态创建多个表单和 js 代码 (20+) 的页面。当用户从选择下拉列表中选择一个项目时，（更改触发器）它通过 ajax 将数据发布到另一个脚本。

表单名称如：form1、form2、form3 等。

有没有办法根据哪个选择被更改来指定要传递哪个字段输入数据？

例如：adId: $('input[name$="ad_id"]').val() 需要指定从哪个表单中选择来获取想要的数据。

如果 changeCat2 选择已更改，则从该特定表单 (form2) 传递 ad_id 值。

编辑 - 更多代码：

<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 调用发送的数据进行微观管理。

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>