How to add a AJAX submit form inside a notification without reloading the page?

Question

I am using the jQuery plugin for notifications toastr js (http://codeseven.github.io/toastr/) and I am trying to add a contact form in the notification balloon and when submitted to use AJAX. Even though that the form is working outside the toastr.info('') I can not make it happen in the script. when I click the submit, it refreshes the page.

How can i fix this ?

Ajax Script

$(function(){
    $("#contactform").submit(function(event){
        event.preventDefault();
        $.post('mailme.php', $("#contactform").serialize(), function(data) {

        });
    });
});

HTML Form

<form id="contactform" method="post" name="myform">
    <input name="phone" type="text"><input id="submit" name="Submit" type="submit" value="send">
</form>


toastr.info('I put the above HTML code in here')

Fiddle

http://jsfiddle.net/e0k6e0vc/2

Answer 1

Try unbinding submit at the end as below:

$("#contactform").on('submit',function(event){
    event.preventDefault();
    $.post('mailme.php', $("#contactform").serialize(), function(data) {

    });
    $("#contactform").unbind('submit');
    return false;
});

UPDATE

Ok.. Since the form was dynamically getting added it wasn't identifying the submit event and hence below approach will do the work:

DEMO HERE

$(document).on('submit',"#contactform",function(event){
    event.preventDefault();
    $.post('mailme.php', $("#contactform").serialize(), function(data) {

    });
    $("#contactform").unbind('submit');
    return false;
});