使用Ajax将多个表单提交到文件

时间:2015-08-11 10:07:54

标签: javascript jquery ajax forms

您好我们有多个表单,它将使用ajax提交到单个页面,并且数据将被插入到数据库中:

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

以下是我们将调用ajax函数的javascript函数:

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

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

但我不知道我们将如何发送所有表格的数据。 谢谢你的进步。

1 个答案:

答案 0 :(得分:0)

类似文章submitting multiple forms with AJAX

以不同方式命名,并按照这样提交,

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