SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Prompt Box Question

    Hey Guys,

    I am writing a tutorial for Spoono and I am running into a problem. This is a javascript tutorial that asks for input from a user through a prompt box, which is stored in the variable name. Then, there is a text box and submit button; when the user clicks on the Submit button, the variable name shows up in the text box. The script I have right now produces nothing in the text box. Here it is:

    Code:
    <html>
    <head>
    <script language = "Javascript">
    	function input()
    	{
    	var name = prompt("What is your name?","Type Name Here");
    	}
    </script>
    	<title>Input Example</title>
    </head>
    
    <body onLoad = "input()">
    <form name = "myform">
    	<input name = "mytext" type="Text" size=50>
    	<input type="Submit" onClick="myform.mytext.value= name; return false;">
    </form>
    </body>
    </html>
    - -- --- ---- ----- ------
    Shan Gaur
    Webmaster - Spoono
    http://www.spoono.com
    ------ ----- ---- --- -- -

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    There are number of things wrong with your script, virtually all of them having to do with insufficient understanding of syntax and programming languages in general.

    1) Do not use "type='submit'"
    You are not submitting anything anywhere. (I don't care what any book or person tells you.) By using 'onclick=' you are asking the user's computer to process a command -- not the server (which 'type=submit' assumes you are doing)
    2) you do not need to 'return false' here -- use that when you are dealing with hrefs, not buttons.
    3)the DOM (document object model) begins with 'document', not the formname
    4) never, ever give a variable a name that can be mistaken for something else -- 'name' -- If you looked at your error message in NN4 it said something like "window name has illegal character '/40'" or somesuch.
    When the browser saw this: "....value=name" It tried to put the window.name in the text box. Since your window didn't have a name and the value the browser was looking at had some character that it wouldn't allow in a window.name, it just refused to do what you asked.


    So, this:
    <input type="Submit" onClick="myform.mytext.value= name; return false;">

    should be:

    <input type="button" onClick="document.myform.mytext.value= userName;">

    which brings me to the prompt statement and its function:

    1) don't call it input() (see rule 4 above) -- Even if it works, don't; it may freak on the next round of browsers. Call it 'input1()' or 'promptUser()' or better yet, 'getName()' -- since that is what you are doing.
    2) using the 'var' keyword within a function makes that variable local (in scope). That means that only the function recognizes and can use it. So, you either declare the variable outside of the function (really a lazy man's way of doing things) or remove the 'var' keyword so that it is global, or you can pass the result back to the calling function -- the best way because then the variable doesn't interfere with anything else on the page; however, in this case (because you are calling the prompt from the onload event handler), it would be extremely difficult to do and still have local scope.

    so, this means the function would look like:

    function getName()
    {
    userName = prompt(........);
    //or return(prompt(......)) if you were returning it
    }

    One final comment:
    this: type="Text"
    should be: type="text"

    One final note: you are not providing any validation for userName -- see the "Document Title Change" script/tutorial at my site (GrassBlade)
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


Bookmarks

Posting Permissions

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