javascript - Need Workaround in JS: object is not a function (when calling form.submit()) -

javascript - Need Workaround in JS: object is not a function (when calling form.submit()) -

the legacy scheme have work disgusting mixture of php , java. html generated both. processing form submits done in java, such in case of form. in current form server-side expects element named "submit" when validates form input. otherwise reloads form page.

this fine until management decided wanted form added checkbox confirm legal stuff , wanted validated on front-end before beingness submitted. when heck broke loose.

you see in order validate on front-end need override basic html submit on button click , direct validation function. utilize js phone call form.submit() function. unfortunately in dom functionality overridden element in form name of "submit".

this creating next error: "uncaught typeerror: object not function".

obviously, due having submit button name of "submit".

the problem don't think can edit java side of not expect (i find out more tomorrow). due archaic , overly complex, horrible scheme breaks when sneeze hard.

so need workaround on front-end allow me submit form input name of "submit" , value of "submit" , still able utilize js validation.

sample code:

<form class="disclosure-agreements" method="post" action="/" name="form_a"> <input type="hidden" name="page" value="nda_agree"> <input type="hidden" name="nda_agree_page" value="true"> <input type="hidden" name="nda_agreed" value="true"> <div style="margin-right: 10px; width: 410px; font-size: 10px;"> <div class="blue-checkbox"> <input type="checkbox" id="disclosure-agree" name="disclosure-agree"> <label for="disclosure-agree"> <span class="strong green-text large-text">i agree</span> clicking box submit application, certify have read , agreed of terms, conditions, provisions , disclosures contained in blah blah blah </label> </div> </div> <div class="nda_btns"> <div id="btn-wrapper" class="center"> <button id="submit-btn" name="submit" class="green-bkgd" tabindex="" value="submit" onclick="return false;" type="submit"> <span class="primary-btn-text">submit</span><br> <span class="sub-btn-text">apply now</span> </button> <button id="cancel-btn" name="cancelbutton" class="red-bkgd" onclick="return false;"> <span class="primary-btn-text">cancel</span><br> <span class="sub-btn-text">do not apply</span> </button> </div> </div> </form>

with js:

<script type="text/javascript"> $(document).ready(function() { $('form.disclosure-agreements #submit-btn').click(function() { if ($('form.disclosure-agreements input#disclosure-agree').is(':checked') === true) { $('form.disclosure-agreements').submit(); //document.createelement('form').submit.call(document.form_a); //i tried homecoming true; } else { alert("you must read , agree terms , disclosures before submitting."); homecoming false; } }); }); </script>

remove onclick="return false;" button , phone call of $('form.disclosure-agreements').submit();

when click button , click-handler returns false it's sufficient(the click cancelled , form not submitted)

when click-handler returns true form submitted(that's default-action when click submit-button, there's no need phone call submit())

javascript html forms