Multiple forms on one page, using ajax to post data, specify which input fields from the selected form

Question

I have a page that dynamically creates multiple forms and js code (20+). When the user selects an item from a select dropdown, (change trigger) it posts data to another script via ajax.

Form names are like: form1, form2, form3, etc.

Is there a way to specify which field input data to pass based on which select was changed?

For example, with: adId: $('input[name$="ad_id"]').val() Need to specify which form to select from to obtain the desired data.

If changeCat2 select changed, pass the ad_id value from that specific form (form2).

EDIT - More code:

<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>

You should give more detail and add html code sample too.

Hakan SONMEZ
– Hakan SONMEZ

2017-09-28 14:30:53 +00:00
Commented Sep 28, 2017 at 14:30 — Hakan SONMEZ
– Hakan SONMEZ, Commented Sep 28, 2017 at 14:30
api.jquery.com/descendant-selector

Quentin
– Quentin

2017-09-28 14:39:21 +00:00
Commented Sep 28, 2017 at 14:39 — Quentin
– Quentin, Commented Sep 28, 2017 at 14:39

arbuthnott · Accepted Answer · 2017-09-28 16:06:16Z

It's hard to tell exactly what you want from the question, but the answer is yes, you can micromanage the data you send with your ajax call in whatever way you want.

The recipient of the ajax call may expect certain data, but that's out of the scope of the question. The example below should give you an idea of how to do any manipulations you want.

$(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>

Collectives™ on Stack Overflow

Multiple forms on one page, using ajax to post data, specify which input fields from the selected form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related