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

Question

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

表单名称如下：form1，form2，form3等。

有没有一种方法可以根据更改的选择指定要传递的字段输入数据？

例如，with：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>