Question

I have a div on a page where I load a div from another php page (of the same website) by using the jquery .load() and setTimeout() to refresh it. This div though contains a form with two radio buttons that have random names and id’s. After the submit button is pressed the page gets redirected to the form page which contains other options. What I want to do is submit the form without redirecting to the default form page.

p.s. the div containing the form “disappears” after submission and another div with other options appears. I just want it to dissappear from the destination div. I don’t have control over the source page and cannot change anything there.

<div id="destinationdiv">
//source form that doesn't have id goes here
</div>

Answer 1

You can delegate a submit handler to the form on page load, even though it won’t exist until it is ajax loaded. Since form has no identifiers, will use it’s parent element and the form tag as selector

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

$(document).on('submit', '#destinationdiv form', function() { /* "this" will be the form element*/


    /* serialize all fields for ajax submittal*/
    var data = $(this).serialize();

    /* ajax post data */
    $.post(url, data, function(data) { 
       /* do something with return data, or local html on success here*/
    });

    /* prevent browser default submit*/

    return false;
})