Submit and onclick not working together

Question

<input type="submit" class="sub" onClick="exefunction2()" id="button">

When I click on the submit button onClick is not working. How can I fix this? I need to work this on submitting the form because onClick event contains values.

Answer 1

The best way is to call you method on the form tag like this:

<form onsubmit="return exefunction2();">
...
</form>

Returning false will not submit the form, true will submit!

to post more data (builded with exefunction2) you can use this

<script type="text/javascript">
    function exefunction2(form) {
        //add dynamic values
        var dynValues = {
            "val1": 1,
            "val2": "bla"
        };

        for(var name in dynValues) {
            //check if field exists
            var input = null;
            if(document.getElementsByName(name).length === 0) {
                input = document.createElement('input');
                input.setAttribute('name', name);
                input.setAttribute('type', 'hidden');
                form.appendChild(input);
            }
            else {
                input = document.getElementsByName(name)[0];
            }

            input.setAttribute('value', dynValues[name]);
        }
        return true;
    }
</script>

<form onsubmit="return exefunction2(this);">
    <input type="submit" />
</form>

Answer 2

W3 schools has a good explanation here: https://www.w3schools.com/js/js_validation.asp

Basically, submit waits for a return value from onClick before doing anything. You can wire up a confirm() request too, if you like. If the form validates, just write something like return confirm("continue"). It's an old question, but I hope it helps anyone who stumbles across it. Another big reason for failure is a bug in your script. Unfortunately, unless you are running a debugger in your browser, it is very difficult to discover what is crashing your script. Turning on your browser debugger can be helpful to trace any issues. In Chrome you can use CTRL-SHIFT-I for Windows or CMD-OPTION-I for Mac. If you pause on caught errors, you can find any syntax or fatal errors that are prematurely stopping your script.

Answer 3

You can submit the form with Javascript.

<form id="form_id" ...>
<input type="button" class="sub" onclick="exefunction2();" id="button">

The Javascript:

function exefunction2() {
    ...
    document.forms["form_id"].submit();
}

Answer 4

Well, I don't know if that's the "official" expected behavior, but that's how it works: a submit-type button will no longer submit if you add to it an onclick Javascript function. Just have the function also submit the form or have the function return false

Answer 5

Try <form onSubmit="exefunction2()">.

Answer 6

Agreeing to @silly , I used the same idea . I am sharing the implementation. My objective was , to disable a button "Execute" which is used to submit a form , until a response is received , upon which , the "execute" button should be enabled again. I am using Flask .

My Form:

<form onsubmit="return disableExecuteButton();" method="POST" action="/dothis">
.....
</form>

My JS:

function disableExecuteButton(){
    var executeButton = document.getElementById("executeButton");
    executeButton.setAttribute("disabled","disabled");
    return true;
}

function reactivateExecuteButton(){
    var executeButton = document.getElementById("executeButton");
    executeButton.setAttribute("disabled","enabled");
}

From Flask, I return:

return render_template('result.html', message=message, error=error, html_content=result, history=session['actions_taken'], done=True)

The "done=True" , is what I use to indicate, that the response is received and we need to enable the button again.

To re enable the button:

{% if done %}
    <script type="text/javascript">
        reactivateExecuteButton()
    </script>
{% endif %}

Answer 7

Change the event to onsubmit, and return false to avoid the form to be submitted.

<input type="submit" class="sub" onsubmit="exefunction2();return false;" id="button">