Using forms to Collect data for Javascript functions?

问题

I'm trying to collect data via forms on one page, then transfer that data to the next page for use in a JS function. (Specifically, I want the user to input values for A, B, and C of the Quadratic equation, and then send to a page where a script takes those values and runs the equation + outputs an answer).

Here the code for my first page --->

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

Here is the code for my second page --->

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

So anyways, when I input values for A, B, and C it takes me to the second page, but I'm not getting a result. I've tried inspect element and the console isn't indicating any errors, so I think my data is transferring correctly. Any ideas?

回答1:

You can use FormData() to retrieve values from <input> elements within <form>; use JSON.stringify(), encodeURIComponent() to pass values from form to JS_B.html as query string.

At window load event at JS_B.html, use decodeURIComponent(), JSON.parse() to retrieve object at location.search; destructuring assignment to set variables within answer function using passed object.

Include ; following variable assignments, remove ; following if condition

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

来源：https://stackoverflow.com/questions/39950061/using-forms-to-collect-data-for-javascript-functions

标签

javascript

html

forms

equations