onsubmit not being called on an HTML form

Question

I have the following form as part of my webpage:

<form id="collabAccess"  onsubmit="submitCollabForm()" >
         <div id="row-1">
              <div class="two-col" id="email"><input type="text" placeholder="Enter email addresses separated by commas"/></div>
                        <div id="collabSelect" class="collab two-col styled-select">
                            <select id="collabaccess">
                                <option>Can Read</option>
                                <option>Can Write</option>
                                <option>Can Read & Write </option>
                                <option>Administrator </option>
                            </select>
                        </div>
            </div>
            <div id="message">
                   <textarea id="personalMessage" cols="154" rows="10" placeholder="Optional: include a personal message"></textarea>
            </div>
               <div id="submit-wrapper"><input type="submit" value="Add Collaborators" id="addCollaborators" disabled='disabled'  class="small-btn disabled"/></div>
 </form>

The function submitCollabForm() is as follows:

function submitCollabForm() {
console.log('in submitCollabForm');
var valid = validateEmails();
if (valid == false) {
    var email = document.getElementById('email');
    email.addClass('error');
}

}

where validateEmails() is just another js function for validating that the email addresses int he form have the correct format.

However, it looks like onsubmit is not being called at all. Even if I change things to onsubmit="console.log('xyz'), no console statement is being output. I've also checked for javascript errors in the console, but I am getting nothing.

Is there any reason why onsubmit is not working properly?

You're not returning the false value, so the form is submitted anyway. Add `return valid;` at the end of the function. — Ortiga, Nov 24 '14 at 17:24
Remove disabled="disabled" and try again. See this line in [docs](http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls%3a-the-disabled-attribute): A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. — mprabhat, Nov 24 '14 at 17:27
possible duplicate of [How to add two "on submit=" values to a form?](http://stackoverflow.com/questions/3107061/how-to-add-two-on-submit-values-to-a-form) — Ortiga, Nov 24 '14 at 17:56

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

Your validation function needs to return false to stop the form from submitting. It's better to have

onsubmit="return submitCollabForm()"

See With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"? for details.

edited May 23 '17 at 12:20

Community

1
1

answered Nov 24 '14 at 17:29

realaboo

302
3
12

score 1 · Answer 2 · answered Nov 24 '14 at 18:01

1

The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.

answered Nov 24 '14 at 18:01

Jukka K. Korpela

195,524
37
270
390

score 0 · Answer 3 · answered Apr 21 '19 at 20:24

if you feel all code is correct still it's not working then,
Simple steps to do,

1) create one script tag in the same page where your form is, create one function and set one alert and test it. If it is working then try following steps.

2) Try to check the path of your javascript file.

3) if path is correct, then change the name of your javascript function sometimes your name tag conflicts with your function name, and submit points to it, so your call is not reaching at your function.

It happened with me. so I posted it here, hope it will be helpful to someone.

onsubmit not being called on an HTML form

3 Answers3