How to submit an AJAX form with a link?

Question

I have the following form:

<form id='confirm_reset' action='login/forgotPassword_action' method='post'>
<input type='hidden' name='user_email' value='user_email'>
<a href='#' onclick="confirm_reset.submit();">Submit</a>
</form>

<div id="alert_box_register"></div>

I am trying to submit this with Ajax to return JSON in the alert box:

$("#confirm_reset").on("submit", function(event) {

   //disable default click operation
   event.preventDefault();

   var action_url = $(this).attr("action");

   alert_box_register("Resetting password...");

   console.log(action_url);

   var postData = $(this).serializeArray();
   console.log(postData);

   $.post(action_url, postData, function(data) { 
      console.log(data);
      var obj = $.parseJSON(data); 

      alert_box_register(obj.message); 
   });

});

This script returns no result (as if the link did not function). Where am I going wrong?

May I suggest using Firebug for Firefox or Chrome's console to see if it gives you an error. (Access Chrome's by Ctrl+Shift+J). — Travis Pessetto, Nov 06 '13 at 01:08
In your original HTML, `confirm_reset` is used as a variable - but it's not, it's an element ID. You need to do something like `$('#confirm_reset').submit()` instead. — cloudfeet, Nov 06 '13 at 01:09
One possibility would be to listen for a click on your `a` element. ex: `$('#confirm_reset > a').on('click', ...)`; — atomman, Nov 06 '13 at 01:10
@cloudfeet, can you provide an example? onclick='$('#confirm_reset').submit()' creates an "unknown error". — alias51, Nov 06 '13 at 01:14
@alias51: that makes an error probably because of how your quotes are set up in that... I'm not sure about using jquery in an onClick, either. — gloomy.penguin, Nov 06 '13 at 01:18
If you can change a tag to an input submit and style it, I think it is the fastest way to solve your problem. — haudoing, Nov 06 '13 at 01:19
what is this? `alert_box_register("Resetting password...");` — gloomy.penguin, Nov 06 '13 at 01:20
And I think the modern way to use javascript is avoid to use onclick in dom. So it's better use input submit for this case. [http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) — haudoing, Nov 06 '13 at 01:39
Your action `action='login/forgotPassword_action'` doesn't have extension. — Milan and Friends, Nov 06 '13 at 04:33

score 0 · Answer 1 · answered Nov 07 '13 at 13:58

Not sure if this code is still a problem for you or not...?

A quick note about out your progress messages ("Resetting password..."): this code will probably run so fast that this message will just barely flash on the screen for the user. I don't know how your stuff is set up but you may never see this on the screen.

<!-- The following line was missing .php from the action -->
<!--form id='confirm_reset' action='login/forgotPassword_action' method='post'-->
<form id='confirm_reset' action='login/forgotPassword_action.php' method='post'>
   <input name="txtbox" type="text" value="hello world"/>
   <input type='hidden' name='user_email' value='user_email'>

   <!-- submit_confirm_reset() is a function I made in the javascript tages-->
   <a href='#' onclick="submit_confirm_reset();">Submit</a>
</form>

<div id="alert_box_register"></div> 

<script>

function submit_confirm_reset() {
   $("#confirm_reset").submit(); 
}

$("#confirm_reset").on("submit", function(event) 
{ 
   console.log('("#confirm_reset").on("submit", function(event)');

   //disable default click operation
   event.preventDefault();

   var action_url = $(this).attr("action"); 

   // you were using alert_box_register like it was a function
   // but it doesn't exist in the code you posted in your question
   // but a DOM element has this name so I assume you meant that
   $("#alert_box_register").html("Resetting password..."); 
   console.log(action_url);

   var postData = $(this).serializeArray();
   console.log(postData);

   $.post(action_url, postData, function(data) { 
      console.log(data);

      // if this response is already json, you don't need to parse it 
      var obj = $.parseJSON(data);  
      $("#alert_box_register").html(obj.message); 
   }); 
});
</script>

How to submit an AJAX form with a link?

1 Answers1