Кнопка отправки в HTML для вывода результата на той же странице - PullRequest
2 голосов
/ 09 марта 2011

Хотя это кажется чем-то очень простым, но что бы я ни пытался, я не мог обойти это.По сути, мне нужна HTML-форма, в которой пользователь вводит свой идентификационный номер в текстовое поле ввода, и когда он нажимает кнопку отправки, он отображает адрес электронной почты, который представляет собой идентификационный номер компании @ 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?

Спасибо

Ответы [ 2 ]

6 голосов
/ 09 марта 2011

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.

Эта версия будет обновляться при активации ключа - если вы хотите использовать кнопку, обратитесь к кнопке и используйте событие 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, сеанс или GET, проще просто использовать GET с самого начала:)

0 голосов
/ 04 декабря 2014

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>

Использование JavaScript добавление этого кода в ваш html / php скрипт

<script>
function getIndex() {
document.getElementById("output").innerHTML =
document.getElementById("email").selectedIndex;
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...