양식 외부의 입력 상자 값 가져 오기

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>