如何向页面提交多个表单

时间:2015-08-11 12:54:37

标签: javascript php jquery ajax forms

下面是示例表单,它是通过在php中循环生成的,并希望逐个表单提交表单数据,所有表单数据将通过单个get.php文件正确插入数据库中,并且还希望在提交表单后重定向以形成操作文件。

<form class="form-horizontal" action="get.php" method="post">
  <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="3407" 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="seokey" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" 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="tracktitle" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="meta_track" class="control-label col-sm-2">meta_track :</label>
    <div class="col-sm-8">
      <input type="text" name="metatrack" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan.mp3" id="track_id" class="form-control">
    </div>
  </div>
</form>
<form class="form-horizontal" action="get.php" method="post">
  <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="3407" 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="seokey" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" 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="tracktitle" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="meta_track" class="control-label col-sm-2">meta_track :</label>
    <div class="col-sm-8">
      <input type="text" name="metatrack" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan.mp3" id="track_id" class="form-control">
    </div>
  </div>
</form><form class="form-horizontal" action="get.php" method="post">
  <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="3407" 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="seokey" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" 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="tracktitle" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan" id="track_id" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="meta_track" class="control-label col-sm-2">meta_track :</label>
    <div class="col-sm-8">
      <input type="text" name="metatrack" value="Aahun Aahun Aahun Aahun - Jai Jawan Jai Kisaan.mp3" id="track_id" class="form-control">
    </div>
  </div>
</form>

<div class="col-sm-offset-2 col-sm-10" style="margin-top:10px;">
  <button class="btn btn-primary">Submit</button>
</div>

我自己做了很多尝试,但失败了。 jqueryAjax没问题。

1 个答案:

答案 0 :(得分:0)

试一试。单击按钮时,它将通过ajax提交每个表单。最后一个表格将正常提交,以便重定向。

$('button').click(function(){
    var $forms = $('form');
    var numForms = $forms.length;
    $forms.each(function(i, el){
        if(i < numForms - 1){
           $.post($(this).attr('action'), $(this).serialize());
        }else{
           $(this).submit();
        }
    });
});

表单数据可以通过$_POST超全局访问,其中包含表单元素的name属性,例如$_POST['tracktitle']