Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
Javascript and multiple onBlur's for one form?
I have an html form with 5 elements, 3 of which I am trying to get an onBlur event to fire with different functions. If I use just 1 onblur on this form it will work, but adding more will not work. Any way around this?
Here is my entire code http://pastebin.com/ccMc2dX7
<form id = "contactForm">
<div style = "margin-left:150px; width:600px">
<fieldset><legend>Customer Information</legend>
<p>First name:</br><input name="firstname" type= "text" size = "25" onBlur = "validFName()"/>
</br></br>
Last name:</br><input name="lastname" type= "text" size = "25" onBlur = "validLName()"/>
</br></br>
E-mail Address:</br><input name="email" type= "text" size = "25" />
</br></br>
Telephone Number:</br><input name="phone" type= "text" size = "25" onBlur = "validPhone()"/>
</br></br>
Comments:</br><textarea name = "other" rows= "10" cols="50"></textarea>
</br></br>
<input type = "submit" value = "Submit" /> <input type = "reset" value = "Clear form" /></p>
</fieldset>
</div>
</form>
1 Answer
- ChrisLv 75 years ago
There are multiple errors in your HTML and JS.
For now, let's focus on JS: the problem is simply that the code you added happens to be faulty.
Look at this line from validFName():
var fName = (contactForm.firstname.value, 10)
Curiously, this syntax doesn't even throw JS off. It happily assigns 10 to fName and carries on. Which is why the rest of the function does nothing, since the length of a number is "undefined", which is not smaller than 1.
Simply replace it with
var fName = contactForm.firstname.value
As for the other errors:
- the self closing tag is <br/>, not </br>
- you have an with a missing semi-colon
- the Contact Us link syntax is broken
- and most importantly: EVERY visible element goes INSIDE the <body> tag. Regardless of it being a header or footer. <body> is the counterpart to <head> (which contains non-visible data).
Also note that you can save a lot of HTML by using optimized CSS. Your form for instance wraps a <div> which wraps the form content. The div is only there to style the form, which you can do by actually styling the <form>:
<form style="display: block; margin-left: 150px; width: 600px">
<fieldset>
...
In your form you have lots of <br/>, but you can simply do this: http://jsfiddle.net/khrismuc/tLhL6br5/
Nice, clean HTML, and just a few keystrokes to change the spacing between form elements.
Finally, two completely subjective suggestions:
1. I prefer ending JS statements with a semi-colon. It's not necessary, but makes this weird itch I get go away ;)
2. Remove the Reset button. While I have only once in my life clicked on it accidentally and had to retype the entire form, the number of times I actually needed a reset button is precisely zero.
