CODEWITHSUNDEEP
javascriptjquerybindingsubmitbind
pepe
pepe

Reputation: 9909

jQuery bind to submit causing problems

I show a form using jQuery Fancybox -- in the form, the user has the option to edit the record or delete the record.

The JS config for this popup is as follows:

$('tr.record').click(function() {
    var record_id = $(this).attr("id");
    var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
    $.fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
});

This works perfectly when the user changes his data and clicks save, as below:

<form>
    <button>
        <span>
            Save
        </span>
    </button>
</form>

Next I opened a new form for the delete button

<form>
    <button onclick="confirmDeleteRecord();">
        <span>
            Delete
        </span>
    </button>
</form>

Which onClick runs this:

function confirmDeleteRecord() {
    var agree = confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
    if (agree) return true;
    else return false;
}

The problem I'm having is that when I click on 'Cancel' in the browser modal confirmation, the form is still submitted and the record is deleted.

I suspect this has to do with the bind to submit -- anyone know how to fix this issue? 'Cancel' should just close the browser modal.

Thanks for helping, much appreciated.

Upvotes: 0

Views: 3414

Answers (3)

Ender
Ender

Reputation: 15221

You must bind the submit handler TO something. This is your problem line:

$.bind("submit", function() {

You'll need to select the form that is being submitted and bind a submit handler to the form. So, for example, if your form has id myForm, it should say something like this:

$('#myForm').bind("submit", function() {

Or even better, use the shortcut call:

$('#myForm').submit(function() {

For your button, remove onclick="confirmDeleteRecord();, and give it a class or id instead:

<button id="btnDelete">
    <span>Delete</span>
</button>

And finally, add a click handler assignment to your jQuery:

$('#btnDelete').click(confirmDeleteRecord);

For the sake of tidiness, you could also simplify your confirm function like so:

function confirmDeleteRecord() {
    return confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
}

Upvotes: 2

Chandu
Chandu

Reputation: 82913

Change the button HTML to as follows(use return confirmDeleteRecord();):

<button onclick="return confirmDeleteRecord();">         
   <span>             Delete         </span>     
</button>

Edit:

Better way is to attach a click event handler to the delete button in an unobstrusive way. You can try this as an alternative:

<button id="deleteBtn">         
   <span>             Delete         </span>     
</button> 
<script type="text/javascript">
 $(function(){
    $("#deleteBtn").click(confirmDeleteRecord);
 });
</script>

Upvotes: 3

Shane Courtrille
Shane Courtrille

Reputation: 14097

Your bind will bind to every submit. You need to provide an id or class selector for each submit. For instance:

$('#classname').submit(function() { // your code here }

See: http://api.jquery.com/submit/

Upvotes: 2

Related Questions