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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Practice Script - Opening a Window

    Not sure if I can do this but I'm reading through JavaScript: The Definitive Guide, and I'm going to be posting practice scripts that work. They may not make sense, but they work.

    I'd also like responses on how these simple snippets could be used and how they can be made better.

    Opening a Window
    This is just a simple form with an input box and a "Go" Button. You type in the URL that you want loaded into the new window. Click Go and a new Window Object is created and new window opened. I think.

    HTML
    Code:
    <form name="frm">
    <input name="website" type="text" size="40" maxlength="80" value="type url">
    
    <input name="openpage" type="button" value="Go" onClick="goToPage()">
    </form>
    JavaScript
    Code:
    function goToPage() {
    	var siteForm = document.getElementsByName("frm")[0];
    	var webpage = siteForm.website.value;
    	window.open(webpage);
    	
    	/* Works! */
    	};

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The first thing I'd do is to update the HTML from HTML 3.2 to HTML 4 - which means you need to wrap the input fields inside a fieldset or div and not put them directly inside the form tag. Adding a label to the input field so that people know what is expected to be typed ther would also be useful.

    Giving the input field an id and getting rid of the unnecessary name references would also alloow the JavaScript to be made more efficient.

    Next I'd correct the spelling of onclick - while HTML isn't case sensitive it is better to use the correct capitalisation. It would also be better to make it a submit button rather than just an ordinary button and use onsubmit instead of onclick.

    The next step would be to remove the JavaScript from the HTML and attach the event handler from within the script.

    After that there are a number of ways to improve it still further but applying the above is probably sufficient for a simple script like this one.

    Code:
    <form><div>
    <label for="website">Enter URL:</label><input id="website" type="text" size="40" maxlength="80" value="type url">
    
    <input type="button" value="Go">
    </div></form>
    Code:
    function goToPage() {
    	var siteForm = document.getElementsByid("webpage");
    	var webpage = siteForm.website.value;
    	window.open(webpage);
    	
    	/* Works! */
    	};
    
    document.getElementById('webpage').form.onsubmit = function() {goToPage(); return false;};
    Last edited by felgall; 05-02-2012 at 11:03 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    FutureWebDev (05-02-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Yes Yes Yes. I like this place already.
    Thank ya buddy.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,698
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by felgall View Post
    Giving the input field an id and getting rid of the unnecessary name references […]
    I would concretize this a little more and say that the name attribute (on form controls, not the form element itself) is not unnecessary per se since server side scripts make use of them. But in this demonstration that involves just JS and no server side script they can indeed be ommitted. And as said, a name attribute on the form element itself is not valid HTML 4.
    Last edited by VIPStephan; 05-02-2012 at 11:14 PM.

  • Users who have thanked VIPStephan for this post:

    FutureWebDev (05-03-2012)


  •  

    Posting Permissions

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