CODEWITHSUNDEEP
javascriptjqueryajax
steeped
steeped

Reputation: 2633

Submitting a dynamic form in jQuery

I am dynamically creating a form in Jquery, and this form needs to submitted using AJAX. I'm probably doing something stupid, so your help would be greatly appreciated.

I am dynamically creating a form when a link is clicked:

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='submit' value='update' id='update_submit' name='update_submit' />");
});

When the form is submitted:

$('#update_project').live("submit", function(e){      
    e.preventDefault();        
    $.post('project/update', $(this).serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

Unfortunately, the page is refreshing (it shouldn't), and there is no return.

Thank you!

Upvotes: 1

Views: 301

Answers (2)

cssyphus
cssyphus

Reputation: 40038

Forgive me if my answer is too basic - your coding is quite advanced but you missed a couple of things. Better for me to be too pedantic rather than not provide enough info to immediately resolve your problem.

The page is refreshing when user clicks the update button because you are using the .submit method. If you do not want the form to refresh, use Stephen King's answer above to:

  • change the <input> type to type="button", then
  • use the ("#yourbuttonID").click() event to $.post your form data.

Also as SK said above, note the .live() is deprecated, so simply switch for .on()

Try this:

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />");
});

$(document).on("click", "#update_submit", function(e){
    $.post('your_processor_filename.php', $(this).closest('form').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

Note that you need the .closest('form') selector to get your form data serialized.

I would also use $(document).on('click'... to ensure your injected button is found.

I am unfamiliar with the type of file to which you are sending the form data for processing, but project/update is not a familiar file type to me. Ensure that it is a page of code that can process your data, such as a .PHP file. See my example above -- or, better yet...

By way of example, create a .PHP file named 'your_processor_filename.php' (i.e. the filename I am referencing in the code I typed above). Put it in the same folder and type the following at the top:

//echo 'Got to the PHP side';

echo '<pre>';
print_r($_POST);
echo '</pre>';
die();

That will echo back what you sent and allow you both to see the data going through and confirm that the AJAX is working.

Note that your HTML must contain a div with the ID complete_msg to see the return message, such as:

<div id="complete_msg"></div>

Upvotes: 0

Stephen King
Stephen King

Reputation: 836

I would change the submit to a button:

 input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />

and the event, live is depreciated (http://api.jquery.com/live/):

$('#update_submit').click(function(e){      
    $.post('project/update', $('#update_project').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

Upvotes: 2

Related Questions