Использование форм для сбора данных для функций 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 , B и C, это приводит меня ко второй странице, но я не получаю результата. Я попытался проверить элемент, и консоль не указала никаких ошибок, поэтому я думаю, что мои данные передаются правильно. Есть идеи?

источник

2016-10-10 nwd12a

Что ожидаемый результат O 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() для извлечения значений из <input> элементов в пределах <form>; используйте JSON.stringify(), encodeURIComponent() для передачи значений от form до JS_B.html в качестве строки запроса.

В windowload событие в JS_B.html, использовать decodeURIComponent(), JSON.parse() для извлечения объекта в location.search; destructuring для установки переменных в пределах 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?

ответ

Смежные вопросы