JavaScript - Retain Onchange Value To Run Function Again On Refresh

I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input.

I would welcome any help.

I just can not seem to get it to work.

Code:

<script language="javascript" type="text/javascript">
    function checkQuantity(frm) {
        var succesful = false;
        var numQuantity;
        numQuantity = parseInt(frm.Quantity.value);
        var numTotalPrice;

        if (numQuantity != 0) {
            numTotalPrice = numQuantity * 4;
            frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
            successful = true;
        }
        else {
            alert("Sorry must order more than 0");
            successful = false;
        }
        return succesful;
    }
            

</script>

Code:

<form action=""  onsubmit="return checkQuantity(this)" style="width: 193px">
                   
                    <table cellpadding="4" style="width:111%">
                        <tr>
                            <td class="style1">
                                Quanity:</td>
                            <td class="formInputCell">
                                <input name="Quantity" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                            <td class="style1">
                                Total Price $
                            </td>
                            <td class="formInputCell">
                                <input name="TotalPrice" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                        <td class="style2"></td>
                        <td><input id="Submit1" type="submit" 
                        value="Buy Now" class="buttonstyle" /></td>
                        </tr>  
                    </table>    
                    </form>

I've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works.
Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted.
The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;">
<option selected="selected">Loading</option>
</select>

The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to.
But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that.
Does anyone have any thoughts on what I can do?

Hello ,,,

I have a a php form where there a drop down list and a text box which is show and hide based on drop down list select value. This part work perfectly with js
Code:

<script type="text/javascript">

    function showfield(name){
    if(name != 'High School')
    document.getElementById('div1').style.display="block";
    else 
    document.getElementById('div1').style.display="none";
  }

  function hidefield() {
    document.getElementById('div1').style.display='none';
 }
<script>

<body onload = "hidefield()">

<select name="education" size="1" class="text" id="education" onchange="showfield(this.options[this.selectedIndex].value)">

The problem is when I click submit and the validation appear the div also hide ,,,

I want to retain the style of the div after submit to be as it was before submit... meaning if it was appearing then it should still appear after submit coz there is validation on it as well.

Hope I can found an answer coz Im trying since a week

I'm using a plugin in Wordpress that checks for mobile browsers and sets a variable to "true" if a mobile browser is being used. I have a script I want to use on the same page where I'd like to use that variable rather than have to redo the check again. Is it possible to make a variable in one script global so that it can be used in a separate script on the same page? Greatly simplified, I mean ...
Code:

<script type="text/javascript">
  var A = 1;
</script>

<script type="text/javascript">
  Do something with A;
</script>

Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code:

Code:

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"  onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  C  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box?

<?php
session_start();
include_once "../c-library/errorcheck.inc.php";
function viewForm($input,$errors){

//$array[] = $var;

$num_days= array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21 ","22","23","24","25","26","27","28","29","30","31");

$num_months = array(1=>"Jan",2=>"Feb",3=>"Mar",4=>"Apr",5=>"May",6=>"Jun",
7=>"Jul",8=>"Aug",9=>"Sept",10=>"Oct",11=>"Nov",12=>"Dec"
);
$gender = array("Male","Female");



?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>

<script src="reload_vals.js" type="text/javascript"></script>
<style media="all">
table{ table-layout:auto; width:auto;}
th{ text-align:right;}
td #err{ color:#FF0000; font-weight:bold;}
</style>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" >
<h3><font face="Georgia" color="#000066" size="+2">Registeration</font></h3>
<?php
if (count($errors) > 0):

echo "<p style='color:#ff0000'>*The following errors ocurred:</p>";

endif;

?>
<table width="" border="1">
<tr>
<th scope="row">Firstname:</th>
<td><input name="fname" type="text" id="fname" size="28" value="<?php echo htmlentities($input['fname'])?>" /></td>
<td id="err"><?php echo $errors['fname'] ?></td>
</tr>
<tr>
<th scope="row">Lastname:</th>
<td><input name="lname" type="text" id="lname" size="28" value="<?php echo htmlentities($input['lname'])?>" /></td>
<td><?php echo $errors['lname'] ?></td>
</tr>
<tr>
<th scope="row">Date of Birth:</th>
<td>
<select name="days" size="1" id ="days" >
<option value='-------'>--Day--</option>
<?php
/* day starts here*/

(array)$num_days;
foreach ($num_days as $day):
printf("<option value=\"%s\" %s>%s</option>",$day,($days==$day ? "selected='selected'" : ""),
$day);
endforeach;
/* day ends and months start here*/
?>
</select> <select name="" size="1" id ="">
<?php






/* month ends and starts here*/
?>
</select><select name="" size="1" id ="">
<?php

?>
</select>
<br /><small style="text-align:center; color:#006600;">dd-mm-yyy</small> </td>
<td><?php echo $errors['date'] ?></td>
</tr>
<tr>
<th scope="row">Sex:</th>
<td>
<select name="" size="1" id ="">
<?php
/*
Sex selection starts here;*/



/*
Sex selection starts here;
*/
?>
</select></td>
<td><?php echo $errors['sex'] ?></td>
</tr>
<tr>
<th scope="row">Email:</th>
<td><input name="email" type="text" id="email" size="28" value="<?php echo htmlentities($input['email']) ?>"/></td>
<td><?php echo $errors['email'] ?></td>
</tr>
<tr>
<th scope="row">Password:</th>
<td><input name="password" type="password" id="password" size="28" value="<?php echo htmlentities($input['password']) ?>"/></td>
<td><?php echo $errors['password'] ?></td>
</tr>
<tr>
<th scope="row">Comfirm Password:</th>
<td><input name="password2" type="password" id="password2" size="28" value="<?php echo htmlentities($input['password2']) ?>"/></td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">I agree:</th>
<td><input name="agree" type="checkbox" id="agree" value="<?php echo $input['agree']='agree'?>" /></td>
<td><?php echo $errors['agree'] ?></td>
</tr>
<tr>
<th scope="row"><input name="action" type="hidden" id="submitted" value="TRUE" /></th>
<td><input name="add_newuser" type="submit" id="submit" value="I accept, Register me" /></td>
<td>&nbsp;</td>
</tr>
</table>


</form>

</body>
</html>
<?php
}
function register_user($input){
include "../c-library/database.inc.php";
//

$input = $_REQUEST;

$input['fname'] = mysql_escape_string(stripslashes($input['fname']));
$input['lname'] = mysql_real_escape_string(stripslashes($input['lname']));

//$input['day']

$input['date'] = $input['year'].''.$input['month'].''.$input['day'];
$input['sex'] = $input['sex'];

$input['email'] = mysql_real_escape_string($input['email']);
$input['password'] = mysql_real_escape_string(md5($input['password']));



$input['uid'] = uniqid(rand(16,32),true);
$qr ="insert into users(id,Firstname,Lastname,Date_of_Birth,Sex,Email,Password,Userid) values('null','$input[fname]','$input[lname]','$input[date]','$input[sex]','$input[email]','$input[password]','$input[uid]')";

$results = mysql_query($qr,$sdayb);
return $results;
mysql_close($sdayb);
echo "thanks";//header("Location: thankyou.html");

}
/*ex. user enters - 19/11/1980

$var = explode('/', '19/11/1980');
$sdayd = $var[0];
$mm = $var[1];
$yyyy = $var[2];
*/

if(isset($_POST['add_newuser'])):

$inputs = $_POST;
$setErrors = array();

if(!check_formerr($inputs, $setErrors)):
viewForm($inputs, $setErrors);
else:
register_user($inputs);
endif;

else:
viewForm(null, null);
endif;


?>

Hi,

I have the below code:
Code:

<script type="text/javascript">
function loadQuickMessageCheck(File,ID){

var xmlhttp; 

if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
	 eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>

But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh.

I even found this nice piece of code which worked for someone else.
Quote:

try{window.clearTimeout(tRefresh)} catch(err) {}
tRefresh = setInterval(setContext, varInterval*60*1000);
}
I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster.

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>&nbsp;is &euro;<span id="totalTax2"></span>
    		<br/>
    	</td>
    </tr>

Appreciate any help on this!

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?

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.

Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have.

Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is:

Code:

<select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>

So how would JavaScript be able to accomplish this?

Hi,

I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code:

Code:

<html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>

</body>
</html>

Thank you.

Hi there - this seems like it should be an obvious problem - can anyone spot it?

I have an object, declared this way:


Code:

var FK_gid = new picChooser('FK_gid', FK_gidArray);
FK_gid.init();

and a select group like this:
Code:

<select id = "FK_gid" name = "FK_gid">

		<option value="none" selected="true" >None</option>
		<option value="335" >pics/zoobins.jpg</option>
etc. etc. 
</select>

picChooser in construction sets the onchange of the select group like this:

Code:

this.list = document.getElementById('FK_gid');

    
this.list.setAttribute("onchange", "FK_gid.displayImage();");

and the object's displayImage(); is like this:

Code:

this.displayImage = function () {
        
        this.clearImage();
        
        if (this.list.selectedIndex != 0)
        {
            pic = new Image();
            pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML);
            
            img = document.createElement("img");
            img.src = pic.src;
            this.preview.appendChild(img);
            
        }
       
     
    }

But whenever I choose something else off the list I get this error message:

Code:

TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function.

It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly...

Any ideas?

Thanks
Edd

i keep getting the following error: -
there is no attribute "onChange"

Code:

<select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>

I am trying to create an onChange action that will validate that confirmation checkbox has been checked, and if not, popup an alert message and put the focus on the checkbox input and change the class of the container DIV to "highlight".

Here is the form, with the 'onchange' trigger:

Code:

<form id="checkout" name="my_form" method="post" action="!---SCRIPT_NAME---" onsubmit="return validForm(this);">	
<div id="verification" class="aligncenter required">
  <input type="checkbox" id="verified" name="verified" value="" /> <label for="verified">YES</label>, the items and quantities shown above are correct.</div>
<div class="required"><label for="name">Name:</label><input id="name" name="contactname" type="text" class="L" onchange="" /></div>
<div class="required"><label for="company">Company Name:</label><input id="company" name="company" type="text" class="L" /></div>
<div class="buttonRow"><input type="submit" name="VERIFY" class="btn red" value="Continue" /></div>
</form>

And here is my javascript code:

Code:

function verifyOrder() {
  if (document.my_form.verified.checked != "true") {
    alert("Please verify the contents of your order");
    document.my_form.verified.focus();
    getElementById('document.my_form.verification').className='highlight'
    return false;
  }
}

But this is not working and generates errors in firebug.

What am I doing wrong? Thanks!!