フォーム外の入力ボックスの値を取得する

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。どうすればこれを達成できますか？

ありがとうございます！

アレックス

Answer 1

HTML5には、フォームのidの値でform attributeを使用して<form>外<input>要素を含むことができます。例えば

...

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