Question

提交按钮似乎没有运行我能说的代码，但我不确定代码是否有问题。花了很长时间试图搞清楚，但仍然不知道。表单和所有内容似乎都是正确的，但是当我单击提交时，发生的唯一事情是表单条目消失，按钮似乎只是重置表单。在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>

Answer 1

验证表单的方法是使用表单的submit事件，如果出现错误则返回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
}

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

1 个答案: