2016-04-21 93 views
1

提交按鈕似乎沒有運行從我可以告訴的代碼,但我不知道如果這是代碼的問題。花了很長時間試圖弄清楚,但仍然不知道。形式和一切似乎都是正確的,但是當我點擊提交時,唯一發生的事情是表單條目消失,並且按鈕似乎只是重置表單。在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> 

回答

0

驗證表單的方法是使用表單的提交事件並返回false如果錯誤,則返回false如果ok =還有您的操作在哪裏?如果不採取行動的頁面將被提交到自身:

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