我正在尝试创建一个网页,用户在首页上询问了他们的姓名(文本框)和性别(单选按钮)。然后链接到新页面将取决于他们是选择是男性还是女性,还需要显示在文本框中输入的姓名。
到目前为止,我的名称部分正在使用javascript,这是在首页上,表单操作指向新页面:
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into localStorage
localStorage.setItem("mytext", mytext);
return true;
}
,这是在另一页:
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.getElementById("name").innerHTML = mytext;
}
这里的主要问题是它始终指向同一页面。任何人都可以告诉我如何解决这个问题,并添加选项让用户选择他们的性别,下一页将取决于这个选择?
编辑:这是我的表格
<form class="enter-name" name="myform" onsubmit="tosubmit();" action="page1.html">
<input id="mytext" type="text" name="data" placeholder="Enter name" maxlength="12">
Male: <input type="radio" name="gender" value="male" /><br />
Female: <input type="radio" name="gender" value="female" /><br />
<input id="name-submit" type="submit" value="">
</form>
答案 0 :(得分:0)
您可以使用php解决此问题 - 将表单发布到将根据发布的值重定向的处理程序。在这种情况下,处理程序位于同一页面中:
<?php
if(isset($_POST['name'], $_POST['gender'])){
$page = ($_POST['gender']=='male')? 'male-page.php' : 'female-page.php';
header('Location:'.$page.'?name='.$_POST['name']);
die();
}
?>
<html>
<head><!-- head stuff here--></head>
<body>
<form class="enter-name" name="myform" action="" method="post">
<input id="mytext" type="text" name="name" placeholder="Enter name" maxlength="12">
Male: <input type="radio" name="gender" value="male" /><br />
Female: <input type="radio" name="gender" value="female" /><br />
<input id="name-submit" type="submit" value="">
</form>
</body>
</html>
在重定向到页面中,您可以通过php中的查询字符串参数访问名称:
<div id="name">
<?php echo $_GET['name'];?>
</div>