在html上提交按钮以在同一页面上输出结果

Question

虽然这看起来像是非常基本的东西,但无论我尝试什么,我都无法理解它.基本上我想要一个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>

甚至可以使用html完成,还是需要使用Javascript或PHP？

谢谢

Answer 1

JavaScript的

HTML

ID Number: <input
type="text" name="idnumber" id="idnumber" /><br/>
<p>Your
email address is
<span id="emailid"></span>@email.com</p>

JavaScript的

var input = document.getElementById('idnumber'),
    placeholder = document.getElementById('emailid');

input.onkeyup = function() {
   placeholder.innerHTML = input.value
}

jsFiddle.

请务必附加window.onload或DOM ready事件.

此版本将在按键时更新 - 如果您想使用该按钮,请参考按钮并使用该事件onclick.

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>

你也可以在这里使用POST,但是作为初学者,GET会更清晰(并且刷新不会再次调用浏览器的提交表单对话框).

如果使用POST,你应该真的遵循Post/Redirect/Get(维基百科URL很糟糕).除非在这种情况下你需要一个值来持久化,你可以使用cookie,session或GET参数,更容易从get get :)使用GET :)