Javascript html上的提交按钮以在同一页面上输出结果
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5239886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
submit button on html to output result on same page
提问by amateur
Although this seems like something very basic, but no matter what I tried I couldn't get my head around it. Basically I want a html form where a user types in their ID number in an input text box and when they hit the submit button it displays their email address which is their company ID number @ company.com, such as below
虽然这似乎是非常基本的事情,但无论我尝试什么,我都无法理解它。基本上我想要一个 html 表单,其中用户在输入文本框中输入他们的 ID 号,当他们点击提交按钮时,它会显示他们的电子邮件地址,即他们的公司 ID 号@ company.com,如下所示
<form action=""> ID Number: <input
type="text" name="idnumber" /><br/>
<input type="submit" value="Whats my
email address" /> </form> <p>Your
email address is
'idnumber'@email.com</p>
Can this even be done using html or would I need to use Javascript or PHP for it?
这甚至可以使用 html 来完成还是我需要使用 Javascript 或 PHP 来完成?
Thanks
谢谢
回答by alex
JavaScript
JavaScript
HTML
HTML
ID Number: <input
type="text" name="idnumber" id="idnumber" /><br/>
<p>Your
email address is
<span id="emailid"></span>@email.com</p>
JavaScript
JavaScript
var input = document.getElementById('idnumber'),
placeholder = document.getElementById('emailid');
input.onkeyup = function() {
placeholder.innerHTML = input.value
}
Be sure to attach to window.onload
or a DOM ready event.
确保附加到window.onload
或 DOM 就绪事件。
This version will update on key up - if you want to use the button, reference the button and use the event onclick
.
此版本将在 key up 时更新 - 如果您想使用按钮,请引用按钮并使用 event onclick
。
PHP
PHP
HTML/PHP
HTML/PHP
<form action="?" method="get"> ID Number: <input
type="text" name="idnumber" /><br/>
<input type="submit" value="Whats my
email address" /> </form> <p>Your
email address is
<?php echo isset($_GET['idnumber']) ? htmlspecialchars($_GET['idnumber']) : ''; ?>@email.com</p>
You could use POST here as well, but GET will be clearer as a beginner (and refreshing won't invoke the browser's Submit form againdialogue).
您也可以在此处使用 POST,但 GET 作为初学者会更清晰(刷新不会再次调用浏览器的提交表单对话框)。
If using POST, you should really follow Post/Redirect/Get(that Wikipedia URL is terrible). Except in this case you need a value to persist, which you could use cookie, session or GET param, easier just to use GET from the get go :)
如果使用 POST,您应该真正遵循Post/Redirect/Get(那个 Wikipedia URL 很糟糕)。除了在这种情况下,您需要一个值来持久化,您可以使用 cookie、session 或 GET 参数,更容易从 get go 使用 GET :)
回答by Dulan
php or javascript will help you.
php 或 javascript 会帮助你。
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email" id="email"><br>
<input type="submit">
</form>
<div>
Welcome <?php echo $_GET["name"]; ?><br>
Your email address is: <?php echo $_GET["email"]; ?>
</div>
<p id="output"></p>
</body>
</html>
Using JavaScriptadding this code inside of your html/php script
使用 JavaScript将此代码添加到您的 html/php 脚本中
<script>
function getIndex() {
document.getElementById("output").innerHTML =
document.getElementById("email").selectedIndex;
}
</script>