CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
agerrr
agerrr

Reputation: 1293

How to send data from multiple forms in one request?

I have a form on my website where I dynamically add inline forms on a 'add row' button click. When a user clicks 'submit' button I'd like to send the data from all the forms that were created in the request, not only the first one (as in my current solution). How could I do that? I guess this would require some AJAX and JQuery magic? Can I somehow append the values of the forms every time the user creates a new one and inputs something, serialize the whole thing and send with the request? I'm new to the web development and I'm not sure how this could be done yet. The final goal would be to store the data from the form in a database.

My code looks as follows:

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");
});

Upvotes: 0

Views: 4122

Answers (3)

Parfait
Parfait

Reputation: 1750

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

        }
    });
});

try it

http://jsfiddle.net/e62hxjzu/

Upvotes: 2

Vivek Pradhan
Vivek Pradhan

Reputation: 4847

I am assuming each of the forms you are dynamically creating have only one input element with the class : 'form-control'. If you want to collect all these values before you perform the ajax request, you could just query these elements and sort of append them into one string. I created an example based losely on your code that just logs the values of all inputs in the forms. Relevant code snippet:

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

That's it. One you have this string or an array, depends on how you store it. You could just pass it in the data element of the ajax request and you should be good to go. Hope it points you in the right direction.

Upvotes: 1

Kamruzzaman
Kamruzzaman

Reputation: 1443

I think you can do it using JQuery and Ajax. here is a example. 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 
    })
   });


});

you will get the date in the server side as a list of "rowvalue"

Upvotes: 0

Related Questions