<input type=“submit” />不执行javascript代码

Question

Actually, when my form is submitted with the submit button, I would want that the javascript code is executed for checking datas and if datas are not filled, to open a popup dialog and so, don't execute the action bounded to the form.

Unfortunately, the javascript code is never executed even if the javascript is on the top of the page.

Do you have a solution ?

Thank you

My form :

@using (Html.BeginForm("AddRecipe", "AddRecipe", FormMethod.Post, new { data_ajax = "false"}))
{
//Set of components to submit
//etc
<input type="submit" data-theme="b" id="addRecipeBtn" onclick="checkDatas();" value="Ajouter ma recette" />
}

My javascript code to execute :

<script>
    function checkDatas() {
            alert("ici");
            var ok = $("#fakeInput").val().length != 0 &&
                 $("#title").val().length != 0 &&
                 $("#cookingTime").val().length != 0 &&
                 $("#preparationTime").val().length != 0 &&
                 $("#ingredientListArea").val().length != 0 &&
                 $("#preparationArea").val().length != 0;

            if (!ok) {
                $("#popupDialog").popup("open");
            }
    }
</script>

Answer 1

We will need more information to determine if or why it's not executing at all.

But in order to prevent the form from submitting when validation fails, use event.preventDefault(). This, of course, will prevent the default behavior of the button from executing...in your case, it will prevent form submission.

function checkDatas(event) {
        alert("ici");
        var ok = $("#fakeInput").val().length != 0 &&
             $("#title").val().length != 0 &&
             $("#cookingTime").val().length != 0 &&
             $("#preparationTime").val().length != 0 &&
             $("#ingredientListArea").val().length != 0 &&
             $("#preparationArea").val().length != 0;

        if (!ok) {
            event.preventDefault();
            $("#popupDialog").popup("open");
        }
}

Answer 2

I think you will find your form submit is overriding your onclick handler, it would be more reliable in my opinion to catch the form onsubmit event, since the button is of type "submit"

<form onsubmit="checkDatas()">

removing the onclick event of your button.

Answer 3

Are you preventing the default submit action of a html form submit?

I would think you need something like this:

function checkDatas(e) {
  e.preventDefault();
  //the rest of your code