form.submit() 不工作

Question

我需要做一些事情来使用 ruby​​ cgi 来输出一些东西。 因此必须先提交表单，然后再提交 js 以更改元素值。 在我的情况下，使用 form.submit() 不起作用。

使用下面的简单示例在提交表单后输出点击我的值。 当form.submit()函数运行时，点击我的js将不起作用。

表单的onsubmit方法不能使用，因为它在提交表单之前先调用javascript函数（必须先提交表单然后调用JS函数进行操作）

解决这个问题的任何想法： 注意：必须先提交

$(document).on('click','#afterbutton',function() {
    var form = document.getElementById("myForm");
    //form.submit();
    document.getElementById("test").innerHTML = "afterbutton";
    
    });
    
     $(document).on('click','#beforebutton',function() {
    var form = document.getElementById("myForm");
    //form.submit();
    document.getElementById("test").innerHTML = "beforebutton";
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
     <input type="submit" value="formSubmitbutton" id="submit"><br>
     <button id="beforebutton">beforebutton</button><br>
     </form>
     <button id="afterbutton">afterbutton</button><br>
     <p id="test">click me</p>

Answer 1

好的，简单的问题，当您输入 id submit 时，您会犯一个简单的错误，如果您查看控制台中的 form.submit 方法，则会覆盖 form.submit 方法strong>devtool 你会看到一些东西告诉你

form.submit is not a function 

所以要解决这个问题，请将您的第一个 input 而不是 submit 的 id 更改为 submit123

之类的其他内容

<input type="submit" value="formSubmitbutton" id="submit123"><br>

看看下面的代码，告诉我你的想法

$(document).on('click','#afterbutton',function(event) {
    event.preventDefault();
    var form = document.getElementById("myForm");
    form.submit();
    document.getElementById("test").innerHTML = "afterbutton";
    
    });
    
     $(document).on('click','#beforebutton',function(event) {
     event.preventDefault();
    var form = document.getElementById("myForm");
    form.submit();
    document.getElementById("test").innerHTML = "beforebutton";
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
     <input type="submit" value="formSubmitbutton" id="submit123"><br>
     <button id="beforebutton">beforebutton</button><br>
     </form>
     <button id="afterbutton">afterbutton</button><br>
     <p id="test">click me</p>