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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    35
    Thanks
    4
    Thanked 2 Times in 2 Posts

    Forms and the IF statement

    Im very much a beginner and just wanted to test out using forms and displaying results using the Javascript IF statement. Below is what Im trying to do which is see how a form works and display the entered data using the Javascript IF statement but I'm confused on why it won't work.

    <html>

    <head>

    <script type="text/javascript">

    if (myNum == 7){

    document.write("7");
    }
    else {
    document.write("not 7");
    }
    </script>

    </head>

    <body>


    <p><font size="5">Trying to understand the text box in forms and displaying results using Javascipt</font></p>
    <hr />
    <form method="get" name="jsform">

    <input type="text" name="myNum">

    <input type="submit" value="SUBMIT">

    </form>


    </body>

    </html>

    I need help and a good Beginners book to read
    thanks
    John

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    There's no automatic connection between JavaScript variables (your myNum variable, for example) and form fields.

    And even if there were, how would you expect that code to work?? You are looking at the value of myNum *before* the user has a chance to enter a value into the form field.

    On top of all that, though, if you use document.write() anytime after the HTML is loaded, then you will *wipe out* all content on the page (yes, even the JS code itself), replacing it with only what you write.

    Soo.... *WHERE* on the page do you want the message to appear that announces whether the user entered "7" or some other value??? You could put the message into another <form> field, or you could put it into an existing <div> or <span>, or you could even create a new <div> or <span> element dynamically and attach that to (someplace in) the <body> of the page.

    Too many choices.

    But in any case, your code will need to be "event driven". That is, you will need to activate your code either because the user changed the contents of that form field, or because the user moved the cursor to or away from that form field, or because of another event altogether (e.g., a button click by the user). [And there are many many other choices. For example, you could do the check every 833 milliseconds--yes, the number is a silly arbitrary choice--and display the message when you see the value change. Or you could only make the check at 7:13 PM on a Sunday. Or...]

    So...

    Define the problem, first, then start to tackle it.

    Here's one of the easiest possible answers:
    Code:
    <html>
    <head>
    <body>
    <form>
    <input name="myNum" onchange="if ( parseInt(this.value,10) < 13 ) alert('a low number');">
    </form>
    </body>
    </html>
    The "onchange" there is the key: It's an *EVENT* that can (and here does) invoke javascript code to do something. There are *TONS* of events available to you.

    Oh, and here's the fun part: The events--and even the DOM ("Document Object Model") of the browser--are *NOT* a part of JavaScript, per se. JavaScript-the-language is actually pretty simple to learn and use. It's all the stuff you can *DO* with it that makes the learning curve steep.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    well the reason it isn't working is bcuz the if statement needs to be enclosed within a function and u need to call up the function from the form and then pass the value from the input to the javascript so the javascript knows that it is suppose to be doing sumthing and what that sumthing is...

    http://www.w3schools.com/js/js_functions.asp should take care of the functions part

    http://www.w3schools.com/js/js_events.asp particularly the onSubmit event

    also u shouldn't use document.write and for what u r trying to do an alert would work just fine

    so ultimately what ur code should look like is this

    Code:
    <html>
    
    <head>
    
    <script type="text/javascript">
    function myfunc(form){
    if (form.myNum.value == 7){
    
    alert("7");
    }
    else {
    alert("not 7");
    }
    }
    </script>
    
    </head>
    
    <body>
    
    
    <p><font size="5">Trying to understand the text box in forms and displaying results using Javascipt</font></p>
    <hr />
    <form method="get" name="jsform" onsubmit="myfunc(this)">
    
    <input type="text" name="myNum">
    
    <input type="submit" value="SUBMIT">
    
    </form>
    
    
    </body>
    
    </html>

    ~edit~ dang Old Pedant is faster than me ~/edit~
    woot found the avatar options...i swear they didn't exist b4

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Ummm... a *SORT* of mistake in that code, sir god.
    Code:
    <form method="get" name="jsform" onsubmit="myfunc(this)">
    This means that indeed the alert() will pop up. But then the form will indeed submit. And since not action is specified, it submits to itself.

    Now, that's not illegal/unethical, but if you are really just wanting to get the message and not submit the form, you should maybe add in:
    Code:
    <form method="get" name="jsform" onsubmit="myfunc(this); return false;">
    See, JStrausss??? There are TOO MANY answers!!!!!

    Another way to have written that <form> might have been:
    Code:
    <form method="get" name="jsform">
    <input type="text" name="myNum">
    <input type="button" value="Test the number" onclick="myfunc(this.form);">
    </form>
    with no changes to any of the other code.

    TOO MANY ANSWERS!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Here's another fun fact.

    The ".value" property of a form field is *always* a string.

    So reality's code does this:
    Code:
    if (form.myNum.value == 7){
    which is comparing the *string* in myNum.value with the number 7.

    If the user entered just the 7, all is okay.

    But if the user entered a space before the 7 or entered 07 or or or, then the string and the number will *not* be the same (even though to we humans--or androids--would recognize them as "same").

    If you wanted to test for what a *human* would consider equality, you probably would do something like this:
    Code:
    var val = form.myNum.value.replace(/^\s+/,"").replace(/\s+$/,""); // strip spaces
    var ival = parseInt(val,10); // try to convert from string to number
    if ( isNaN(ival) ) 
    {
        alert("That's not a valid number");
    } else if ( val == 7 ) {
        alert("You entered the number 7");
    } else {
        alert("You entered a number other than 7");
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    i agree with Old Pedant completely on this i personally use the same method as the onclick version for my forms but i also use ajax to send the form info to my action page so it is the easiest way to make the form do what i want it to do
    woot found the avatar options...i swear they didn't exist b4

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    35
    Thanks
    4
    Thanked 2 Times in 2 Posts
    guys I really do appriciate your help. I'm sorry for being such a beginner but I really like playing around with this stuff and as Old Pedant put it so well there is so much that can be done im having a hard time figuring it all out.

    thanks again I'm going to print out both your suggestion and try to understand them on the train today

    thanks
    John

  • #8
    New Coder
    Join Date
    Dec 2009
    Posts
    35
    Thanks
    4
    Thanked 2 Times in 2 Posts
    O - I forgot to say to Old Pedant. I'm sure there are many answers. I understand that. Im a beginner. the most basic, simple answer there is, would of been fine for me to understand. that is all I was asking for. I was just trying to understand the basic concept of the IF statement used with a form. I was not asking for all possible answers.

    thanks again I do appreciate everyones help.

    John

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    35
    Thanks
    4
    Thanked 2 Times in 2 Posts
    I have a quest for godofreality example. how dos the "this" parameter in onsubmit="myfunc(this)"> play into this example?

  • #10
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    this in my example is the form object so passing the this object into the function will allow you to access all the named elements in the form simply by doing sumthing like document.this.(fieldName).value but the value is not all u can access look at the following line of code
    Code:
    <input type="text" value="default" name="myField" class="myClass" />
    this input has 4 attributes type, value, name, and class
    so the following
    Code:
    document.this.myField.value; //returns default
    document.this.myField.className; //returns myClass
    not sure how to access the name and type attributes but i imagine it could be done if u chose to do so

    so in short this just means the object for whatever element the event attribute is placed in
    woot found the avatar options...i swear they didn't exist b4

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by godofreality View Post
    Code:
    <input type="text" value="default" name="myField" class="myClass" />
    this input has 4 attributes type, value, name, and class
    so the following
    Code:
    document.this.myField.value; //returns default
    document.this.myField.className; //returns myClass
    not sure how to access the name and type attributes but i imagine it could be done if u chose to do so
    Exactly the same way:-
    Code:
    document.this.myField.name; //returns myField
    document.this.myField.type; //returns text

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Philip and Reality: I'm sorry, but I don't *pretend* to understand what
    Code:
        document.this
    means. Can either of you show a working example using that syntax????


    ********

    In general, the JS keyword "this" is an implicit reference to the *object* that invoked the current method.

    Code:
    <form>
    <input type="checkbox" name="zambonis" value="rule" 
           onclick="alert('Checkbox ' + this.name + ' says ' + this.value);" />
    </form>
    The "this" refers to the checkbox object (it's represented as an object in the DOM and JavaScript receives a reference to the object in the "this" magic keyword).

    So I don't understand what "document.this" can possibly mean. "document" is itself a reference to the document object in the DOM, so how can "this"--another object reference--be a property of the document object????

    Please tell me all of that is a typo.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Code:
    <html>
    <body>
    <form>
    <input type="text" name="zambonis" value="rule" 
           onChange="alert('changed ' + this.name + ' to ' + this.value);" />
    <hr>
    <input type="text" name="broken" value="stuff" 
           onChange="alert('changed ' + document.this.name + ' to ' + document.this.value);" />
    </form>
    </body>
    </html>
    MSIE: Won't even try to run the page. Complains about a syntax error.

    FireFox: Says "document.this is not defined" when you change the second text field.

    I think I'm right. But... ???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <html>
    <body>
    <form>
    <input type="text" name="zambonis" value="rule" 
           onChange="alert('changed ' + this.name + ' to ' + this.value);" />
    <hr>
    <input type="text" name="broken" value="stuff" 
           onChange="alert('changed ' + document.this.name + ' to ' + document.this.value);" />
    </form>
    </body>
    </html>
    MSIE: Won't even try to run the page. Complains about a syntax error.

    FireFox: Says "document.this is not defined" when you change the second text field.

    I think I'm right. But... ???
    well i won't even pretend that wasn't a mistake on my part i never do document.this but honestly i wasn't even sure if my method of doing it which i now see as indeed being the correct way to do it was what i should be telling him in case i was incorrect and now it seems as though i overcompensated that one lol
    woot found the avatar options...i swear they didn't exist b4

  • #15
    New Coder
    Join Date
    Dec 2009
    Posts
    35
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Old Pedant View Post
    The "this" refers to the checkbox object (it's represented as an object in the DOM and JavaScript receives a reference to the object in the "this" magic keyword).
    I'm starting to think that i do not have a full understanding of DOM and how objects like 'this' and 'document' work. Its so hard to figure out where to start learning. I feel like I'm starting in the middle. If you know what I mean.

    this is good though. I'm reading more of the descussions on this forum to help me


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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