2015-11-13 95 views
-1

所以我有一個非常基本的任務完成,它是幫助我們學習一些非常基本的JavaScript。我們必須製作一個表單,當你點擊一個按鈕時,它會執行一個javascript函數。我無法弄清楚它爲什麼不能完成這個功能。有人可以排查我的代碼嗎?HTML和Javascript:表單不會提交。

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"/> 
 
\t \t <title>Order Page</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <form> 
 
\t \t \t <label>First Name:<input type="text" id="fname" size="30" /><br><br> 
 
\t \t \t <label>Last Name:<input type="text" id="lname" size="30" /><br><br> 
 
\t \t \t <label>Number of Widgets:<input type="text" id="num" size="4" /><br><br> 
 
\t \t \t <button onclick="myFunction()">Send</button> 
 
\t \t </form> 
 

 

 

 
\t <script> 
 
\t function myFunction() { 
 
\t \t var fname; 
 
\t \t var lname; 
 
\t \t var num; 
 
\t \t lname = document.getElementById("lname").value; 
 
\t \t fname = document.getElementById("fname").value; 
 
\t \t num = document.getElementById("num").value; 
 
\t \t alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + Widgets) 
 

 
\t } 
 
\t </script> 
 

 
\t </body> 
 
</html>

+0

Widgets是不加引號。 – Steve

+0

單擊按鈕時會發生什麼?你試過什麼了? – Greg

回答

1

你應該把報價各地的Widget就像這樣:

alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + "Widgets"); 

你也可以把它放到 ';'最後也是如此。

快速提示你,你可以通過開放開發的控制檯

在谷歌瀏覽器按[Ctrl + Shift + J]輕易地捕獲這個錯誤,你會看到錯誤出現。

希望這會有所幫助。

0

用此代碼重試!

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Order Page</title> 
     <script type="text/javascript"> 

    function myFunction() { 

     var fname; 
     var lname; 
     var num; 
     lname = document.getElementById("lname").value; 
     fname = document.getElementById("fname").value; 
     num = document.getElementById("num").value; 

     alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets") 

    } 
    </script> 
    </head> 
    <body> 
     <form action="" name="from"> 
      <label>First Name:<input type="text" id="fname" size="30" /><br><br> 
      <label>Last Name:<input type="text" id="lname" size="30" /><br><br> 
      <label>Number of Widgets:<input type="text" id="num" size="4" /><br><br> 
       <input type="button" onclick="myFunction()" value="Trial" /> 

     </form> 





    </body> 
</html> 
0

你試過:

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"/> 
 
\t \t <title>Order Page</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <form> 
 
\t \t \t <label>First Name:</label><input type="text" id="fname" size="30" /><br><br> 
 
\t \t \t <label>Last Name:</label><input type="text" id="lname" size="30" /><br><br> 
 
\t \t \t <label>Number of Widgets:</label><input type="text" id="num" size="4" /><br><br> 
 
\t \t \t <input type="button" onclick="myFunction()" value="Send" /> 
 
\t \t </form> 
 

 

 

 
\t <script> 
 
\t function myFunction() { 
 
\t \t var fname; 
 
\t \t var lname; 
 
\t \t var num; 
 
\t \t lname = document.getElementById("lname").value; 
 
\t \t fname = document.getElementById("fname").value; 
 
\t \t num = document.getElementById("num").value; 
 
\t \t alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " Widgets"); 
 
\t \t document.document.getElementsByTagName("form")[0].submit(); 
 
\t } 
 
\t </script> 
 

 
\t </body> 
 
</html>

0

您定義窗口小部件的變量,但它是假設是一個字符串。

function myFunction() { 
     var fname; 
     var lname; 
     var num; 
     lname = document.getElementById("lname").value; 
     fname = document.getElementById("fname").value; 
     num = document.getElementById("num").value; 
     alert("Thanks, "+fname + " " + lname + " for ordering " + num + " Widgets ") 

} 

您還沒有提及button類型,所以添加了它。

<form> 
    <label>First Name:<input type="text" id="fname" size="30" /><br><br> 
    <label>Last Name:<input type="text" id="lname" size="30" /><br><br> 
    <label>Number of Widgets:<input type="text" id="num" size="4" /><br><br> 
    <button onclick="myFunction()" type ="button">Send</button> 
</form> 

請檢查此JSFIDDLE演示。 希望這是有用的

0

var btn = document.getElementById("btn"); 
 
btn.onclick = function() { 
 
     var fname; 
 
     var lname; 
 
     var num; 
 
     lname = document.getElementById("lname").value; 
 
     fname = document.getElementById("fname").value; 
 
     num = document.getElementById("num").value; 
 

 
     alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets") 
 
};
<form onsubmit="return false;"> 
 
\t <label>First Name:<input type="text" id="fname" size="30" /> 
 
    <br/><br/> 
 
\t <label>Last Name:<input type="text" id="lname" size="30" /> 
 
    <br/><br/> 
 
\t <label>Number of Widgets:<input type="text" id="num" size="4" /> 
 
    <br/><br/> 
 
\t <button id="btn">Send</button> 
 
</form>