HTML/JS help, Cannot find error |
HTML/JS help, Cannot find error |
skyward |
Feb 16 2016, 02:16 AM
Post
#1
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
Hi
I am absolutely new to html and javascript. I have developed a simple form in html that is checked through a js function through an onClick event. The problem is that the function is not being executed although there does not seem to be any errors. i have checked it through the w3school debugger and firebug but i am really confused because i DON'T KNOW whats wrong. I need urgent help with this and will appreciate any pointers. thanks here is the code <!DOCTYPE html> <HTML> <HEAD> <title>Online Job Portal</title> <script type="text/javascript"> function checkForm() { document.write("Working"); var chk=true; var name=document.getElementById("fullname").value; var age=document.getElementById("getage").value; var under=document.getElementById("under").checked; var grad=document.getElementById("grad").checked; if(name==""){ chk=false; window.alert("Name is required");} if(isNaN(age)||age<1||age>100){ chk=false; window.alert("Enter Valid Age");} if(under==false && grad==false){ chk=false; window.alert("Select Qualification");} if(chk==false){ document.getElementById("info").innerHTML="Please give your information correctly";} if (chk==false){ var qual=document.getElementById("under").checked; var it=document.getElementById("it").checked; var marketing=document.getElementById("marketing").checked; var academics=document.getElementById("academics").checked; if(qual==true){ qual="Undergraduate";} else{ qual="Graduate";} if (it==true){ it="IT";} else{ it="None";} if (marketing==true){ marketing="Marketing";} else{ marketing="None";} if (academics==true){ academics="Academics";} else{ academics="None";} document.getElementById("info").innerHTML= "Hello"+fullname<br> "Your age is "+age" years"<br> "Your qualification is" + qual<br> "Your selected job types are"<br> "Job 1 :" + it<br> "Job 2 :" + marketing<br> "Job 3 :" + academics<br>; } } </script> </HEAD> <BODY> <form name="job portal" action=""> <h1>Online Job Portal</h1> <TABLE> <tr> <td>Name :</td> <td><input type="text" id="fullname" name="fullname" value=""></td> </tr> <tr> <td>Age :</td> <td><input type="text" id="getage" name="getage" value=""></td> </tr> <tr> <td>Qualification :</td> <td>UnderGraduate<input type="radio" name="qualification" id="under" value="undergraduate"></td> <td>Graduate<input type="radio" name="qualification" id="grad" value="graduate"></td> </tr> <tr> <td>Select a job type :</td> <td>IT<input type="checkbox" name="selectJobType" id="it" value="it"></td> <td>Marketing<input type="checkbox" name="selectJobType" id="marketing" value="marketing"></td> <td>Academics<input type="checkbox" name="selectJobType" id="academics" value="academics"></td> </tr> </TABLE> <br> <br> <br> <br> <div id="info"> </div> <input type="button" value="Show Information" onClick="checkForm()"> <input type="reset" value="Reset Form"> </form> </BODY> </HTML> |
pandy |
Feb 16 2016, 05:29 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You seem to have a brace too many at the end of the script.
The closing brace is missing here. CODE if (chk==false){ var qual=document.getElementById("under").checked; var it=document.getElementById("it").checked; var marketing=document.getElementById("marketing").checked; var academics=document.getElementById("academics").checked; The quotes are screwed up in the string. HTML tags must be quoted too and you had missed a quote altogether. You can't have line breaks in the middle of strings either, you must place those at the plus signs. CODE document.getElementById("info").innerHTML = 'Hello' +fullname + '<br> Your age is ' + age + ' years <br> Your qualification is' + qual + '<br> Your selected job types are <br> Job 1 :' + it + '<br> Job 2 :' + marketing + '<br> Job 3 :' + academics +'<br>'; The object is returned instead of the value for fullname. Afraid I don't see why. But otherwise it works with those corrections. |
pandy |
Feb 16 2016, 05:58 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Oh, I changed to single quotes out of habit. It doesn't matter for functionality if you use single or double.
|
Christian J |
Feb 16 2016, 05:58 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Feb 16 2016, 06:04 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Duh. I just realized fullname was used in the string, but you beat me to it. Even though I actually wrote fullname myself I had to sprinkle alert(name) all over to realize that. Sigh.
Also, you of course need to remove the document.write at the beginning of the script or that's all you're gonna get. |
skyward |
Feb 16 2016, 08:35 AM
Post
#6
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
Duh. I just realized fullname was used in the string, but you beat me to it. Even though I actually wrote fullname myself I had to sprinkle alert(name) all over to realize that. Sigh. Also, you of course need to remove the document.write at the beginning of the script or that's all you're gonna get. Thanks a lot guys for those pointers. I've corrected the mistakes, the braces one at least I figured out ....(SOMTHING at least) ....but the function is not doing any checks. So I just wanted to ask, since u said it works, what exactly is it doing...I realiz its stupid to ask...but is it displaying the input info? And is it alerting at the correct points? And I only added the docment.write at the beginning to check whether the function was running or not. |
Christian J |
Feb 16 2016, 08:46 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Could you post the corrected version as well?
|
skyward |
Feb 16 2016, 08:51 AM
Post
#8
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
Could you post the corrected version as well? <!DOCTYPE html> <HTML> <HEAD> <title>Online Job Portal</title> <script type="text/javascript"> function checkForm() { var chk=true; var name=document.getElementById("fullname").value; var age=document.getElementById("getage").value; var under=document.getElementById("under").checked; var grad=document.getElementById("grad").checked; if(name==""){ chk=false; window.alert("Name is required");} if(isNaN(age)||age<1||age>100){ chk=false; window.alert("Enter Valid Age");} if(under==false && grad==false){ chk=false; window.alert("Select Qualification");} if(chk==false){ document.getElementById("info").innerHtml="Please give your information correctly";} if(chk==true){ var qual=document.getElementById("under").checked; var it=document.getElementById("it").checked; var marketing=document.getElementById("marketing").checked; var academics=document.getElementById("academics").checked; } if(qual==true){ qual="Undergraduate";} else{ qual="Graduate";} if (it==true){ it="IT";} else{ it="None";} if (marketing==true){ marketing="Marketing";} else{ marketing="None";} if (academics==true){ academics="Academics";} else{ academics="None";} document.getElementById("info").innerHtml= "Hello"+name+ "<br>Your age is "+age" years"+ "<br>Your qualification is" + qual+ "<br>Your selected job types :"+ "<br>Job 1 :" + it+ "<br>Job 2 :" + marketing+ "<br>Job 3 :" + academics; } </script> </HEAD> <BODY> <form name="job portal"> <h1>Online Job Portal</h1> <TABLE> <tr> <td>Name :</td> <td><input type="text" id="fullname" name="fullname" value=""></td> </tr> <tr> <td>Age :</td> <td><input type="text" id="getage" name="getage" value=""></td> </tr> <tr> <td>Qualification :</td> <td>UnderGraduate<input type="radio" name="qualification" id="under" value="undergraduate"></td> <td>Graduate<input type="radio" name="qualification" id="grad" value="graduate"></td> </tr> <tr> <td>Select a job type :</td> <td>IT<input type="checkbox" name="selectJobType" id="it" value="it"></td> <td>Marketing<input type="checkbox" name="selectJobType" id="marketing" value="marketing"></td> <td>Academics<input type="checkbox" name="selectJobType" id="academics" value="academics"></td> </tr> </TABLE> <br> <br> <br> <br> <div id="info"> </div> <input type="button" value="Show Information" onClick="checkForm()"> <input type="reset" value="Reset Form"> </form> </BODY> </HTML> |
skyward |
Feb 16 2016, 09:08 AM
Post
#9
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
YAAAY
Its running...only partially but running....i shifted the script from head to body...why does that make any difference? Because I was taught that it's "good practice to write the JS code in the head portion".... |
pandy |
Feb 16 2016, 09:20 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It shouldn't make any difference in this case. You must have changed something. Everything worked for for me, error checking and the values was printed out.
|
Christian J |
Feb 16 2016, 09:34 AM
Post
#11
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Try using your browser's script console, it should point out (most) syntax errors easily.
function checkForm() { var chk=true; Sidenote: I'd start with a false value instead, and only change it to true if the user input is correct. QUOTE document.getElementById("info").innerHtml="Please give your information correctly";} That's a typo, it must be innerHTML (note the upper case). QUOTE if(chk==true){ var qual=document.getElementById("under").checked; var it=document.getElementById("it").checked; var marketing=document.getElementById("marketing").checked; var academics=document.getElementById("academics").checked; } I'd put the rest of the script in the above if(chk==true){...} condition as well. QUOTE document.getElementById("info").innerHtml= innerHTML typo again. QUOTE "<br>Your age is "+age" years"+ A + sign is missing after the age variable. QUOTE <td>UnderGraduate<input type="radio" name="qualification" id="under" value="undergraduate"></td> <td>Graduate<input type="radio" name="qualification" id="grad" value="graduate"></td> Sidenote: it's good practice to always make one of a group of radio buttons checked by default. If you need a "no qualification" value, add another radio button for that. |
pandy |
Feb 16 2016, 09:38 AM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
pandy |
Feb 16 2016, 09:39 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Bummer.
|
skyward |
Feb 16 2016, 09:53 AM
Post
#14
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
Bummer. DOOOOONNNNNEEEEE Happy to say I found those last errors....though a few hours ago i was ready to give up when u guys gave me the boost.........U were right @Pandy.....the code works fine even in the Head.....don't know what I did to correct it ...... its just a code ...why am i so happy Thanks a lot Pandy and Christain.... and that was a good competition u both had |
pandy |
Feb 16 2016, 01:49 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Christian is always doing that. Lurks while I do all the hard work then he jumps in with the finishing touch. I feel aso used!
Did you retype something when you moved the script? That's usually how one screws up. |
Christian J |
Feb 16 2016, 03:14 PM
Post
#16
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Usually it's pandy that posts first while I'm busy spell checking.
|
pandy |
Feb 16 2016, 04:36 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No! Not the final solution. I often miss some detail and then come you...
|
skyward |
Feb 17 2016, 12:58 AM
Post
#18
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
No! Not the final solution. I often miss some detail and then come you... I think the main issue was the innerHtml typo... and the braces (turns out the braces were fine originally)...and the quotes..... .lol....small mistakes but i wonder why they went undetected in the debuggers? |
pandy |
Feb 17 2016, 02:51 AM
Post
#19
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What do you mean by originally? The braces weren't fine in your original post, but innerHTML was written correctly.
What debugger missed the braces and the quotes? Maybe you used the HTML validator. It doesn't check JavaScript. |
skyward |
Feb 17 2016, 07:51 AM
Post
#20
|
Group: Members Posts: 7 Joined: 16-February 16 Member No.: 23,998 |
What do you mean by originally? The braces weren't fine in your original post, but innerHTML was written correctly. What debugger missed the braces and the quotes? Maybe you used the HTML validator. It doesn't check JavaScript. They were logically ok, but I might have mistyped(as in wrong place) one of them, because I put them back where I thought I had out them originally and thats when the code worked perfectly, along with the innerHtml typo. Yes I used the Html validator because I didn't know it won't check the JavaSript ...I also used Firebug. A far as I could understand there were no errors from Firebug, but it was hard to understand the interface . I was pretty much banging around on my own. Thank God I decided to post the issue here otherwise I would ave been at it for the next week . Made a brand-new account for that sole purpose:) |
Lo-Fi Version | Time is now: 19th April 2024 - 10:04 PM |