表单提交后未执行Javascript函数答案

【问题标题】：Javascript function not being executed after form submit表单提交后未执行Javascript函数
【发布时间】：2017-08-25 13:36:22
【问题描述】：

我有一个表单，想在按下提交按钮后执行这个功能：

function bereken() {


    if(document.getElementById('v1_1').checked)  {
        c = c - 0
    }else if(document.getElementById('v1_2').checked)  {
        c += 1;
    }else if(document.getElementById('v1_3').checked)  {
        c += 2;
    }else if(document.getElementById('v1_4').checked)  {
        c += 3;
    }else if(document.getElementById('v1_5').checked){
        c += 4;
    }

        var naam = document.getElementById('naamTxt').value;
    var percentages = "C: " + c/40*100 + "%. S: " + s/40*100 + "%. G: "+ g/40*100 + "%. E:" + e/20*100 + "%. I= " + i/20*100 + "%";
    var antwoorden = "1. Ik ben spontaan =" +   $('input[name=v1]:checked', '#myForm').val() + " 2. Mijn gedachten zijn ordelijk = " + $('input[name=v1]:checked', '#myForm').val();
    var li = document.getElementById("klasDown");
    var klas = li.options[li.selectedIndex].value;


    alert(klas + ", "+ naam + " = C: " + c/40*100 + "%. S: " + s/40*100 + "%. G: "+ g/40*100 + "%. E:" + e/20*100 + "%. I= " + i/20*100 + "% " + "1. Ik ben spontaan =" +   $('input[name=v1]:checked', '#myForm').val() + " 2. Mijn gedachten zijn ordelijk = " + $('input[name=v1]:checked', '#myForm').val());
     }

我尝试了不同的方法，探索了这个网站上的类似问题，但没有成功。有人能指出为什么它没有被解雇吗？

<form id="myForm" method="post" onsubmit="return bereken()" >
Volledige naam: <input name="naamTxt" type="text" maxlength="512" id="naamTxt" class="searchField"/> <br>
Klas: <select name="klasDown">
  <option value="H4A" selected="selected">H4A</option>
  <option value="H4B" >H4B</option>
  <option value="H4C">H4C</option>
  <option value="H4C">H4D</option>
  <option value="H4C">V4A</option>
  <option value="H4C">V4B</option>
  <option value="H4C">V4C</option>
  <option value="H4C">V4D</option>
</select> 
</div>



<br> <input type="submit" name="submit" value="submit" onclick="bereken()">
</form>

我尝试过 onsubmit、onclick 等。

【问题讨论】：

您当前的代码确实执行了该功能。但是，您的代码中有语法错误。

标签： javascript forms function submit

【解决方案1】：

发生这种情况是因为您没有通过相应地使用 event.preventDefault() 或 return 与 false 或 true 来阻止浏览器的默认行为。

function [...](e) {
    e.preventDefault();
    [...]
}

改变，

<input type="submit" name="submit" value="submit" onclick="bereken()">

到，

<input type="submit" name="submit" value="submit" onclick="bereken(event)">

为内联事件侦听器传递事件参数。

【讨论】：

@JeremyThille 现在怎么样？
呃，我期待function bereken(event) { event.preventDefault()
你为它而战 :)
它现在确实在触发，但是，我得到了这个错误：Uncaught TypeError: Cannot read property 'options' of null, with this line: var klas = li.options[li.selectedIndex].value ;
@user3660293 发生这种情况是因为您的代码有错误。

【解决方案2】：

如果你使用 jQuery，我认为这应该可以工作。

$("#myForm").submit(function(e){
        e.preventDefault();
        // your code here
});

【讨论】：

看起来原始代码不是使用 jQuery。
我认为如果你使用 jQuery，这应该可以工作。 - 实际上，如果你使用 vanilla (plain Jane) JavaScript，它也可以工作。