Get the value of an input box outside a form - php

Question

I am trying to figure out a way to get the value of an input box that is not in a form and put it in the URL of a form under it. Here is what I am talking about:
<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>
When I try it this way, I get an undefined error saying $_POST['to'] is not a valid index.
I would like to get the value of the input box "to" and put into the URL for the form under it. How can I achieve this?
Thanks in advance!
Alex

Answer 1

In HTML5, you can include <input> elements outside the <form> by using the form attribute with the value of the form's id.
For example...
<h1>[ <input type="text" name="n" id="to" placeholder="To" form="message"> ]</h1>
<!-- snip -->
<form id="message" action="../new_private.php" method="post">
The only difference here would be that the n field will be in $_POST instead of $_GET.
If you really need the value in the URL, you'll need some JavaScript. Something like this
<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>