JQuery and multiple inputs,forms,submits

Question

I have a bunch of forms as rows in a table. There's a submit button at the end of each row. When this button is clicked, my JQuery function creates two text boxes and another submit button. I want the POST variables from the both forms, so I can ultimately pass it onto my php script via AJAX. What would be the best way of doing this?

<script>
<?php 
$ajax_var = <<<HTML
<form method="post" id="ajax_form">
<div id="ajax_input">
    <input type="text" name="user_name" placeholder="Your name">
    <br>
    <input type="text" name="user_email" placeholder="Your e-mail">
    <br>
</div>
    <input id="ajax_submit" type="submit" value="submit">
</form>
HTML;
$ajax_var = str_replace("\n",'',$ajax_var);
?>

$("form").submit(function(e)
{
    e.preventDefault();
    $("#wrapper").prepend('<?php echo "$ajax_var" ?>');
});
$("form#ajax_form").submit(function(e)
{
    e.preventDefault();
});
</script>

The last JQuery function does not work as intended. Pressing the ajax-created submit reloads the page :S

Apul Gupta · Accepted Answer · 2014-10-26 06:33:06Z

1

As #ajax_form is not present initially. you should use .on:

$("#wrapper").on("submit", "form#ajax_form", function(e) 
{
    e.preventDefault();
    alert("It is working...");
    // Your code for Ajax
});

You can use any element wrapping the new form, if not sure put "body" in stead of "#wrapper".

Documentation: http://api.jquery.com/on/

Code Added as per communication in comments:

<script type="application/javascript">
var arr;
$(function(){
$("form").submit(function(e)
{
    e.preventDefault();
    $("#wrapper").prepend('<?php echo "$ajax_var" ?>');
    arr = $(this).serializeArray();
});
$("#wrapper").on("submit", "form#ajax_form", function(e)
{
    console.log(arr);
    e.preventDefault();
});
});
</script>

edited Oct 26, 2014 at 6:33

answered Oct 26, 2014 at 5:16

Apul Gupta

3,0344 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

rottweilers_anonymous Over a year ago

Nice! And how should I pass $_POST variables between the forms I have in my table to my new AJAX form?

Apul Gupta Over a year ago

You can use form.serializeArray() for both forms, it will return you data for all fields in array format.

rottweilers_anonymous Over a year ago

Okay, and if I assign it to a variable, it will be preserved between events?

rottweilers_anonymous Over a year ago

I tested it, and it went out of scope once the second event was called (ajax form).

Apul Gupta Over a year ago

prepare a fiddle please or show me your full code. how are you declaring variable, just show me 2 - 3 lines around that?

|

Collectives™ on Stack Overflow

JQuery and multiple inputs,forms,submits

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related