www.webdeveloper.com
Results 1 to 8 of 8

Thread: Very simple input javascript question.

  1. #1
    Join Date
    Oct 2008
    Location
    Beautiful BC
    Posts
    14

    Very simple input javascript question.

    Hello you lovely helpful people.

    I have a very simple question - Yes I am a rube, noob, whatever you want to call me. I am trying to learn

    I have the following code:
    Code:
    <div id="response">
            <h1>Welcome <input type="text" id="yourName" size="10" />
             <br /> Wanna play a game? </h1>
            <br /><a href="javascript:void('')" onclick="writeName('response')" + ".">Click here to play</a>
    </div>
    And then this function:
    Code:
    //write name
    function writeName(objectID) {
      var object = document.getElementById(objectID);
      var userName = document.getElementById('yourName').value;
      object.innerHTML = '<h3>Hi <i>' + userName + ?
       '</i> + 'let/'s start cooking.' </h3> <img src="main.gif" alt="Want to play a game? Click on the menu above to choose." width="230" height="297" border="0" />';
    }
    Which isn't currently working. And doesn't even do what I would like to happen even if it did work.
    What I would like is whence you fill in your name and click the first link 'click here to play' you are taken to a page called 'play.html' and your name is displayed as you filled it in on the original page. If no name is filled in then it just says 'Hi let's start cooking' .

    I am sure this is a very simple function I just don't know beans and am here to learn!

    Thanks very much.

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    What you really want here is not javascript. While there are ways to write javascript in to a new window, it is ill-advised when php is the right tool for the job. Below are the php tools you need to accomplish this simple task:

    Name the following file whatever you want, can be either .php or .html extension (this page does not actually use .php so go with .html):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    </head>
    <body>
    <div id="response">
    The main thing here is the use of the form with an action="play.php" and method="post" and the text input with name="yourName" and of course the submit button input.
    <form action="play.php" method="post" name="welcomeForm">
    <h1>Welcome <small style="font-size:0.4em;">(please enter your name)</small><input type="text" id="yourName" name="yourName" size="10" /><br /> Wanna play a game? </h1>
    <br /><input type="submit" value="Click here to play" />
    </form>
    </div>
    </body>
    </html>

    Important!! Name the following page "play.php" (must match the action= attribute in the form above and needs to be a .php extension)

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    </head>
    <body>
    <h3>Hi <?php if ($_REQUEST["yourName"])echo "<i>".$_REQUEST["yourName"]."?</i>";?> let's start cooking.</h3>
    <div style="width:500px;">
    In the above h3, php will return whatever was entered into the text input that had attribute name="yourName" in it on the page that called this page (the 'if' statement in the php code ensures it will only act if there was an entry in the "yourName" field to echo here). This page must be named with a .php extension and not .html in order for php to parse it properly. (That is, unless you know how to set up a server to parse .html as .php). Also, please note that in the img below, you should not use the alt= property for your questions and text, only IE will [incorrectly] show alt text as a tooltip. Using the title= instead ensures other browsers will display it properly.<br />
    <img src="main.gif" alt="main.gif" title="Want to play a game? Click on the menu above to choose." width="230" height="297" style="border:0;" />
    </div>
    </body>
    </html>

    Now upload both those files to a php enabled server and you are good to go. Note that if you are on a free host you may not be able to use php on some of them I believe.

  3. #3
    Join Date
    Oct 2008
    Location
    Beautiful BC
    Posts
    14
    I agree whole heartedly. And I love php and would absolutely use it and even know how to use it.
    Except that I am forced in this instance to use javascript as that is what I am trying to learn and what I am required to use.

    Thank you so much!

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    the first option that developer would consider is a server side language, but you already know that. for this time let focus on the javascript solution. there are various solution: create a new window (as astupidname mentioned), pass the value, among other possible solution. here i will explain how to pass a value.

    you can set a cookie and then read it in the next page. you can also pass the value through URL with GET request, either using a form or a link. so, basically the first page will contain a form:
    HTML Code:
    <form method='get' action='play.htm'>
            <h1>Welcome <input type="text" id="yourName" name='username' size="10" />
             <br /> Wanna play a game? </h1>
            <br /><input type='submit' value='Click here to play' style='border:0; background-color:transparent; color:blue; text-decoration:underline;cursor:pointer;' />
    </form>
    then, your play.htm document will contain a script to read the passed value and display it. there is various option to write content from javascript to the document. there is document.write method, which don't require the document to be fully loaded; or you can use the non-standard innerHTML property but require that the element exist before setting a new value; or the standard DOM method. in this sample i will use the innerHTML property because the content to append is a simple text and because it require less code:
    HTML Code:
    <div id="response">
         <h1>Hi,  <span id='username'></span>! Let's start cooking.</h1>
         Wanna play a game? </h1>
    <img src="main.gif" alt="Want to play a game? Click on the menu above to choose." width="230" height="297" border="0" />
    </div>
    
    <script type='text/javascript'>
      var userName = location.search.split('=');
      document.getElementById('username').innerHTML = userName[1];
    </script>
    Last edited by ZeroKilled; 11-04-2008 at 11:44 PM. Reason: code correction

  5. #5
    Join Date
    Oct 2008
    Location
    Beautiful BC
    Posts
    14
    Thank you muchly once again for your help.
    The span tags aren't working. I may try a document write expression.

  6. #6
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    hmm, you sure it isn't working? because i make sure it work before posting. however, what follow is a sample with document.write method:

    HTML Code:
    <div id="response">
    <script type='text/javascript'>
      var userName = location.search.split('=');
      document.write("<h1>Hi, " + userName[1] + "! Let's start cooking.</h1>");
    </script>
    Wanna play a game?
    <img src="main.gif" alt="Want to play a game? Click on the menu above to choose." width="230" height="297" border="0" />
    </div>

  7. #7
    Join Date
    Oct 2008
    Location
    Beautiful BC
    Posts
    14
    Thank you. The document write worked.

    Now question... is there a way that I can give the variable an if/or definition in case someone doesn't fill in a username because now it shows up as 'undefined'

    Thanks!

  8. #8
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    Code:
      var userName = location.search.split('=');
      userName[1] = userName[1] || 'Customer';
    // if empty string or undefined, userName default value is Customer;
      document.write("<h1>Hi, " + userName[1] + "! Let's start cooking.</h1>");

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles