CODEWITHSUNDEEP
javascriptjqueryforms
Joe Nyambura
Joe Nyambura

Reputation: 203

Cannot prevent default actions for form Buttons appended on Jquery UI dialog

I am loading form thorough Ajax to a jquery dialog window but I can't prevent default submission of the Form when I attach a click event on the submit button ie. I want the form not to submit when the user clicks the appended form submit button and the dialog does not close. The problem am having is , that, I can't select this button using jquery but the script functions when i run it in firebug and the dialog is already opened. The form is daynamincally created in the admin.php from a class NB: the form is loaded correctly in the Dialog window so ajax is fine but i cant select and attach click event to the form summit button and i dont want to use the dialog buttons. I want the form to function as expected. Then, I can prevent the submit button action if the form is on normal webpage but not in the dialog Please assist me am new in programming This is the code in the admin.php which is loaded via Jquery ajax when a link clicked

<form action="process.php" method="post" id="edit_form">   
<input type="submit" name="event_submit" value="Create" />
<a href="./">cancel</a>
</fieldset>
</form>

I cant also prevent the default action of the cancel link when it is clicked. THis is the jquery code to load the admin.php

This is the code to prevent the default action of form submit button from functioning

$("#edit_form input[type=submit]").on("click",function(event){
        event.preventDefault();         
        alert('You clicked a button');  
    });

Upvotes: 1

Views: 2810

Answers (3)

Pabuc
Pabuc

Reputation: 5638

Try delegate

Appended DOM objects will also have events.

$(body).delegate("#edit_form input[type=submit]","click",function(event)
{
        event.preventDefault();         
        alert('You clicked a button');  
});

Upvotes: 0

karaxuna
karaxuna

Reputation: 26940

Try this:

$(document).on("click", "#edit_form input[type=submit]",function(event){
    event.preventDefault();         
    alert('You clicked a button');  
});

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78595

You need to use event delegation to make sure the button event is bound when it is created dynamically by jQuery UI:

$(document).on("click","#edit_form input[type=submit]", function(event){
        event.preventDefault();         
        alert('You clicked a button');  
    });

Take a look at the documentation for .on which explains the concept in great detail.

Upvotes: 3

Related Questions