JS中的“需要解决方法”：对象不是函数（调用form.submit（）时）

Question

The legacy system I have to work with is a disgusting mixture of PHP and Java. HTML is generated by both. Processing form submits is generally done in the Java, such as in the case of this form. In the current form the server-side expects an element named "submit" when it validates the form input. Otherwise it just reloads the form page.

This was fine until management decided they wanted a form that added a checkbox to confirm some legal stuff and wanted it to be validated on the front-end before being submitted. This is when all heck broke loose.

You see in order to validate on the front-end I need to override the basic HTML submit on button click and direct it to a validation function. Then use JS to call the form.submit() function. Unfortunately in the DOM this functionality is overridden by any element in the form by the name of "submit".

This is creating the following error: "Uncaught TypeError: object is not a function".

Obviously, this is due to having a submit button with the name of "submit".

The problem is that I don't think we can edit the Java side of this to not expect that (I will find out more tomorrow). This is due to an archaic and overly complex, horrible system that breaks when you sneeze too hard.

So I need a workaround on the front-end that will allow me to submit a form input with the name of "submit" and a value of "Submit" AND still be able to use 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> By clicking this box to submit my application, I certify that I have read and agreed to all of the terms, conditions, provisions and disclosures contained in the 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 this 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 this too
            return true;
        } else {
            alert("You must read and agree to the terms and disclosures before submitting.");
            return false;
        }
    });
});
</script>

Answer 1

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

When you click the button and the click-handler returns false it's sufficient(the click will be cancelled and the form will not be submitted)

When the click -handler returns true the form will be submitted(that's the default-action when you click a submit-button, there's no need to call submit() )

Answer 2

The object is not a form, try something like this:

$('form').submit();

**or better in your case **

$(this).parents('form').submit(); // much safer to use no names, it is shorter and faster

this = the button you click on

Also return only false when checkbox is not checked, do not return true. use return; To cancel the event you need to do the following:

function(e)
{
   if( <checked> ) {
     <submit form>
     return;
   }  

   try {
     e.preventDefault();
     e.stopImmediatePropagation();
     e.stopPropagation();
  } catch(ee) {}  
  return false;
} 

But a better idea is to use the 'submit' event of the form $('form').on('submit', function(e) {} ); and remove the onclick event handlers.