简单的提交表单以转到页面
Posted
技术标签:
【中文标题】简单的提交表单以转到页面【英文标题】：Simple submit form to go to a page 【发布时间】：2021-11-23 10:25:19 【问题描述】：我有一些编号的页面：
1.php
2.php
3.php
etc.
我想创建一个用户输入任意数字的文本框：例如2，然后按回车键或Go 按钮，他们将根据输入的数字转到页面2.php。
我知道如何链接到特定页面，如form action="...."，但我不确定如何回显用户输入并将其转换为链接（无论是使用 html 还是 php）。
例如：
<form method="POST">
<input type="number" value="" />
<input type="submit" value="Go" />
</form>
【问题讨论】：
使用重定向到$_POST['number' ] . ".php"
或者当用户在输入中输入内容时，使用客户端 javascript 更改action。
【参考方案1】：
您需要在表单中添加一个操作属性，在您的数字输入中添加一个名称属性。您的操作属性中的文件将“捕获” POST 变量并执行重定向用户所需的逻辑。将您的表单标签更改为：
<form method="POST" action="redirect.php">
<input type="number" value="" name="redirect" />
<input type="submit" value="Go" />
</form>
然后创建redirect.php 文件以获取 POST 变量并进行重定向：
<?php
$redirectPage = (int) $_POST['redirect'];
$redirectUrl = "http://www.example.com/$redirectPage.php";
header("Location: $redirectUrl");
printf('<a href="%s">moved</a>.', $redirectUrl);
请注意，其中不包含输入验证或错误处理。
【讨论】：
【参考方案2】：我认为，在您的情况下，最好的选择是使用客户端 javascript 根据输入框中输入的数字动态更改表单的 action 属性。
完成此类任务的快速而肮脏的解决方案可能如下所示
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submitAction(formElement)
var // get the input box element
el = document.getElementById('form-action-number'),
// get a number specified by user in the input box
num = parseInt(el.value),
// validate that it's really a number and is greater than zero
// (you don't want someone to request -666.php right? :)
// build a page url using the correct number
page = !isNaN(num) && num > 0 ? num.toFixed(0).toString() + '.php' : undefined;
if (page) // the page url is valid
// set form's action attribute to an url specified by page variable
formElement.setAttribute('action', page);
// returning true will allow the form to be submitted
return true;
// you might think of a better way to notify user that the input number is invalid :)
console.error('INVALID NUMBER SPECIFIED!');
// returning false will prevent form submission
return false;
</script>
</head>
<body>
<!-- When user clicks Go, the return value of submitAction function will be used to decide if the form should be submitted or not -->
<form method="POST" onsubmit="return submitAction(this)">
<input id="form-action-number" type="number" value="" />
<input type="submit" value="Go" />
</form>
</body>
</html>
【讨论】：
【参考方案3】：使用 PHP，您可以执行以下操作：
<?php
// Check if the POST value has been set
if(isset($_POST['my_number']))
// Redirect to the corresponding page
header('Location: ' . $_POST['my_number'] . '.php');
?>
<form method="POST">
<input name="my_number" type="number" value="" />
<input type="submit" value="Go" />
</form>
【讨论】：
此代码示例容易发生位置标头注入，不能很好地作为示例（没有帮助）。【参考方案4】：这类似于 DaMeGeX 的答案，但使用 javascript 转到新页面。
<?php
// Check if the POST value has been set
if(isset($_POST['my_number']))
// Redirect to the corresponding page
echo "<script> window.location.href = '".$_POST['number'].".php' </script>";
?>
<form method="POST">
<input name="my_number" type="number" value="" />
<input type="submit" value="Go" />
</form>
【讨论】：
在 PHP 已经被使用的情况下，不需要使用 JavaScript 来执行此操作，并且具有重定向的能力。 我同意 PHP 的 header 函数更直接，但是当我发表这篇文章时，有一条评论说 header 函数对他不起作用，所以我把它作为一个简单的替代方案。但是是的，我同意内置的 PHP 函数也是我的第一个选择。 如果 Location 响应标头不起作用，跳转到脚本标签的理由是什么？接受的答案表明标头函数正在工作。即使不是，为什么修复应该是一个脚本标签？特别是当我作为另一个用户给你这个评论时：“Javascript window.location.href 不适合我”。如果发送位置响应标头不起作用（或浏览器没有自动重定向），请在响应中提供人类可读的信息，重定向地址是什么（例如链接）。与 HTTP 标准比较。以上是关于简单的提交表单以转到页面的主要内容，如果未能解决你的问题，请参考以下文章