Verwenden von Formularen zum Sammeln von Daten für Javascript-Funktionen?

Ich versuche Daten über Formulare auf einer Seite zu sammeln und dann diese Daten zur Verwendung in einer JS-Funktion auf die nächste Seite zu übertragen. (Insbesondere möchte ich, dass der Benutzer Werte für A, B und C der quadratischen Gleichung eingibt und dann an eine Seite sendet, auf der ein Skript diese Werte annimmt und die Gleichung ausführt + eine Antwort ausgibt).Verwenden von Formularen zum Sammeln von Daten für Javascript-Funktionen?

Hier ist der Code für meine erste Seite --->

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

Hier ist der Code für meine zweite Seite --->

<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 irgendwie, wenn ich Eingabewerte für A , B und C bringt es mich auf die zweite Seite, aber ich bekomme kein Ergebnis. Ich habe versucht, Element zu inspizieren und die Konsole zeigt keine Fehler an, also denke ich, dass meine Daten korrekt übertragen werden. Irgendwelche Ideen?

Quelle

2016-10-10 nwd12a

Was Ergebnis o erwartet wird f 'var Antwort1 = (-b + Math.sqrt (Wurzel))/2 * a;', 'var Antwort2 = (-b - Math.sqrt (Wurzel))/2 * a'? – guest271314

Mögliches Duplikat von [Wie kann ich Abfragezeichenfolgenwerte in JavaScript abrufen?] (Http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) – colonelclick

Sie können FormData() verwenden, um Werte von <input> Elemente innerhalb <form> abzurufen; Verwenden Sie JSON.stringify(), encodeURIComponent(), um Werte von form an JS_B.html als Abfragezeichenfolge zu übergeben.

Bei windowload Veranstaltung bei JS_B.html, verwenden decodeURIComponent(), JSON.parse() Objekt bei location.search abzurufen; Destrukturierungszuordnung zum Setzen von Variablen innerhalb der answer Funktion mit übergebenem Objekt.

Fügen ; folgende Variablenzuweisungen, entfernen ; folgenden if Zustand

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

Quelle

2016-10-10 01:57:42 guest271314

Verwenden von Formularen zum Sammeln von Daten für Javascript-Funktionen?

Antwort

Verwandte Themen