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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:19:18  来源:igfitidea点击:

submit button on html to output result on same page

phpjavascripthtmlformswebforms

提问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
}

jsFiddle.

js小提琴

Be sure to attach to window.onloador 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>