The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

3 Pages V  1 2 3 >  
 Reply to this topicStart new topic
> HTML/JS help, Cannot find error
skyward
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. unsure.gif
But otherwise it works with those corrections.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 16 2016, 05:58 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Feb 16 2016, 11:29 AM) *

The object is returned instead of the value for fullname. Afraid I don't see why. unsure.gif

I think the variable "name" should be used instead.

There is no variable called "fullname", it's the ID and NAME value of an INPUT element.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. ninja.gif

Also, you of course need to remove the document.write at the beginning of the script or that's all you're gonna get.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post Feb 16 2016, 08:35 AM
Post #6





Group: Members
Posts: 7
Joined: 16-February 16
Member No.: 23,998
QUOTE(pandy @ Feb 16 2016, 06:04 AM) *

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

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) sad.gif ....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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post Feb 16 2016, 08:51 AM
Post #8





Group: Members
Posts: 7
Joined: 16-February 16
Member No.: 23,998
QUOTE(Christian J @ Feb 16 2016, 08:46 AM) *

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post 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"....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.

QUOTE(skyward @ Feb 16 2016, 02:51 PM) *

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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2016, 09:38 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Here.
QUOTE(skyward @ Feb 16 2016, 02:51 PM) *

CODE
document.getElementById("info").innerHtml=



Should be:

CODE
document.getElementById("info").innerHTML=


It's case sensitive, like everything JavaScript. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post Feb 16 2016, 09:53 AM
Post #14





Group: Members
Posts: 7
Joined: 16-February 16
Member No.: 23,998
QUOTE(pandy @ Feb 16 2016, 09:39 AM) *

Bummer. blush.gif



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

its just a code ...why am i so happy smile.gif

Thanks a lot Pandy and Christain.... and that was a good competition u both had smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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! IPB Image happy.gif

Did you retype something when you moved the script? That's usually how one screws up.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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... ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post Feb 17 2016, 12:58 AM
Post #18





Group: Members
Posts: 7
Joined: 16-February 16
Member No.: 23,998
QUOTE(pandy @ Feb 16 2016, 04:36 PM) *

No! Not the final solution. I often miss some detail and then come you... ninja.gif



I think the main issue was the innerHtml typo... and the braces (turns out the braces were fine originally)...and the quotes..... blush.gif .lol....small mistakes but i wonder why they went undetected in the debuggers?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
skyward
post Feb 17 2016, 07:51 AM
Post #20





Group: Members
Posts: 7
Joined: 16-February 16
Member No.: 23,998
QUOTE(pandy @ Feb 17 2016, 02:51 AM) *

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 huh.gif wacko.gif ...I also used Firebug. A far as I could understand there were no errors from Firebug, but it was hard to understand the interface blush.gif .

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 smile.gif. Made a brand-new account for that sole purpose:)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

3 Pages V  1 2 3 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 11:16 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC