使用表单来收集Javascript函数的数据？ [英] Using forms to Collect data for Javascript functions?
问题描述
我试图通过表单在一个页面上收集数据，然后将这些数据传输到下一页以用于JS函数。
（具体来说，我希望用户输入二次方程A，B和C的值，然后发送到脚本获取这些值并运行公式+输出答案的页面。
这里是我第一页的代码--->
<身体GT;
< h1>欢迎使用数学方程求解器< / h1>
< p>你想解决哪个方程？ （只需输入您想要解决的方程的数据）。 < / p为H.
< form name =quadmethod =getaction =JS_B.html>
< input
< input type =textname =a_valsize =5>
< br>
< input type =textname =b_valsize =5>
< br>
< input type =textname =c_valsize =5>
< br>
< input type =submitmethod =getaction =JS_B.htmlvalue =Submit>
< input type =hiddenname =a_val>
< input type =hiddenname =b_val>
< input type =hiddenname =c_val>
< / form>
以下是我第二页的代码--->
< title> JS_Math脚本< / title>
< body>
< script type =Javascript>
函数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）
}
}
}
//结束 - >
< / script>
< input type =hiddenname =a_val>
< input type =hiddenname =b_val>
< input type =hiddenname =c_val>
< input type =hiddenname =answerOne>
< input type =hiddenname =answerTwo>
< input type =hiddenname =Answer>
< / body>
< / html>
因此，无论如何，当我输入A，B和C的值时，它会将我带到第二页，但我没有得到结果。我试过检查元素，控制台没有显示任何错误，所以我认为我的数据传输正确。有任何想法吗？
FormData（）从<$在< form> 中的c $ c>< input> 元素。使用 JSON.stringify（）， encodeURIComponent（）来传递来自 form $ JS_B.html 作为查询字符串。 $ b
在窗口 code> load 事件在 JS_B.html ，使用 decodeURIComponent（） code>， JSON.parse（）检索 location.search ;解构赋值，使用传递的对象在 answer 函数中设置变量
包含 index.html JS_B.html plnkr http://plnkr.co/edit/aaY5rcJ6v0g7bdEEr7h0?p=preview 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 ---> Here is the code for my second page ---> 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? You can use At Include index.html JS_B.html plnkr http://plnkr.co/edit/aaY5rcJ6v0g7bdEEr7h0?p=preview 这篇关于使用表单来收集Javascript函数的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！; code>以下变量赋值，删除; 如果条件
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
< h1>欢迎使用数学方程求解器< / h1>
< p>你想解决哪个方程？ （只需输入您想要解决的方程的数据）。 < / p为H.
< form name =quad>
< input type =textname =a_valsize =5>
< br>
< input type =textname =b_valsize =5>
< br>
< input type =textname =c_valsize =5>
< br>
< input type =submitvalue =Submit>
<！ -
< input type =hiddenname =a_val>
< input type =hiddenname =b_val>
< input type =hiddenname =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？ +查询;
}
< / script>
< / body>
< / html>
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
< script>
函数答案（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 ='没有第二个答案'
} else {
answerOne = answer1;
document.writeln（answerOne）;
answerTwo = answer2;
document.writeln（answerTwo）
}
}
} //结束 - >
window.onload = function（）{
var obj = JSON.parse（decodeURIComponent（location.search.slice（1）））;
console.log（obj）;
answer（obj）;
}
< / script>
< input type =hiddenname =a_val>
< input type =hiddenname =b_val>
< input type =hiddenname =c_val>
< input type =hiddenname =answerOne>
< input type =hiddenname =answerTwo>
< input type =hiddenname =Answer>
< / body>
< / html>
<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>
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.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.; following variable assignments, remove ; following if condition<!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>
<!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>
