JavaScript - Onchange Doesnt Work

I use a basic pop-up window code that i have used for many years. I probably need to update it, but i was wondering why it will work for every browser but IE8. Can anyone help?

Code:

function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,resizable=0,width=600,height=400,left = 540,top = 325');");
}

Code:

<a href="javascript:popUp('/email/agent/aid/<?php echo $this->agent->pers_code?>')"  >

can anyone see something that may cause the problem?

Thanks for any help!

Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )

Code:

$('nav li a').click(function() {
	$(this).parent().addClass('on').siblings().removeClass('on');
});

nav li is as follows


Code:

<nav>
   <li class="highlt">
     <a href="index.php" class="home"><span>Home</span></a>
</li>

The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work

function hasTagsInText(text)
{

if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0)
return 'table';


///this line of code doesnt work in firefox

Hi All,

Im trying to add some content by JS (which ive done) but i cant click a link i have made;

JS: Code:

function game() {
	document.getElementById('title').innerHTML =  '<p style="float: left; text-decoration: underline; font-weight: bold;">Deady Teddy</p><img  src=css/images/popup/close.png style="float: right; cursor: hand;" href="javascript: hideModal("modalPage");"></img>';
}

*Yes i know about the Href but if i put "onClick" it gives errors*;

HTML:

Code:

<a href="javascript:void(0);" onClick="javascript: revealModal('modalPage'); game();">Deady Teddy </a>

And place its adding it to:

Code:

<div id="modalPage">
	<div class="modalBackground"></div>
		<div class="modalContainer">
			<div class="modal">
				<div class="modalTop" id="title" onselectstart='return false'>
</div></div></div></div>

Any Idea's?

this is my code ______________________________________________________________


<pega:when test="$mode-input">
<script language="JavaScript">
function showNextButton()
{
handleClientEvent('SERVER','MakeScoreOrder','','-1'); /* fetches the data */
var submitClicked = "<p:r n='pyWorkPage.PFRSData.SubmitClicked' />";
var submitClicked = submitClicked.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var msg = "<p:r n='pyWorkPage.PFRSData.HasMessages' />";
var msg = msg.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
if (submitClicked == "" || msg =="true")
{

toggleSubmitBtn(0);
}
else if (submitClicked == "true" || msg =="false")
{
toggleSubmitBtn(1);
}

}


function toggleSubmitBtn(status)
{
var submitButton=document.actionForm.submitButton;
if(submitButton)
{
var parentTable=pega.u.d.findParentTable(submitButton);
if(parentTable)
if(status)
{
if(parentTable.style.display=='none' || parentTable.style.display=='')
{
parentTable.style.display='inline';
document.actionForm.submitButton.disabled=false;
}
}
else
{
parentTable.style.display='none';
document.actionForm.submitButton.disabled=true;
}
}
}


</script>

<button onClick="showNextButton();" id="PISSubmit" style="vertical-align:middle;">
<span class='buttonLeft'></span>
<span class='buttonMiddle'>
<span class='buttonText' onmouseover="this.className='buttonTextHover'" onmouseout="this.className='buttonText'">Submit</span>
</span>
<span class='buttonRight'></span>
</button>
</pega:when> ___________________________________________________________


On clicking PISsubmit button it should fetch data and display the next button(submitButton).. but on first click nothing happens on second click it fetches the data and third click it displays Next(submitButton)button.
Kindly help !!

Note: its in pega application.

Hello here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together please help me! thanks for any help here is my script

<head>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});

});

</script>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="leidyba/css/demo.css" />
<link rel="stylesheet" type="text/css" href="leidyba/css/styleleidyba.css" />
<link rel="stylesheet" type="text/css" href="leidyba/css/jquery.jscrollpane.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />




<div id="container">

<div id="header">
<h1>Easy Slider jQuery Plugin - Multiple sliders</h1>
</div>

<div id="content">

<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="slide/images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="slide/images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="slide/images/03.jpg" alt="Css Template Preview" /></a></li>

</ul>
</div>


<div class="container">

<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="ca-icon"></div>
<h3>Knygų leidyba</h3>
<h4>
<span class="ca-quote">&ldquo;</span>
<span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
</h4>
<a href="#" class="ca-more">plačiau...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Knygų leidyba</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my </p>
<p>When, while the </p>
<p>She packed her .</p>
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="ca-icon"></div>
<h3>Reklaminiai bukletai</h3>
<h4>
<span class="ca-quote">&ldquo;</span>
<span>I hold that the more </span>
</h4>
<a href="#" class="ca-more">plačiau...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Would you eat your dog?</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my .</p>
<p>When, while the </p>
<p>She packed her </p>
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>

</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="leidyba/js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="leidyba/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="leidyba/js/jquery.contentcarousel.js"></script>

<script type="text/javascript">
$('#ca-container').contentcarousel({
});


</script>
</div>

</body>
</html>

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?

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.

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?

Hi everyone. i hope you could help me for my problem. I want to place a value in the option when i change the contenent.

ie when i select North America
It shoulde be <option value='1'>Canada</option><option value='2'>United States</option> and so on and so fort...

Please help.


Code:

<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 ccountryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>

Code:

<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="1">North America</option>
    <option value="2">South America</option>
    <option value="3">Asia</option>
    <option value="4">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>

All,
If I have the following code:
Code:

<form name="datatoshow" id="datatoshow">
Want to learn more about the sie? Use the drop down menu:<br />
<select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);">
<option value="home">Home</option>
<option value="help">Help!</option>
<option value="refer">Refer a Friend</option>
</select>		
</form>

This doesn't do anything on the onchange. The code it's supposed to send to is:
Code:

function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}

This is in external js file. For some reason it doesn't send it and the alert never gets triggered.

Thanks.

I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA.

Code:

function resetInput()
  {
  y = document.getElementById("baseInput");
  y.setAttribute("value","0");
  }

And the HTML...

Code:

<select id="baseMethod" onchange="resetInput()">
      <option value="baseGrowth"   selected="selected">Annual Growth Rate (%)</option>
      <option value="baseTarget">Target Year Projection</option>
      </select>

      <input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br />

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!!