Make ENTER key submit url form for iframe

Question

So, I have a text box which is used as the address bar for the iframe. Well, before, I needed a "GO" button with this script:

<script language="javascript"> 
   function LoadPage(){ 
     var objFrame=document.getElementById("myIframe"); 
     objFrame.src=document.getElementById("URL").value;
    }
  </script>

"GO" button code:

<input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png"
            height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()" />

I want that code to be activated when the user presses "ENTER" while typing in the text box.

This is what I tried. What happened was that instead of a key pressed down that activated the event, when I clicked on the text box, the event was activated.

input type="text" value="http://" class="frmUrlVal" id="URL1" onkeypress="return (LoadPage(1))"/>

Answer 1

You could put a form around the textbox with an OnSubmit event handler. Be sure you return false at the end of the handler to prevent it from actually submitting the form.

Answer 2

The below script should work for you. On each key press the key is evaluated in the if statement. If enter was pressed LoadPage is called is it any other key it is not. I modified Loadpage to just be an alert for the example buy you can have it do what ever you want. Working jsfiddle: http://jsfiddle.net/zBD8V/

   <script language="javascript">
    function LoadPage() {
        alert('LoadPage() would execute here');
    }

    function DetectEnterPressed(e) {
        var characterCode
        if (e && e.which) { // NN4 specific code
            e = e
            characterCode = e.which
        }
        else {
            e = event
            characterCode = e.keyCode // IE specific code
        }
        if (characterCode == 13) return true // Enter key is 13
        else return false
    }
  </script>
<input type="text" value="http://" class="frmUrlVal" id="URL1" onkeypress="if(DetectEnterPressed(event)){LoadPage(1)}"/>