无法弄清楚为什么提交按钮不起作用

Cannot figure out why submit button is not working

本文关键字：按钮 不起作用 提交 为什么 弄清楚      更新时间：2023-09-26

提交按钮似乎没有运行我能说的代码，但我不确定这是否是代码的问题。花了很长时间试图弄清楚，但仍然不知道。表单和一切似乎都是正确的，但是当我单击提交时，唯一发生的事情是表单条目消失，按钮似乎只是重置表单。在 html 测试人员中，它说找不到该文件，因此我不知道应该怎么做才能调试这个特定问题。

<html>
    <title>Assignment 5</title>
    <body>
    <form>
        <h2>Step 1: Enter your name, address, etc.</h2>
        <formid="Computerparts">
         First name: <input type="text" name="fname"><br>
         Last name: <input type="text" name="lname"><br>
         City: <input type="text" name="city"> State: <input type ="text" name="state"> Zip: <input type="text" name="zipcode"><br>
         Phone: <input type="text" name="phonenumber"><br>
         Email: <input type="text" name="email"><br>
<h2>Step 2: Select the computer components you want</h2>
    CPU: <input type="radio" name="cpu"> Intel 2.0 GHz <input type="radio" name="cpu"> Intel 2.2 GHz <input type="radio" name="cpu"> Intel 3.0 GHz<br>
        RAM: <input type="radio" name="ram">SIMM 1 GB <input type="radio" name="ram">SIMM 2 GB <input type="radio" name="ram" value="75">SIMM 4 GB<br>
        HDD: <input type="radio" name="hdd"> IDE 60 GB<input type="radio" name="hdd"> IDE 120 GB<input type="radio" name="hdd"> IDE 250 GB<br>
    <h2>Step 3: Select the optional Software you want</h2>
    <form>
        <input type="checkbox" name="software" value="25">Adobe Creative Suite 4<br>
<input type="checkbox" name="software">Microsoft Office 2007<br>
<input type="checkbox" name="software">Symantec Antivirus 2010<br>
<input type="submit" value = "submit" onclick="doSubmit()" /><button type="reset" value="Reset">Clear Entries</button>
</form>
    <script>
    function doSubmit(){
    formTest = document.getElementById("Computerparts");

    if(formTest.fname.value == ""){
        alert("Name can not be empty");
        formTest.name.focus();
        return;
    }

    if(formTest.city.value  == ""){
        alert("City can not be empty");
        formTest.city.focus();
        return;
    }
    if(formTest.state.value.length != 2){
        alert("state must be 2 letters");
        formTest.state.focus();
        return;
    }
    if(formTest.zip.value.length != 5){
        alert("zip must be 5 digits");
        formTest.zip.focus();
        return;
    }
    if(formTest.phone.value  == ""){
        alert("Phone can not be empty");
        formTest.phone.focus();
        return;
    }
    if(formTest.email.value == ""){
        alert("Email can not be empty");
        formTest.email.focus();
        return;
    }
    if(formTest.lname.value == ""){
        alert("Last name can not be empty");
        formTest.lnamel.focus();
        return;
    }

    var checkcpu = false;
    for(var i=0; i<formTest.cpu.length; i++){
        if(formTest.cpu[i].checked)
            checkcpu = true;
    }
    if(checkcpu == false){
        alert("Must Choose CPU");
        return;
    }
        var pricecpu = 0;
    if(formTest.cpu[0].checked)
        price = 100;
    else if(formTest.cpu[1].checked)
        price = 120;
    else if(formTest.cpu[2].checked)
        price = 150;
var checkram = false;
    for(var i=0; i<formTest.ram.length; i++){
        if(formTest.ram[i].checked)
            checkram = true;
    }
    if(checkram == false){
        alert("Must Choose RAM!");
        return;
    }
        var priceram = 0;
    if(formTest.ram[0].checked)
        price = 25;
    else if(formTest.ram[1].checked)
        price = 50;
    else if(formTest.ram[2].checked)
        price = 75;

var checkhdd = false;
    for(var i=0; i<formTest.hdd.length; i++){
        if(formTest.hdd[i].checked)
            checkhdd = true;
    }
    if(checkhdd == false){
        alert("Must Choose HDD!");
        return;
    }

    var pricehdd = 0;
    if(formTest.hdd[0].checked)
        price = 60;
    else if(formTest.hdd[1].checked)
        price = 100;
    else if(formTest.hdd[2].checked)
        price = 200;

    for(var i=0; i<formTest.software.length; i++){
        if(formTest.software[i].checked)
            price += 25;
    }
    var price = pricehdd + priceram + pricecpu
    alert("Order Submitted , Total: " + price);
}
</script>
</body>
</html>

验证表单的方法是使用表单的提交事件，如果错误则返回 false，如果 ok 则返回 true = 你的操作在哪里？如果没有操作，页面将提交给自己： 

<form id="computerparts" onsubmit="return doSubmit(this)" action="???">

从提交按钮中删除无效的标记 formid 和onclick="doSubmit()"并使用 

function doSubmit(formTest) {
   // formTest = document.getElementById("Computerparts"); remove this
  if(formTest.fname.value == ""){
    alert("Name can not be empty");
    formTest.name.focus();
    return false; // return false when error
  }
  .
  .
  .
  return true; // allow submit
}
相关文章：