Question

Hi below I have a submit button and a jquery function it performs when the submit button is clicked on:

<p><input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" onClick="return myClickHandler();" /></p>

<script type="text/javascript"> 
function myClickHandler()
{
     if (validation())
     {
         showConfirm();
         return true;
     }

     return false;
}
</script>

Now as you can see if the validation() function is met, then it will perform the showConfirm() function and this function will perform the confirmation box which is below:

function showConfirm()
{
    var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards Questions, Options and Answers for your Assessment." + "\n" + "\n" + "Are you sure you want to Proceed?" + "\n" );

    if (confirmMsg == true)
    {
        submitform(); 
        return true;  
    }
    else
    {
        return false;
    }
}

function submitform()
{
    var fieldvalue = $("#QandA").val();
    $.post("insertQuestion.php", $("#QandA").serialize(), function(data)
    {
        var QandAO = document.getElementById("QandA");
        QandAO.submit();
    });  
    alert("Your Details for this Assessment has been submitted"); 
}

My question is this. If the user clicks on OK in the confirmation box, then it submits the page which is fine. But if the user clicks on Cancel, then it should not submit the page. The problem is that it is submitting the page even though the Cancel button has been clicked on. Why is this?

UPDATE:

I have tried this code below but still no luck:

function myClickHandler()
{
     if(validation())
     {
         return showConfirm();
     }

     return false;
}

Answer 1

if(validation()){
    showConfirm();
    return true;
}

You don’t do anything with the return from showConfirm();. You just return true after that function is done. Try return showConfirm();.

---

If the user clicks Cancel in the showConfirm() function, then it does not execute the submitform() function, and the showConfirm() function returns false. But since you don’t capture that return value, the myClickHandler() function returns true, which doesn’t prevent the form from being submitted.

You probably just want the myClickHandler() function to always return false, and let the form submission be handled by your showConfirm() function.

---

UPDATE:
Here is a (IMO) better way. I’m not sure that you need to use AJAX (the $.post call) at all. Try this:

<form id="QandA" action="somepage.php" method="POST" onsubmit="return myClickHandler()">
    <!--
        ...
    -->
    <input type="submit" id="submitBtn" name="submitDetails" value="Submit Details" />
</form>

<script type="text/javascript">
    function myClickHandler()
    {
        if (!validation())
            return false;

        if (!confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards Questions, Options and Answers for your Assessment." + "\n" + "\n" + "Are you sure you want to Proceed?" + "\n" ))
            return false;

        // if all you're trying to do is submit the form to insertQuestion.php,
        // then skip this AJAX call. I'm assuming that you need to do something
        // on the server before submitting the form. if not, skip this.
        $.ajax({
            url: "insertQuestion.php",
            data: $("#QandA").serialize(),
            async: false
        });

        return true;
    }
</script>