|
JavaScript - Onlick And Onchange Events?
Hello.
I'm new to JavaScript to any help in understanding would be great. For an html form, i'm am trying to have it so when a user clicks on the 'email' input box then a div element next to it displays "please make sure it's correct", and when they click out of the box (ie, to the next field), the message disappears again. I have managed to make it appear using this; Code: function displaymessage()
{
document.getElementById("message").innerHTML="please make sure your email address isn't fake.. you dick";
}
<input class="textbox" name="email" onclick="displaymessage()"<input type='<p id="message"></p>
BUT, how do i make it disappear when the user clicks out.. is it onchange()?.. if so, how. many thanks!! Similar TutorialsI've done extensive searching, but each example or explanation i come across is too different from my own, so it's ultimately no use. The problem is that I barely know anything when it comes to Javascript, but yet I'm trying to use it. I have a form on a page. This form contains 6 <select> elements, each with its own <option>Other</option> element. If something isn't listed, the user can choose "Other" and then type into a textbox which appears. I have the following code, which works great if only applied to one <select> element. Code: <select name="How did you hear about us?" id="How did you hear about us?" onchange="makeBox1()">
<option value="0" selected="selected">-- Select --</option>
<option value="1">Search Engine</option>
<option value="2">Referral</option>
<option value="3">Trade Publication</option>
<option value="4">Vendor Web Site</option>
<option value="5">Your Company Website</option>
<option value="6">Direct Mail</option>
<option value="7">Other</option>
</select>
<div id = "inputBox1"></div>
<script type = "text/javascript">
function makeBox1() {
var a = "<input type = 'text' name = 'box1' id = 'box1' class='form popup'>"
if (document.getElementById("How did you hear about us?").value==7) {
document.getElementById("inputBox1").innerHTML = a;
}
else {
document.getElementById("inputBox1").innerHTML = "";
}
}
</script>
I've read that you have to combine onchange events, but i have no idea how to do this (i've done plenty of trial and error, trying to make every item unique, but to no avail. How would i add more scripts like the above? Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC()
{
if(!document.images)
return
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Code: function dropdownimageMidS()
{
if(!document.images)
return
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
I am using a freebie script that changes css elements using onClick when you hit a button. I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list. 2 button examples (and js code) is: <input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" /> <input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" /> How do I convert this to a SELECT list?? Thank you! Hi all! code without "return false": <a onclick="javascript: this.disabled = 1;" href="www.abc.com"> IE6/7 : both disabled and link works IE8 : disabled works, link fails (stay on same page instead of going to www.abc.com) FF : disabled fails, link works code with "return false": <a onclick="javascript: this.disabled = 1;return false;" href="www.abc.com"> IE6/7 : same as above IE8 : same as above FF : disabled fails, link fails Please help! Thanks, Ken. This is what I have: http://page-test.co.uk/js-test.html ..and it works exactly how I want it to, but I need it to work by doing these two things: (a) If you see in the change_button function, I have hard coded the 'name_can_vary' name element. I need to do it so this isn't hard coded (so it can work on any page/form). (b) I don't want to change any of the HTML, and I only want to change the code used in the change_button function (otherwise I will need to change many pages). Thanks in advance. i have a link that references: <a href="My_Video.asx">video</a>. when you click, video will open in the "windows media player" and the parent window goes blank. how can i prevent the parent window from going blank? thank you for help julio I sometimes see that some people use this expression: event = event || window.event Why people need to do this? What does it mean? Hi guys, I'm a newbie so bear with me please. I downloaded this calendar which is now working great: JavaScript Calendar - Digital Christian Design (http://www.javascriptkit.com). Does anyone know how to change the date format from mm/dd/yyyy to dd/mm/yyyy? Also, is it possible to have links on such a calendar? I.e. in the event descriptions? Thanks. Hi Guys I have been trying to implement a way of using `onclick` to fill out a form field, with a Value assigned by a clickable rollover image. So i have a image rollover of a PC, i give the PC a Value? ID? of `PC No34` When the image is clicked it updates its Value of PC No34 to a Form text field which is named `pcid` the Form is on the same page as the PC rollover image. I have been trying most of the day but not getting it. Pls help Thanks for any help with this Willo I am having trouble understanding why this does not work? Code: <HTML>
<HEAD>
<TITLE>Event Loops</TITLE>
<SCRIPT TYPE="text/javascript">
function seturl(a,b,c,d,e)
{
this[0] = a;
this[1] = b;
this[2] = c;
this[3] = d;
this[4] = e;
}
function selectPage(list) {
var page = Math.floor(Math.random()*4);
winow.open(list[page],"Random_Page");
}
choices = seturl("http://www.google.com,
"http://www.yahoo.com,
"http://www.youtube.com,
"http://www.bing.com,
"http://www.xbox.com");
</SCRIPT>
</HEAD>
<BODY onLoad="selectPage(choices);">
<H1>Please Wait...</H1>
</BODY>
</HTML>
Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... i have a checkbox: Code: <input type="checkbox" id="my_checkbox" name="option2" value="Check" checked>Check i want to add an event to it so that i do something to a dom element when it is checked and when it is not checked.What is the event and how can i get its status? I was testing a required entry form, and i'm stuck. Code: <html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Username must be filled out!")==false)
{username.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Username: <input type="text" name="username" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
i have this so far. i want to add a password part. i know i would take Code: Password: <input type="text" name="password" size="20"> and put it underneath the username part in the codes., but i don't know to do the rest, with the error message poping up. i have placed a text box with onclick and onblur event. onclick shows contents(links) of a div tag below it and onblur hides the div basically it was a jquery based drop down menu but due to some problem I need to avoid jquery. Now the problem happens when a link of div tag is clicked. The link does not work due to onblur event on the textbox. Any suggestion? Quote: <input type="text" style="text-transform: capitalize;" value="" class="abd_txtfld" name="loc" id="loc" onclick="gettabcontentSearch('','')" onblur="hide()"/> <div id="cityddsearch" class="select_citydd" style="position: absolute; margin-top: 2px; left: 5px; display: none;"> <ul> <li><a href='../link1.asp'>link1</a></li> <li><a href='../link2.asp'>link2</a></li> <li><a href='../link3.asp'>link3</a></li> </ul> </div> hello, Im trying to write a program when the user clicks on the button, the textbox should display "how are you ". This is what I tried : <html> <head> <title>"Click"</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p> <input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'"> </p> <p> <input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'"> </p> <p> <button onclick="textbox1.value="how are you">Click Me!</button> </p> </body> </html> With input box if you type something and refresh the page, the previous words that you typed in will be filtered and be display in a scroll down form in which you can click it. My question is, when I click the input type is it possible to scroll down, and display values that comes from a database? It should also filter the scroll down results. If it's possible I don't know how to do it. I tried googling but I can't find an explanation on how to do it. Thanks. <input type="text" value="" onclick=""> I have a onChange value
Code:
var people = [
["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
];
var how = "Brothers";
function find()
{
if(document.getElementById("name").value == people [0] [0])
{
document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3];
}
if(document.getElementById("name").value == people [1] [0])
{
document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3];
}
document.getElementById("relateb").value = document.getElementById("name").value;
}
Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year
var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
document.getElementById('ageYear').innerHTML = taxYear;
document.getElementById('totalYear').innerHTML = taxYear;
Here is the jsp; Code: <tr>
<td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
<td align="left" >
<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*
</td>
</tr>
<tr>
<td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
<td align="left" colspan="1">
<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
<div id="errorage" class="warningmessage" style="display:none">
Please enter your Age to proceed.
</div>
</td>
</tr>
<tr>
<td colspan="2" class="basicboldtext">
<br/>
The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span>
<br/>
</td>
</tr>
Appreciate any help on this! Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. |
|||||||