submit button on html to output result on same page
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 d开发者_开发技巧isplays their email address which is their company ID number @ company.com, such as below
<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?
Thanks
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.
Be sure to attach to window.onload or a DOM ready event.
This version will update on key up - if you want to use the button, reference the button and use the event 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>
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 again dialogue).
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 :)
php or javascript will help you.
<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 JavaScript adding this code inside of your html/php script
<script>
function getIndex() {
document.getElementById("output").innerHTML =
document.getElementById("email").selectedIndex;
}
</script>
加载中,请稍侯......
精彩评论