Submit Multiple Form to a File with Ajax

Question

Hi We have multiple form which will submit to a single page using ajax and that data will be inserted to database :

<form class="form-horizontal" onsubmit="return insertData()">
  <div class="form-group">
    <label for="track_id" class="control-label col-sm-2">track_id :</label>
    <div class="col-sm-8">
      <input type="text" name="track_id" value="122" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="seokey" class="control-label col-sm-2">seokey :</label>
    <div class="col-sm-8">
      <input type="text" name="trackseo" value="Are Wah" id="trackseo" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="track_title" class="control-label col-sm-2">track_title :</label>
    <div class="col-sm-8">
      <input type="text" name="track_title" value="Are Wah tu Bhi" id="trackTitle" class="form-control">
    </div>
  </div>
  <div class="col-sm-offset-2 col-sm-10" style="margin-top:10px;">
    <input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
    <input class="btn btn-success" type="submit" name="cancel" id="cancel" value="Cancel">
  </div>
</form>

<form class="form-horizontal" onsubmit="return insertData()">
  <div class="form-group">
    <label for="track_id" class="control-label col-sm-2">track_id :</label>
    <div class="col-sm-8">
      <input type="text" name="track_id" value="122" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="seokey" class="control-label col-sm-2">seokey :</label>
    <div class="col-sm-8">
      <input type="text" name="trackseo" value="Are Wah" id="trackseo" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="track_title" class="control-label col-sm-2">track_title :</label>
    <div class="col-sm-8">
      <input type="text" name="track_title" value="Are Wah tu Bhi" id="trackTitle" class="form-control">
    </div>
  </div>
  <div class="col-sm-offset-2 col-sm-10" style="margin-top:10px;">
    <input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
    <input class="btn btn-success" type="submit" name="cancel" id="cancel" value="Cancel">
  </div>
</form>

<form class="form-horizontal" onsubmit="return insertData()">
  <div class="form-group">
    <label for="track_id" class="control-label col-sm-2">track_id :</label>
    <div class="col-sm-8">
      <input type="text" name="track_id" value="122" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="seokey" class="control-label col-sm-2">seokey :</label>
    <div class="col-sm-8">
      <input type="text" name="trackseo" value="Are Wah" id="trackseo" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="track_title" class="control-label col-sm-2">track_title :</label>
    <div class="col-sm-8">
      <input type="text" name="track_title" value="Are Wah tu Bhi" id="trackTitle" class="form-control">
    </div>
  </div>
  <div class="col-sm-offset-2 col-sm-10" style="margin-top:10px;">
    <input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
    <input class="btn btn-success" type="submit" name="cancel" id="cancel" value="Cancel">
  </div>
</form>

and below is the javascript function from where we will call the ajax function :

function insertData() {
  callToAjax();
  return false
}

function callToAjax() {
  //using XMLHttp submit data
}

but i don't know how we will send data of all forms. Thanks For Advance.

With the click of a input type="submit" you can submit only one form at a time.. plus you have given input type="submit" for button cancel too which also submits the form — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 11, 2015 at 10:12

Community · Accepted Answer · 2017-05-23 12:14:37Z

0

Similar post submitting multiple forms with AJAX

Name them differently and submit them like this,

<script>
    function submitAll() {
        document.form-horizontal1.submit();
        document.form-horizontal2.submit();
        document.form-horizontal3.submit();
    }
</script>

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 11, 2015 at 10:11

yeppe

6892 gold badges15 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Submit Multiple Form to a File with Ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related