<input type="submit" /> doesn't execute javascript code

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>

Are there any errors on the JavaScript console? If you put a breakpoint in the code, is it truly not executed at all or does it execute and then fail in some way? — David
– David, Commented Aug 10, 2014 at 21:50

cyk · Accepted Answer · 2014-08-10 21:53:18Z

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");
        }
}

answered Aug 10, 2014 at 21:53

cyk

5812 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MartinWebb · Accepted Answer · 2014-08-10 21:58:21Z

1

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.

answered Aug 10, 2014 at 21:58

MartinWebb

2,0081 gold badge14 silver badges16 bronze badges

Comments

tigeruppercut · Accepted Answer · 2014-08-10 21:52:04Z

0

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

answered Aug 10, 2014 at 21:52

tigeruppercut

1388 bronze badges

Collectives™ on Stack Overflow

<input type="submit" /> doesn't execute javascript code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related