Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Form text input issue

    Hello there,

    I have a little problem with this code :
    Code:
    <html>
    
    <head>
    <script type="text/javascript">
    
    function O()
    {
    
    alert("The input is: " + GET_URL.url.value);
    DISPLAY.src = GET_URL.url.value
    
    }
    
    </script>
    </head>
    <body>
    
    
    <form name="GET_URL">
    Enter address :
    <input type="text" name="url" onChange="O()" /><br />
    </form>
    
    
    <input type="button" value="Change address ?" onclick="O()" /><br />
    
    <iframe id="DISPLAY" src ="http://www.google.com/" width="400" height="400" scrolling = "yes">
    <p>Your browser does not support iframes.</p>
    </iframe>
    
    </body>
    </html>
    What is supposed to do is to navigate to the address given in the text input. The problem is that if I use the button to change the page it works, but if I press ENTER after finishing writing the url it doesn't work.It shows the alert with the url that I've entered but the page doesn't change . Furthermore it always changes the page to the initial one (google.com) .
    What may be the problem since onChange and onclick do the same thing here ?


    Regards,
    Adi

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Firstly: Your code is wrong.
    1. It lacks a document type definition (DTD). You should define your document as HTML or XHTML strict.
    2. The name attribute is deprecated on all elements except form controls (input, select, and textarea). For the form you have to use id instead.
    3. A form requires an action attribute with a reference to a file that is processing the form input (server side). And in the course of this it also needs a method how the data is sent (“GET” or “POST”).
    4. Form controls must not be direct children of a form, they have to be inside some other block element such as fieldset or div.
    5. You should always attach labels to your form controls for accessibility reasons.
    6. The width, height, and scrolling attributes are deprecated and/or not allowed. Use CSS to style your page.


    Secondly: A submit button typically submits a form. So, the action it performs (or the event that occurs, respectively) when you click it is “submit”. Hence, the JS event you should use is onsubmit to execute the function (and maybe add return false to prevent the form from actually submitting).

    Then, while we’re at improving the code, you should always use unobtrusive JavaScript which means remove any inline JS call and only manipulate the document with external script through DOM manipulation.

    Lastly: Try changing DISPLAY.src = GET_URL.url.value to document.getElementById('DISPLAY').src = document.forms['GET_URL'].url.value


    Edit: OK, sorry, I didn’t test it myself before I wrote and I just realized that you used a button of type “button”, not “submit”. But anyway, here is a working version with valid code and unobtrusive JavaScript:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <script type="text/javascript">
    window.onload = function() {
    	form = document.forms['get_url'];
    	form.onsubmit = function() {
    		alert("The input is: " + this.url.value); // “this” refers to the contents of the “form” variable
    		document.getElementById('display').src = this.url.value;
    		return false;
    	}
    }
    </script>
    <style type="text/css">
    form {margin-bottom: 20px;}
    iframe {
    	height: 400px;
    	width: 400px;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
    <form id="get_url" action="" method="get">
    <div>
    <label for="url">Enter address :</label>
    	<input type="text" id="url" name="url" />
    	<input type="submit" value="Change address ?" />
    </div>
    </form>
    <iframe id="display" src="http://example.com">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </body>
    </html>
    Please don’t just copy and paste this, learn from it!!!
    Last edited by VIPStephan; 06-08-2009 at 11:56 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •