JavaScript - Radio Field Onchange Background Colour

Hello,

On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button.
The first radio button is checked(selected) by default.
The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected).
The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed.
What is the correct syntax for referencing a hyphenated form input radio name in the onChange event?

Here is the form that works correctly with no hyphen in the input radio name:
Code:

<form name="myFormGood" action="" onsubmit="return false;">
Good Form with no hyphen in radio button name<br>
<input name="radio1" type="radio" value="4" checked> First Option<br>
<input name="radio1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option<br>
<input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Works!">
</form>

Here is the form that breaks the JavaScript because it has a hyphen in the input radio name:
Code:

<form name="myFormBad" action="" onsubmit="return false;">
Bad Form with hyphen in radio button name breaks JavaScript<br> 
<input name="radio-1" type="radio" value="4" checked> First Option<br>
<input name="radio-1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option. Nothing Happens.<br>
<input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Doesn't Work!">
</form>

I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is!

The line the body is onmouseover:
Code:

<p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>

The function is as follows
Code:

function switchElementColour(elementName){
	var tryId = document.getElementById(elementName);
	var yrf = tryId.style.backgroundColor;
	alert(yrf);

}

I've tried a number of different variations, including:
messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online
...but I keep coming back to the above.

The result is a blank alert box (no errors, just blank).
The element name is getting passed, because when I create an alert box in the function that looks like this:
Code:

alert(elementName);

The result is an alert box that says metallic (no quotation marks).

Au secours por favore?

Hi. I am looking for a way to have a button that toggles the background colour of my website.

So for instance, I will have one button called 'switch to light', when its clicked it switches the colour of the background to a light colour, and another button replaces this that says 'switch to dark', and so on.

The main problem is I have no idea how to store this information when the user is on the site so when the page is refreshed the colour is remembered. I am a complete newbie to Javascript, so any help will be greatly appreciated!

Thanks

Hi All,

I quite new to JavaScript and find myself stuck while trying to change the background colour of an input box.
I have an external js file and everything seems to work perfectly but for some reason I cant get the colour to change.
Any help is REALLY appreciated!

Code:

function validateID(id, name, value)
        {
		var regEx = /(abc)/;
		var result = regEx.test(value);
				
		alert(value + " " + result + " " + regEx + " " + name);
		
		if (result == true)
            {
		userFeedback(id, '<--Input Is Valid');
		document.getElementsByName(name).style.backgroundColor='green';
		    }	
		else
		    {
			userFeedback(id, '<--Error: Input Is Not Valid');
			    }
        }

Reply With Quote




01-12-2015, 11:35 AM #2
VIPStephan View Profile View Forum Posts Visit Homepage

The fat guy next door Join Date Jan 2006 Location Halle (Saale), Germany Posts 8,989 Thanks 6 Thanked 1,054 Times in 1,027 Posts

Don’t change styles with JavaScript. In order to separate the concerns (content/style/behavior) you should add/remove a class to the element and apply styles with CSS using that class as selector.
Every contemporary browser has a developer console built in, look into the JS console and see if there are any errors coming up.

Other than that, it helps if you posted a link to your page so we can see ourselves without having to guess.





Reply With Quote

01-12-2015, 11:59 AM #3
murtagh View Profile

I have a JS that works, but only on the first Dynamically created check box and once the colour has chaned it wont change back when clicked again

Please inspect my code to see exactly what I mean ...

Code:

<?php
function create_time_range($start, $end, $by='30 mins') {

    $start_time = strtotime($start);
    $end_time   = strtotime($end);

    $times = array();
    for ( ;$start_time < $end_time; ) {
        $times[] = $start_time;
        $start_time = strtotime('+'.$by, $start_time);
    }
    $times[] = $start_time;
    return $times;
}

// create array of time ranges
$times = create_time_range('0:00', '23:00', '1 hour');


// $times = create_time_range('9:30am', '5:30pm', '30 mins');

// format the unix timestamps
foreach ($times as $key => $time) {
    $times[$key] = date('H:i', $time);
}

//print '<pre>'. print_r($times, true).'</pre>';

$days = array(
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
);

$s_day = array(
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat',
);

?>



<!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>Untitled Document</title>
<style type="text/css">
legend{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	}
fieldset{
	width:300px;
	height:auto;
}
label{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	display:inline-table;
	width:50px;
	}
.short{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	display:inline-table;
	width:15px;
	}	
.on_lbl{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	display:inline-table;
	width:100px;	
}

#myfield{
	display: none;
}
#Toptions{

	}


</style>

<script type="text/javascript">
function disshow(num)
{
	var dayname = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
	document.getElementById('legend').innerHTML = dayname[num];
	document.getElementById('myfield').style.display = 'block';

}
/* Color Changes*/
function changeColour () {
    if (document.getElementById('Toptions').style.backgroundColor=='green') {
        document.getElementById('Toptions').style.backgroundColor='red'
    }
	else if (document.getElementById('Toptions').style.backgroundColor=='red') {
		document.getElementById('Toptions').style.backgroundColor=='green'
		}
}

</script>

</head>

<body>

	

    <?php    
// Days Active

    echo("<form method=\"POST\">");
	
	echo("<fieldset><legend>Days Active</legend>");
	
	 for ($i=0; $i<sizeof($days); $i++){
        echo("<div class=\"on_lbl\">
		<input type=\"checkbox\" name=\"dayOption\" value=\"" . $i . "\" id=\"option" . $i . "\">
		<label for=\"option" . $i . "\">" . $days[$i] . "</label>
		</div>");

  	}
	echo ("</fieldset>");

// Select Days for Schedule
	echo ("<fieldset><legend>Schedule Times</legend>");
 for ($i=0; $i<sizeof($s_day); $i++)
{
	
	echo("<input type=\"radio\" name=\"sdayOption\" value=\"" . $i . "\" id=\"opt" . $i . " \" onclick=\"disshow('$i')\">
	<label class=\"short\">$s_day[$i]</label>");
	
}
	echo("</fieldset>");
// Day: Schedule show Hours
echo "<div id=\"myfield\">";
echo("<fieldset><legend id=\"legend\">day</legend>");

for ($i=0; $i<sizeof($times); $i++)
{
	echo("<span id=\"Toptions\" style=\"background-color:green;\"><input type=\"checkbox\" name=\"timeOption\" checked=\"checked\" value=\"" . $i . "\" id=\"Toption" . $i . "\" onClick=\"changeColour()\">
	<label for=\"timeOption" . $i . "\">" . $times[$i] . "</label></span>");
}

//<input type=\"submit\" value=\"Save\">
echo ("</fieldset>"); echo ("<input type=\"submit\" value=\"Update\"><input type=\"submit\" value=\"Check All\"></form>");
echo "</div>";
?>

</body>
</html>

I am at my wits end and have spent over 2 hours looking into this...

Hi Guys, I have a little question...

I know that adding
Code:

onclick="document.body.style.backgroundColor='#F3B90C';

to a div will change the body background colour to the above colour..

But what I was wondering was this..

Is it possible, instead of adding the code to the actaul div itself to pass the function like this...
Code:

<script type="text/javascript"> 
    $("Object").click(function(){ 
    document.body.style.backgroundColor = "#000000"; 
}); 
</script>

Any help/info is appreciated


Kind regards,
paffley

I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/

I have also tried to use javascript to change a picture depending on the time of day, this is what I have used.

IN THE <head>

Code:

<script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
   // return TRUE if it's day

   if (hourofday > 7 && hourofday < 10) {
     return true;
   }
   return false;
}
</script><script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
   // return TRUE if it's day
   if (hourofday > 7 && hourofday < 10) {
     return true;
   }
   return false;
}
</script>

IN THE <body>

Code:

<div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
<script type="text/javascript">
if (sun()) {
  document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
} else {
  document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
}
</script>
</div>

go he

http://qodeplay.com/javascript



help me accomplish this and send this data to a mysql column!



note: the field will not grey out in ie.

Hi, I'm having a problem trying to get my html web form to work. I have a list of 8 radio button options for people to choose one option with the last option being other - and then I want if the user clicks other that the text field box next to it becomes a required field and the form will not submit until this text field is filled in. If the user selects one of the other radio button options then the text field is not compulsory.

I am using a linked javascript validation file which checks that all fields on the form which I have stated as required - become required, but I am having problems getting this "Other" button and text field to work with it all and not have the submit continue without this text field being completed! any help would really be appreciated! Thanks in advance!

I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons.

Code:

<script>

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
  return fnd;  
} 

function checkForm() {
 var chosen = getRBtnName('Consent');
 if (chosen < 0) {
  alert( "Please choose one answer when you are asked to select a number." );
  return false;
 } else { return true; }
}

</script>


<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
	
<table border="0" cellspacing="1" cellpadding="0">
 
  <tr>
    <td colspan="3">I consent to providing my electronic signature.</p></td>
  </tr>
  <tr>
    <td colspan="3" valign="top">
      <input type="radio" name="Consent" value="Y" />
      Yes
      
      <input type="radio" name="Consent" value="N" />
      No
   
      <table border="0" cellspacing="1" cellpadding="0">
                <tr>
          <td>I consent to electronic receipt of my information reporting documentation.</td>
        </tr>
        <tr>
          <td valign="top">
            <input type="radio" name="Consent1099YesNo" value="Y" />
            Yes
            
            <input type="radio" name="Consent1099YesNo" value="N" />
            No</td>
        </tr>
        <tr>
     <td valign="top">
      For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
        <input type="radio" name="USPersonYesNo" value="Y" />
        Yes
        
        <input type="radio" name="USPersonYesNo" value="N" />
        No</tr>
      </table>
       
           
 <input type="submit" value="submit" value="Submit" /> 
</form>

Any help would be greatly appreciated.

How do I do this? I've set up javascript to change the background colour depending on what colour square the user clicks on, this is working fine.

However, I want to be able to set an initial colour, other than white, and then let the user chose their own.

here is my code so far.

<script language="JavaScript">
<!--
function changeBGC(color){
document.bgColor = color;
}
//-->
</script>

Then on the buttons:

<a href="#" onclick="javascript:changeBGC('#486970')"><img src="images/blueSquare.jpg" alt="a" width="25" border="0" /></a>

<a href="#" onclick="javascript:changeBGC('#dd737b')"><img src="images/pinkSquare.jpg" alt="x" width="25" /></a>

<a href="#" onclick="javascript:changeBGC('#4f814e')"><img src="images/greenSquare.jpg" alt="cx" width="25" /></a>

<a href="#" onclick="javascript:changeBGC('#594b31')"><img src="images/brownSquare.jpg" alt="s" width="25" /></a>

<a href="#" onclick="javascript:changeBGC('#ffffff')"><img src="images/whiteSquare.jpg" alt="x" width="25" /></a>

I want the page to be initially set to the brown colour, then I want the user to be able to choose their own colour.

Thanks for any help.

How can I style the background of a radio button? I have a form where it validates the users has selected one of the radio group values. If they don't the group gets focus and I would like to highlight the radio group. I tried the below it it seems focus goes to the correct group but no background changes. Now I know you can change the background of radios and apply a border of you would like. What am I doing wrong woth this.
Code:

<script type="text/javascript">


function validate(){

document.forms[0].myradio[0].checked = true 


document.forms[0].myradio[0].style.border='2px dotted #00f';


document.forms[0].myradio[0].style.backgroundColor='#ffff99';




}


</script>
















<form name="test" name="theForm" onsubmit="validate()">
<input type="radio" name="myradio" />
<input type="radio" name="myradio"  />
<input type="radio" name="myradio" />
<BR>
<BR>
<BR>
<BR>

<input type="radio" name="myradio2" />
<input type="radio" name="myradio2"  />
<input type="radio" name="myradio2" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="submit" value="submit" name="submit">

</form>

Pleas how can i change div bg color with active chcecked radio button

<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div>

- if checked, change color from #fff to #ccc


For checkboxes i find this
<span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span>

Thnx for help in advance

Hello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding.

I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again.

If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off.

Please help. Thanks

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.


Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.