JavaScript - Javascript - Buttons Select And Unselect Issue

I have the following buttons ...

Code:

<input id="newTaskButton" type="button" name="Good Morning" value="201"  />
<input id="newTaskButton" type="button" name="Hello World" value="201"  />

... and the following javascript ...

Code:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#newTaskButton").click(function() {
            	alert(" " + document.getElementById("newTaskButton").name);
            });
        });
    </script>

... but I am having some trouble having the second button to response.

My objective is to have 2 or more button that have the same click function (in this case, newTaskButton) but when clicked, it will produce different response. (in this case, the first button will response 'Good Morning' while the second button will response 'Hello World')

Appreciate any help. Alternatives are welcome too.

To be clear my approach to coding is basically that of building some kind of Java Frakenstein's Monster... which also explains why everything I create invariably ends up in a windmill on fire...


This is what I have managed to put together so far:

Code:

<script type="text/javascript">
var homeDown = new Array()
homeDown[0] = "images/home001.png";
homeDown[1] = "images/home002.png";
homeDown[2] = "images/home003.png";
homeDown[3] = "images/home004.png";
homeDown[4] = "images/home005.png";
homeDown[5] = "images/home006.png";
homeDown[6] = "images/home007.png";
homeDown[7] = "images/home008.png";
homeDown[8] = "images/home009.png";
homeDown[9] = "images/home010.png";
homeDown[10] = "images/home011.png";
homeDown[11] = "images/home012.png";
homeDown[12] = "images/home013.png";
homeDown[13] = "images/home014.png";
homeDown[14] = "images/home015.png";

var homeOver = new Array()
homeOver[0] = "images/image001.png";
homeOver[1] = "images/image002.png";
homeOver[2] = "images/image003.png";
homeOver[3] = "images/image004.png";

var x=0;

function NormalImage()
{
document.getElementById("button1").src="images/home.png";
}


function MouseOver()
{
document.getElementById("button1").src=homeOver[x];
x++;
setTimeout("MouseOver()", 8);
}


function MouseDown()
{
document.getElementById("button1").src=homeDown[x];
x++;
setTimeout("MouseDown()", 8);
}
</script>

...and the HTML:

Code:

<a href="http://www.google.com">
	<img id="button1" src="images/home.png" onmousedown="MouseDown(button1)" onmouseover="MouseOver(button1)"
onmouseout="NormalImage(button1)"/>
</a>

I'm sure that's probably the wrong way of doing it but it vaguely works. What I ultimately want is a button that will play the long image sequence on click and the shorter sequence on mouse over.

However at the moment it appears that the states of the mouse being over and clicked are clashing so I need something to ignore mouseover images on click and another bit to reset the count on mouseover so it can play again.

If I remove the mouseover event the animation on mousedown plays well, though I suspect it might be necessary to preload the images when it's online.


Alternatively if anyone feels like writing a much easier bit of script that will do the same thing and slap me for being stupid that is acceptable too...

how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks

thanks peeps

Hello. I am a new user.
I have got a website, www.eastbourneinks.co.uk where the quantity buttons (+) & (-) do not work on most computers where I have had feedback. Is there any way of making them work on any/all computers. This is one of the pages:
http://eastbourneinks.co.uk/product/...nk-cartridges/
Many thanks.
Phil.

I can't get the radio buttons to work properly in my browser. If you don't press one the alert box does not tell you that you have to tick either male or female. Also I noticed you can tick both but it won't say you must choose only one, how can I sort this...any help please.

case "radio_hidden":
if (fld.value != "1")/* radio male or female button should be checked*/
{
fld.valid = true;
}
break;

if (frm.radio_hidden.valid == false)
{
report_text += " You must click a radio button male or female.\n\n"
}

<br><u>Select Your gender:</u><br>

<input type="radio" name="male" value="" onchange="radio_hidden.value = 1;"> Male
<br>
<input type="radio" name="female" value="" onchange="radio_hidden.value = 1;"> Female
<br>
<input name="radio_hidden" value="" type="hidden">

I'm currently working at school on a website and I cycled through aloooot of tutorials, but I couldn't find anything >.<
so the qeustion is how to make a VERY simple javascript div tag replacer using buttons.
so if I click for example button 1 then I want div tag 1 replaced with div tag 2 and when you press button 2 div tag 1 or 2 gets replaced with div tag 3.
the closest tutorial I found was: Replace one div with another

Hi, I'm a year 11 student studying GCSE computing. I'm doing a project and I need to conduct some primary resarch, so I would be grateful if someone could explain to me how to go about coding radio buttons in a HTML web page which uses JavaScript.
Thank you!

Hello to all and thank you for any help beforehand.

I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct.

I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script.

Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select

Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js

test.html
Code:

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

Here's the content of getCities.php
Code:

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

hi,
i tried to run the following code with IE but it gives error as
" document.try.radiogrp is null or not a object."

<code>
<html>
<head>
<script language="javascript">
function fresh()
{ document.write("question 1's options are")
document.write("option 1:"+document.try.radiogrp[0].value+"<br/>")
document.write("option 2:"+document.try.radiogrp[1].value+"<br/>")
document.write("option 3:"+document.try.radiogrp[2].value+"<br/>")
}
</script>

</head>
<body>
<form name="try" >
<input type="radio" name="radiogrp" id="r1" value="yes">yes
<input type="radio" name="radiogrp" id="r2" value="no">no
<input type="radio" name="radiogrp" id="r3" value="may be">may be
<input type="button" value="begin" onClick="fresh();">
</form>
</body>
</html>
</code>
please help me find the error and run it correctly with IE.
thanx...

Hello!
I am trying to set up a javascript to code radio buttons as images a la this site: http://www.shopbop.com/swan-ruffle-n...her-shopbysize

I have been playing around w/ a couple scripts I found online, but haven't been able to find one that works very well. Some of them are too broad & just change all the buttons to a general selected/unselected image. I would want it to apply to different sizes & colours. If anyone could help me or point me in the right direction that would be great!

Oh, & if it makes any difference I am working w/ 3d cart.

Can anyone tell me how I can use JavaScript to check to see if a radio button is checked. I tried the code below, but that doesn't work.

<script type="text/javascript">
function hideAll() {
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
}
</script>
<script type="text/javascript">
function doIt() {
var q = document.getElementsByName('q');
for(var i = 0; i < q.length; i++){
if(q[0].checked == true){
document.getElementById("existing").style.display="none";
document.getElementById("delivery").style.display="none";
window.location="cust-query2.php?cust_id=0";
}
else if(q[1].checked == true){
document.getElementById("existing").style.display="";
document.getElementById("delivery").style.display="none";
}
else if(q[2].checked == true){
document.getElementById("delivery").style.display="";
document.getElementById("existing").style.display="none";
}
}
}
</script>
</head>

<body onLoad="hideAll()">
<div align="center">
<table width="70%" border="0">
<tr valign="top">
<th scope="row"><h2 align="left">Please Select an Option:</h2>
<form name="myform" onSubmit="doIt()" action="">
<p align="left" class="indent">
<input type="radio" name="q" value="0">
<label>New Customer</label>
<br />
<input type="radio" name="q" value="1">
<label>Existing Customer</label>
<br />
<!--<input type="radio" id="q" value="s">
<label>Customer Search</label>
<br />-->
<input type="radio" name="q" value="2">
<label>Print Delivery Information</label>
<br /><br />
<input type="submit" value="Submit" />
</form>
</p>
<div id="existing" align="left" class="indent">
<form action="cust-query2.php" method="post">
Enter Phone Number:
<input type="text" name="cust_id" />
<input name="submit" type="submit" />
</p>
</form>
</div>
<div id="delivery" align="left" class="indent">
<form method="post" action="search_delivery_by_date1.php">
Enter Date: <input type="text" name="date" />
Enter Time:
<select name="ampm">
<option>AM</option>
<option>PM</option>
</select>
Enter City:
<select name="city">
<option>Boro Park</option>
<option>Flatbush</option>
<option>Williamsburg</option>
</select>
<input type="submit" value="Print Delivery Information">
</form>
</div>
</td>
</tr>

I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with:
Code:

function ObjButtonBuild() {
  this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
  this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
  this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
  if(this.accessKeyValue && this.accessKeyValue!=null){
  
  	this.divInt+=' accessKey='+this.accessKeyValue+' ';
  }
  
  if( this.altName ) this.divInt += ' title="'+this.altName+'"'
  else if( this.altName != null ) this.divInt += ' title=""'
  this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
  if( this.altName ) this.divInt += '" alt="'+this.altName
  else if( this.altName != null ) this.divInt += '" alt="'
  this.divInt += '" width='+this.w+' height='+this.h+' border=0'
  if( !is.ns4 )  this.divInt += ' style="cursor:pointer"'
  this.divInt += '></a>'
}

Code:

button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()

I am building an online store where the customer can select custom parts. I'm quite new to javascript, but I've managed to create a radio button list, where the price is added from each section.

I would like a box to show all of the options selected, not just the sum total.

I've included the text with value and used parseInt. I have been told I can use value.split(" "), but I don't really know how to go about doing that. I've been fiddling for hours now and don't seem to be able to get anywhere.

I would also like to include a 3rd value, another number, and add that one in a separate calculation.

E.g. For "50 5850ati1gb 56" I would like one calculation which adds 50 to the total, another calculation adding 56 to a different total and 5850ati1gb added to a list of all of the components.

I am not very experienced with this, so don't be afraid to talk to me like I'm stupid! Thank you in advance.

My code so far:
Code:

<head>
    <script type="text/javascript">
        function DisplayPrice(price){
                        var val1 = 0;
                        for( i = 0; i < document.form1.part.length; i++ ){
                                if( document.form1.part[i].checked == true ){
                                        val1 = document.form1.part[i].value;
                                }
                        }

                        var val2 = 0;
                        for( i = 0; i < document.form2.part2.length; i++ ){
                                if( document.form2.part2[i].checked == true ){
                                        val2 = document.form2.part2[i].value;
                                }
                        }

        var val3 = 0;
                        for( i = 0; i < document.form3.part3.length; i++ ){
                                if( document.form3.part3[i].checked == true ){
                                        val3 = document.form3.part3[i].value;
                                }
                        }


                        var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
            document.getElementById('totalSum').value=sum;
        }
    </script>
</head>
<body>
    <form name="form1" id="form1" runat="server">
       <br>
       <input id="rdo_1" type="radio" value="0 1.8ghz2xAMD" name="part" checked="checked" onclick="DisplayPrice(this.value);">1.8Ghz Dual Core AMD
        <br>
        <input id="rdo_2" type="radio" value="50 2ghz2xAMD" name="part" onclick="DisplayPrice(this.value);">2Ghz Dual Core AMD
        <br>
    </form>Choose your memory:<br />
    <form name="form2" id="form2" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="0 1333corsair1gb" name="part2" checked="checked" onclick="DisplayPrice(this.value);">1333 Corsair 1GB
        <br>
        <input id="rdo_2" type="radio" value="50 1333corsair2x1gb" name="part2" onclick="DisplayPrice(this.value);">1333 Corsair 2x1GB
        <br>
    </form>Choose your graphics card:<br />
    <form name="form3" id="form3" runat="server">
        <br />
        <input id="rdo_1" type="radio" value="0 5830ATI1gb" name="part3" checked="checked" onclick="DisplayPrice(this.value);">1GB ATI 5830
        <br />
        <input id="rdo_2" type="radio" value="50 5850ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5850
        <br />
        <input id="rdo_3" type="radio" value="75 5870ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5870
        <br />
    </form>
</body>

I have a site that works just fine in fire fox but surprise surprise, there is a lot of problems in IE8 that dont make sense at all.

Here is my link:

http://paperlesswasp.com/royalvillicus/recompare.php

Code:

<span class="menu1" id="menu1">

<map name="menu1" id="menu1">
<area alt="memberships" shape="rect" coords="134, 143, 176, 166" href="http://realtor.com"/>
<area alt="memberships" shape="rect" coords="188, 143, 231, 166" href="http://realestate.yahoo.com/"/>
<area alt="memberships" shape="rect" coords="243, 143, 285, 166" href="http://realestate.com"/>
<area alt="memberships" shape="rect" coords="297, 143, 340, 166" href="http://frontdoor.com"/>
<area alt="memberships" shape="rect" coords="351, 143, 394, 166" href="http://homes.com"/>
</map>
<img src="image/rsummary.png" alt="site comparison" usemap="#menu1" width="" height="" vspace="5" hspace="1"/><br><br>

</span>


<span id="ex_10" style="display:none;">

<img src="image/rranking.png" name="ex_4" id="ex_4" alt="ranking" width="" height="" vspace="5" hspace="1"/><br>

</span>


<span id="ex_9" style="display:none;">
<img src="image/relistings.png" name="ex_5" id="ex_5" alt="listings" width="" height="" vspace="5" hspace="1"/><br>
</span>


<span id="ex_6" style="display:none;">
<img src="image/relistingsearches.png" name="ex_6" id="ex_6" alt="listings searches" width="" height="" vspace="5" hspace="1"/><br>
</span>


<span id="ex_7" style="display:none;">
<img src="image/recalculators.png" name="ex_7" id="ex_7" alt="calculators" width="" height="" vspace="5" hspace="1"/><br>
</span>

<span id="ex_8" style="display:none;">
<img src="image/reresources.png" name="ex_8" id="ex_8" alt="resources" width="" height="" vspace="5" hspace="1"/><br>
</span>

<span id="ex_11" style="display:none;">
<img src="image/remarketdata.png" name="ex_8" id="ex_8" alt="resources" width="" height="" vspace="5" hspace="1"/><br>
</span>

if you look under:

http://paperlesswasp.com/royalvillicus/calculator.php

IE8 will only show 2 out of the 7 drop down menu bars that are suppose to be there.

works in IE8 and firefox
Code:

<img src="image/wroi.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" onclick="showMe(12)" vspace="1" hspace="1" class="position"><br><br>

works only in firefox
Code:

<img src="image/wtax.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" onclick="showMe(11)" vspace="1" hspace="1" class="position"><br><br>

Fire fox handles these just fine, but IE8 doesnt.

I appreciate any siggestions