...

View Full Version : Forms and the IF statement



Jstrausss
12-11-2009, 09:29 PM
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

Old Pedant
12-11-2009, 10:14 PM
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:


<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.

godofreality
12-11-2009, 10:22 PM
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



<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~

Old Pedant
12-11-2009, 10:32 PM
Ummm... a *SORT* of mistake in that code, sir god.


<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:

<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:


<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!

Old Pedant
12-11-2009, 10:50 PM
Here's another fun fact.

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

So reality's code does this:

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:

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");
}

godofreality
12-12-2009, 05:19 AM
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

Jstrausss
12-14-2009, 04:41 PM
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

Jstrausss
12-14-2009, 04:53 PM
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

Jstrausss
12-14-2009, 07:41 PM
I have a quest for godofreality example. how dos the "this" parameter in onsubmit="myfunc(this)"> play into this example?

godofreality
12-14-2009, 09:23 PM
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

<input type="text" value="default" name="myField" class="myClass" />
this input has 4 attributes type, value, name, and class
so the following


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

Philip M
12-14-2009, 10:50 PM
<input type="text" value="default" name="myField" class="myClass" />
this input has 4 attributes type, value, name, and class
so the following


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:-


document.this.myField.name; //returns myField
document.this.myField.type; //returns text

Old Pedant
12-15-2009, 03:22 AM
Philip and Reality: I'm sorry, but I don't *pretend* to understand what

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.



<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.

Old Pedant
12-15-2009, 03:28 AM
<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... ???

godofreality
12-15-2009, 08:06 AM
<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

Jstrausss
12-15-2009, 04:45 PM
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

godofreality
12-15-2009, 05:10 PM
well the way i started learning was i made small projects for myself and used w3schools website for the basic info i needed to do it and anything i got stuck on i would google the problem which usually will turn up a solution to my problem which i then just had to figure out why it worked and why what i was trying wasn't

Old Pedant
12-15-2009, 10:40 PM
Don't get confused about "this"--it really only has one meaning: a reference to the current object. And that is true whether the object is a DOM object or an object created by JS code.

god & Philip just plain goofed in their example code.

Let's go back to that one earlier pair of examples:

ONE:


<form method="get" name="jsform" onsubmit="myfunc(this); return false;">
<input type="text" name="myNum">
<input type="submit" value="Test the number">
</form>

TWO:


<form method="get" name="jsform">
<input type="text" name="myNum">
<input type="button" value="Test the number" onclick="myfunc(this.form);">
</form>

In ONE, the "this" is in the onsubmit handler, and the onsubmit is part of the <form> object. So "this" refers to the <form>.

In TWO, the "this" is in the onclick handler, and the onclick is part of the <input> object. So the "this" refers to the <input>.

The sneaky trick in TWO is that *all* form fields have a property named "form" which is a reference to the <form> than holds them.

So when I do "this.form" from that onclick handler, I am say "use 'this' to get a reference to the <input> field, and then use the 'form' property of the <input> to get a reference to the <form> that holds it."

So in both ONE and TWO, when I call myfunc( ), I am passing a reference to the <form> object.

Does that help at all???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum