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

Submit Multiple Form to a File with Ajax

本文关键字：一个 文件 表单提交 Ajax 使用      更新时间：2023-09-26

嗨，我们有多个表单，将提交到一个页面使用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
}

但是我不知道我们如何发送所有形式的数据。

类似的文章，使用AJAX提交多个表单

以不同的方式命名并像这样提交它们，

<script>
    function submitAll() {
        document.form-horizontal1.submit();
        document.form-horizontal2.submit();
        document.form-horizontal3.submit();
    }
</script>
相关文章：