jquery return false in form

Question

<script LANGUAGE="JavaScript"> function confirmSubmit() { jConfirm('Is the Appointment Confirmed?', 'Confirmation Dialog', function(r) { if(r){return true;} else {return false;} }); } </script>  <form name='cancel_form'id='cancel_form' method='POST' action=""> <center><input type='submit' name='confirm_appointment' value='Cancel Appointment' onclick='return confirmSubmit();'></center> </form>
<script type='text/javascript'> var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />"; var saveUrl = "<?php echo $this->url(array('controller' => 'appointment', 'action' =>'cancelsave'));?>"; $('#cancel_form').ajaxForm({ success: saveCallbk , url : saveUrl }); function saveCallbk(responseText) { jAlert(responseText,'Alert Dialog'); if(responseText.indexOf("ERROR")<0) { $(location).attr('href',redirectUrl); } } </script>

when I submit the form I call this function and use jConfirm from jquery. I print r. It's printing properly like true and false, but return false or return true has no effects. It just shows the pop up and submits the form, does not wait for confirmation. How to solve this?

Answer 1

Use type="button" instead of type="submit" and attach this on the click event of your form button.

$('#button').click(function () {
    jConfirm('Is the Appointment Confirmed?', 'Confirmation Dialog', function(r) {
        if (r) {
            $('#form').submit();
        }
    });

});

Answer 2

What Ivo said.

Your function confirmSubmit should return true or false.

Edit -

I am not familiar with jConfirm, but you may need to return the results from jConfirm, like this.

<script>
function confirmSubmit() 
{ 
    return jConfirm('Is the Appointment Confirmed?', 'Confirmation Dialog',         
        function(r) {      
            if(r){return true;} else {return false;} 
        });
}
</script>

if this is the case, you could do away with confirmSubmit() altogether and just say:

$('#form').submit(function() {
   return jConfirm('Is the Appointment Confirmed?', 'Confirmation Dialog', function(r) { return r; } );
});

Hope this helps...

Dang that Ivo is GOOD :-) Personally, i do what Ivo has demonstrated. Create an input of type="button", then delegate a click function.

Answer 3

This is how I cancel submit events using JavaScript and jQuery:

First I have a utility function called cancelEvent: (Which I picked up from this blog entry.)

function cancelEvent(e)
{
    e = e ? e : window.event;
    if(e.stopPropagation)
            e.stopPropagation();
    if(e.preventDefault)
            e.preventDefault();
    e.cancelBubble = true;
    e.cancel = true;
    e.returnValue = false;
    return false;
}

Then I'll have the main JavaScript file that will contain code something like this:

function validateForm(e)
{
    var validated = true;
    /*
    Validation code goes here.
    If validation fails set validated to false
    */
    //If validation fails then at the end I'll want to cancel the submit event
    if(validated)
    {
        return true;
    }
    return cancelEvent(e);
}

jQuery(document).ready(function()
{
    jQuery("#theForm").submit(validateForm);
}