Question

我必须使用的遗留系统是一种令人厌恶的PHP和Java混合体。 HTML由两者生成。处理表单提交通常在Java中完成，例如在此表单的情况下。在当前形式中，服务器端需要一个名为＆＃34;提交＆＃34;的元素。当它验证表单输入时。否则它只是重新加载表单页面。

这很好，直到管理层决定他们想要一个表格，添加一个复选框来确认一些合法的东西，并希望在提交之前在前端验证它。这就是所有的一切都破裂了。

您看到为了在前端进行验证，我需要在按钮单击时覆盖基本HTML提交并将其指向验证功能。然后使用JS调用form.submit（）函数。遗憾的是，在DOM中，此功能被表单中的任何元素覆盖，名称为＆＃34; submit＆＃34;。

这会产生以下错误：＆＃34;未捕获的TypeError：对象不是函数＆＃34;。

显然，这是因为有一个名为＆＃34;提交＆＃34;的提交按钮。

问题是我不认为我们可以编辑Java方面而不期望（明天我会发现更多）。这是由于一个陈旧而过于复杂，可怕的系统，当你打喷嚏时会破裂。

所以我需要在前端有一个解决方法，允许我提交一个名称为＆＃34;提交＆＃34;的表单输入。和＃34;提交＆＃34;并且仍然可以使用JS验证。

示例代码：

<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>

有了这个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

删除按钮的onclick="return false;"和$('form.disclosure-agreements').submit();

的来电

单击按钮并且点击处理程序返回false就足够了（点击将被取消，表单将不会提交）

当click - 处理程序返回true时，表单将被提交（这是单击提交按钮时的默认操作，无需调用submit()）

Answer 2

对象不是表单，尝试这样的事情：

$('form').submit();

**或更好的情况**

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

this =您点击的按钮

如果未选中复选框，则仅返回false，不返回true。使用return; 要取消活动，您需要执行以下操作：

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

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

但更好的想法是使用$('form').on('submit', function(e) {} );形式的'submit'事件并删除onclick事件处理程序。

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

2 个答案: