Получить значение поля ввода вне формы

Question

Получить значение поля ввода вне формы

Я пытаюсь найти способ получить значение поля ввода, которое не в форме, и поместить его в URL-адрес формы под ним. Вот о чем я говорю:

        <div id="wrapper">
<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>
<div id="menu">
<p class="welcome">Welcome, <b><?php echo htmlentities($user); ?></b></p>
<p class="logout"><a id="exit" href="#">Logout</a </p>
<div style="clear:both"></div>
</div>

<div id="chatbox"></div>
<form name="message" action="../new_private.php?n=<?php echo $_POST['to']; ?>" method="post">
<input name="usermsg" type="text" id="usermsg" size="63">
<input name="submitmsg" type="submit" id="submitmsg" value="Send">
<input name="from" type="hidden" value="<?php echo $user; ?>">
</form>
</div>

Когда я пробую это таким образом, я получаю неопределенную ошибку, говорящую $_POST['to'] is not a valid index.

Я хотел бы получить значение поля ввода «до» и поместить в URL для формы под ним. Как мне этого добиться?

Заранее спасибо!

Alex

1

forms input php post

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

В HTML5 вы можете включить <input> элементы за пределами <form> используя form атрибут со значением формы id,

Например…

<h1>[ <input type="text" name="n" id="to" placeholder="To" form="message"> ]</h1>

<!-- snip -->

<form id="message" action="../new_private.php" method="post">

Единственная разница здесь будет в том, что n поле будет в $_POST вместо $_GET,

Если вам действительно нужно значение в URL, вам понадобится немного JavaScript. Что-то вроде этого

<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>

<!-- snip -->

<form name="message" action="../new_private.php" method="post">
<!-- form contents, etc -->
</form>
<script>
(function() { // IIFE so as not to pollute the global scope
const form = document.forms.message
const action = form.action // original action
document.getElementById('to').addEventListener('input', function() {
form.action = action + '?n=' + encodeURIComponent(this.value)
}, false)
})()
</script>

0