Question

我的网站上有一个表单，我在“添加行”中动态添加内联表单。按钮单击。当用户点击“提交”时按钮我想从请求中创建的所有表单中发送数据，而不仅仅是第一个表单（如我当前的解决方案中所示）。我怎么能这样做？我想这需要一些AJAX和JQuery魔术？每次用户创建一个新的并输入内容，序列化整个事物并发送请求时，我可以以某种方式附加表单的值吗？我是网络开发的新手，我不确定如何做到这一点。最终目标是将表单中的数据存储在数据库中。

我的代码如下：

main.html中：

@app.route('/entries', methods=['GET', 'POST'])
def add_entry():
  if request.method == 'POST':
    print request.form['entry']
  return render_template('add_entry.html')

add_entry.html：

<form action="{{ url_for('add_entry') }}" method=post class="form-inline" role="form" id="entry_form">
  <div class="form-group">
    <input type="entry" class="form-control" name="entry" placeholder="new entry" value="{{ request.form.entry }}">
  </div>

  <div class="form-group">
    <button type="button" class="btn addButton">Add</button>
  </div>

  <div class="form-group">
    <button type="submit" class="btn submitButton">Submit</button>
  </div>
</form>

<form action="{{ url_for('add_entry') }}" method=post class="form-inline hide" role="form" id="entriesTemplate">
  <div class="form-group">
    <input type="entry" class="form-control" name="entry" placeholder="new entry" value="{{ request.form.entry }}">
  </div>

  <div class="form-group">
    <button type="button" class="btn removeButton">Remove</button>
  </div>
</form>

form.js：

$(document).ready(function() {
$('.addButton').click(function(){
    $('#entriesTemplate')
        .clone()
        .removeClass('hide')
        .removeAttr('id')
        .prependTo("#entry_form");
});

Answer 1

<form>
    <input type="text" name="name" value="Leo" />
    <input type="text" name="age" value="20" />
    <input type='submit' />
</form>
<form>
    <input type="text" name="name" value="John" />
    <input type="text" name="age" value="25" />
    <input type='submit' />
</form>

$("form").submit(function (e) {
    e.preventDefault();
    var data_array = $("form").map(function(){
        return $(this).serializeArray();
    });
    $.ajax({
        url:'ajax.php',
        data:data_array,
        success:function(html){

        }
    });
});

试试吧

http://jsfiddle.net/e62hxjzu/

Answer 2

我假设您动态创建的每个表单只有一个input元素与class：＆＃39;表单控件＆＃39;。如果要在执行ajax请求之前收集所有这些值，可以只查询这些元素并将它们附加到一个字符串中。我在代码上创建了example，只记录了表单中所有输入的值。相关的代码段：

 $( '.form-control' ).each(function( index ) {
    console.log($( this ).val() ); 
 });

那就是它。你有这个字符串或数组，取决于你如何存储它。你可以在ajax请求的data元素中传递它，你应该好好去。希望它能指出你正确的方向。

Answer 3

我认为你可以使用JQuery和Ajax来做到这一点。这是一个例子。 add_entry.html：

<div class="form">
  <div class="row-container">

  </div>
  <div class="form-group">
    <input type="entry" class="form-control init-row" name="entry" placeholder="new entry" value="">
  </div>

  <div class="form-group">
    <button type="button" class="btn addButton">Add</button>
  </div>

  <div class="form-group">
    <button type="button" class="btn submitButton">Submit</button>
  </div>
</div>

form.js：

$(document).ready(function() {
  function  getAllRow(){
     var rows=[];
     $('.new-row').each(function () {
     var row={};
     row.rowvalue = $(this).val();
     rows.push(row);
   })
   return rows;
   }

  $('.addButton').click(function(){
       var init_row_value=$('.init-row').val();
       $('.row-container').append('<input class="new-row" value="'+ init_row_value +'"  disabled>');
    });

   $('.submitButton').click(function(){
     var allRowData = getAllRow();
    $.ajax({
      type: "POST",
      url: "allSubmit.php",
      data: allRowData 
    })
   });


});

您将获得服务器端的日期作为＆＃34; rowvalue＆＃34;

的列表

如何在一个请求中从多个表单发送数据？

3 个答案: