CODEWITHSUNDEEP
javascriptjqueryajaxforms
user8388852
user8388852

Reputation:

how to create form data objects in jquery or javascript?

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?

Upvotes: 0

Views: 653

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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);
    }
  });
});

Upvotes: 1

Related Questions