使用表單來收集Javascript函數的數據？

我想通過表單在一個頁面上收集數據，然後將該數據傳輸到下一頁以用於JS函數。（具體來說，我希望用戶輸入二次方程的A，B和C的值，然後發送到腳本採用這些值的頁面並運行公式+輸出答案）。使用表單來收集Javascript函數的數據？

這裏是我的第一頁--->

<body> 

    <h1> Welcome to the Math Equation Solver </h1> 

    <p> Which equation would you like to solve? (Simply input the data for the equation you wish to solve). </p> 

    <form name="quad" method="get" action="JS_B.html"> 

<input 
<input type="text" name="a_val" size="5"> 
<br> 
<input type="text" name="b_val" size="5"> 
<br> 
<input type="text" name="c_val" size="5"> 
<br> 

<input type="submit" method="get" action="JS_B.html" value="Submit"> 

<input type="hidden" name="a_val"> 
<input type="hidden" name="b_val"> 
<input type="hidden" name="c_val"> 
</form>

下面的代碼是我的第二頁--->

<title>JS_Math Scripts</title> 


<body> 

<script type="Javascript"> 
function answer() 
{ 
var a = a_val 
document.writeln(a_val) 
var b = b_val 
var c = c_val 
var root = Math.pow(b, 2) - 4 * a * c 
var answer1 = (-b + Math.sqrt(root))/2*a 
var answer2 = (-b - Math.sqrt(root))/2*a 
    if(root<'0'); 
    { 
    alert('This equation has no real solution.') 
    }else{ 
       if(root=='0') 
       {   
       answerOne = answer1 
      document.writeln(answerOne) 
       answerTwo = 'No Second Answer' 
       }else{ 
        answerOne = answer1 
      document.writeln(answerOne) 
        answerTwo = answer2 
      document.writeln(answerTwo) 
        } 
      } 
} 
// End --> 
</script> 

<input type="hidden" name="a_val"> 
<input type="hidden" name="b_val"> 
<input type="hidden" name="c_val"> 
<input type="hidden" name="answerOne"> 
<input type="hidden" name="answerTwo"> 
<input type="hidden" name="Answer"> 


</body> 
</html>

的代碼，所以不管怎麼說，當A I輸入值，B和C會把我帶到第二頁，但我沒有得到結果。我試過檢查元素，控制檯沒有顯示任何錯誤，所以我認爲我的數據傳輸正確。有任何想法嗎？

來源

2016-10-10 nwd12a

什麼是預期結果Ø f'var answer1 =（-b + Math.sqrt（root））/ 2 * a;'， 'var answer2 =（-b - Math.sqrt（root））/ 2 * a'？ – guest271314

可能的重複[如何在JavaScript中獲取查詢字符串值？]（http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript） – colonelclick

您可以使用FormData()檢索<form>中<input>元素的值;使用JSON.stringify(),encodeURIComponent()將值從form傳遞到JS_B.html作爲查詢字符串。

在在JS_B.htmlwindowload事件，使用decodeURIComponent()，JSON.parse()在location.search檢索對象;使用傳遞的對象解構賦值以在answer函數內設置變量。

包括;以下變量賦值，刪除;以下if條件

的index.html

<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body> 
    <h1> Welcome to the Math Equation Solver </h1> 

    <p> Which equation would you like to solve? (Simply input the data for the equation you wish to solve). </p> 

    <form name="quad"> 

    <input type="text" name="a_val" size="5"> 
    <br> 
    <input type="text" name="b_val" size="5"> 
    <br> 
    <input type="text" name="c_val" size="5"> 
    <br> 

    <input type="submit" value="Submit"> 
<!-- 
    <input type="hidden" name="a_val"> 
    <input type="hidden" name="b_val"> 
    <input type="hidden" name="c_val"> 
    --> 
    </form> 
    <script> 
    var form = document.querySelector("form"); 
    form.onsubmit = function(e) { 
     e.preventDefault(); 
     var data = new FormData(this); 
     var obj = {}; 
     for (prop of data.entries()) { 
     obj[prop[0]] = prop[1] 
     }; 
     var query = encodeURIComponent(JSON.stringify(obj)); 
     location.href = "JS_B.html?" + query; 
    } 
    </script> 
</body> 

</html>

JS_B.html

<!DOCTYPE html> 
<html> 

<head> 

</head> 

<body> 
    <script> 

    function answer(obj) { 

     var { 
     a_val: a, 
     b_val: b, 
     c_val: c 
     } = obj; 
     document.writeln(a); 
     var root = Math.pow(b, 2) - 4 * a * c; 
     var answer1 = (-b + Math.sqrt(root))/2 * a; 
     var answer2 = (-b - Math.sqrt(root))/2 * a; 
     if (root < 0) { 
     alert('This equation has no real solution.') 
     } else { 
     if (root == 0) { 
      answerOne = answer1; 
      document.writeln(answerOne); 
      answerTwo = 'No Second Answer' 
     } else { 
      answerOne = answer1; 
      document.writeln(answerOne); 
      answerTwo = answer2; 
      document.writeln(answerTwo) 
     } 
     } 
    } // End --> 

    window.onload = function() { 
     var obj = JSON.parse(decodeURIComponent(location.search.slice(1))); 
     console.log(obj); 
     answer(obj); 
    } 
    </script> 

    <input type="hidden" name="a_val"> 
    <input type="hidden" name="b_val"> 
    <input type="hidden" name="c_val"> 
    <input type="hidden" name="answerOne"> 
    <input type="hidden" name="answerTwo"> 
    <input type="hidden" name="Answer"> 

</body> 

</html>

plnkr http://plnkr.co/edit/aaY5rcJ6v0g7bdEEr7h0?p=preview

來源

2016-10-10 01:57:42 guest271314

使用表單來收集Javascript函數的數據？

回答

相關問題