0

I want to submit two different forms with AJAX, but I am unable to identify how to select these forms for making form data object (it has files as well ). I have tried this for one form: 

<form class="ui form" id="contact-form" enctype="multipart/form-data" onsubmit='return !!(filecheck() && show());'>
  <div class="field">
    <label>Title of the Ad</label>
    <input name="title" type="text" id="title">
  </div>
  <div class="field">
    <label>Select Car Make</label>
</form>

$("#contact-form").submit(function(e){
e.preventDefault();
var form = $('form')[0];
var formData = new FormData(form);
  $.ajax({
    url: 'infocheck.php',
    async: true,
    cache: false,
    data: formData,
    contentType: false, 
    processData: false, // 
    type:'post',
    success: function(response) {    
      document.getElementById("loader").style.display = "none";
      alert(response);
    }
  });
});

Now I have another form 

<form class="ui form" id="second-form" enctype="multipart/form-data" onsubmit='return !!(filecheck() && show());'>
  <div class="field">
    <label>Title of the Ad</label>
    <input name="title" type="text" id="title">
  </div>
  <div class="field">
    <label>Select Car Make</label>
</form>

How to send request for this form as well ...any idea?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Possible duplicate of [Submit a form using jQuery](https://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) – Jerinaw Aug 24 '17 at 16:11
  • how to do it for two forms like $(this)[0] and $(this) [1]?? @RoryMcCrossan –  Aug 24 '17 at 16:16
  • @gANDALF are you saying that you want to send both forms *at the same time in a single request*? – Rory McCrossan Aug 24 '17 at 16:17

1 Answers1

1

You can achieve this by using the common classes on both forms to select them. You can then use the this keyword within the submit event handler to refer only to the form which triggered the event:

$('.ui.form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this); // note use of 'this' here

  $.ajax({
    url: 'infocheck.php',
    cache: false,
    data: formData,
    contentType: false, 
    processData: false,
    type: 'post',
    success: function(response) {    
      document.getElementById("loader").style.display = "none";
      alert(response);
    }
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • can you just tell me how to select a form by id or class in jquery like we do somethng for an element var element =document.getElementById("id"),is there something for form ,i am bit confused –  Aug 24 '17 at 16:20
  • Well your original code was selecting by `id`, and my example above is selecting by `class`, so I'm a little confused what you're asking. – Rory McCrossan Aug 24 '17 at 16:21
  • I have two separate requests for forms ,two different ajax blocks and are passed to two different urls ,I just got confused in making form data objects of these. –  Aug 24 '17 at 16:28
  • I'm sorry, I still have no idea what you're asking here or what the issue is. If you want to make two separate requests, you just need to copy the code you originally had and change the selector. – Rory McCrossan Aug 24 '17 at 16:28