开发者

submit button on html to output result on same page

开发者 https://www.devze.com 2023-02-15 11:43 出处:网络
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

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>
0

精彩评论

暂无评论...
验证码 换一张
取 消