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 mas"/></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?

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 mas"/></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?

• javascript
• html

Share Improve this question Follow asked Nov 24, 2014 at 17:22 MaryMary 7122 silver badges99 bronze badges 4

• You're not returning the false value, so the form is submitted anyway. Add return valid; at the end of the function. – Ortiga Commented Nov 24, 2014 at 17:24
• What happens if you put an alert() in that function? – GolezTrol Commented Nov 24, 2014 at 17:26
• Remove disabled="disabled" and try again. See this line in docs: 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 Commented Nov 24, 2014 at 17:27
• possible duplicate of How to add two "on submit=" values to a form? – Ortiga Commented Nov 24, 2014 at 17:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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.