title: I need to dynamically update an iframe using an input from a user
body: <p>I have been searching for the right information for days and weeks now, and I must just be missing it. I have a simple problem, so it would seem. I have an iframe, which loads with a default URL. I also have a text box, and a submit button. What I want to do now, is to let the user input a URL, and then have the URL displayed in the iframe. Please don't suggest I simply do other things, or ask why I want to do this. It is a ongoing learning process. </p>
  
  <p>I have a java-script function that works when I use the "onclick" function. Here is the java-script:</p>
  
  <pre><code>&lt;script&gt;
  function setURL(url){
      document.getElementById('myframe').src = url;
  }
  </code></pre>
  
  <p></p>
  
  <p>This works with a set url function such as this:</p>
  
  <pre><code>&lt;input type="button" id="mybutton" value="Home Page" onclick="setURL('includes/guests.php')" /&gt;
  </code></pre>
  
  <p>The function works in that kind of scenario just fine. But, I want to instead, replace "onclick="setURL('includes/guests.php')" with the url entered by the user in this line:</p>
  
  <pre><code>&lt;input type="text" name="sendurl" size="100"&gt;
  </code></pre>
  
  <p>I am unsure exactly how to get this to work right. I want the iframe to be loaded with the url the user inputs. If i use a standard submit, and submit the form to itself, the post info for the url can be checked, and i even verified it works.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>if($_POST['sendurl'] != null) {
  $tisturl = $_POST['sendurl'];
  }
  echo $tisturl;</code></pre>
  </div>
  </div>
  </p>
  
  <p>echo $tisturl is simply to show me that it is carrying the url over correctly.</p>
  
  <p>My problem is, how do I now dynamically update the iframe to the new url value?   </p>