フォームを使用してJavascript関数のデータを収集しますか？

私は1つのページにフォームを介してデータを収集し、そのデータを次のページに転送して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>

だからとにかく私の2ページ目のコード--->

<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は2番目のページに移動しますが、結果は得られません。私はinspect要素を試してみましたが、コンソールにはエラーがないので、データが正しく転送されていると思います。何か案は？

出典

2016-10-10 nwd12a

結果0次;を削除（root））/ 2 * a; '、 ' var answer2 =（-b-Math.sqrt（root））/ 2 * a' 'var answer1 =（-b + Math.sqrt（root） – guest271314

[JavaScriptでクエリ文字列値を取得する方法は？]（http://stackoverflow.com/questions/901115/how-can-i-get-query-values-in-javascript） – colonelclick

FormData()を使用すると、値<input>から<form>の値を取得できます。 JSON.stringify()、encodeURIComponent()を使用して、クエリ文字列としてformからJS_B.htmlまでの値を渡します。

JS_B.htmlでwindowloadイベントでは、location.searchでオブジェクトを取得するdecodeURIComponent()、JSON.parse()を使用します。渡されたオブジェクトを使用して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関数のデータを収集しますか？

答えて

関連する問題