0

I am loading a form as a json output from an AJAX request.

The following PHP forms the JSON output of the request that displays the form:

 $this->errors[] = "<form id='confirmreset' name='confirm_reset' action='" . URL . 
"login/forgotPassword_action' method='post'><input type='hidden' name='user_email' value='" . 
$this->user_email . "'> Email already registered. <input type='submit' 
value='Click here for a PIN reminder'></form>";

I then want to be able to submit this form as an AJAX form too, but because it's not loaded in the DOM, my jquery doesn't seem to reference it. Any ideas?

Here's the code so far:

$("#confirmreset").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);

      });

    });
alias51
  • 8,178
  • 22
  • 94
  • 166

2 Answers2

0

This should be as simple as putting the second request inside the first one's success function.

StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • I tried this, it doesn't seem to pick up the onclick of the second form. I am assuming this is because the form is not part of the DOM when the page is loaded, and this is in document.ready()? – alias51 Nov 06 '13 at 09:23
0

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('submit','#confirmreset',function(event){ ..code here.. }

Syntax

$( elements ).on( events, selector, data, handler );
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107