JavaScript - Change Background Colour Of Field Dependant On Value?

Hi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red.
Thanks

Hi i am trying to change the colour of the text in my menu bar, i know you can do this with css or jquery but i want to try and do it with javascript in an external script sheet. I want to use the onmouseover and onmouseout functions to change the colours, and i want it so their are different colours for each menu item.

Can anybody help me?

Hi All
I'm trying to get a drop down box to change the colour of more than 1 td cell at a time. I can get the boxes to work with single cells but not more than one. I've tried giving the additional cell the same id but that doen't seem to work It's probably simple but I just can't seem to see it. Thanks in anticipation.
Mike
http://www.blandfordsac.co.uk/
Code:

<script type="text/javascript">function changeColor(bg) {document.getElementById("a").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorb(bg) {document.getElementById("b").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorc(bg) {document.getElementById("c").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColord(bg) {document.getElementById("d").style.backgroundColor = bg;}</script>

Code:

<tr><!-- row 1 -->
<td id="a" height="205" width="345"><p align="center">
<a href="images/bd8/bd8n.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8n%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8n.jpg">
</a>
</td>
<td height="205" width="246" colspan="3"><h1 align="center"><span style="font-weight: 400"><font face="Arial">Bd 8</font></span></h1></td>
<td id="b" height="205"><p align="center">
<a href="images/bd8/bd8e.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8e%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8e.jpg">
</a>
</td>	
</tr>		
<tr><!-- row 2 -->
<td>
<p align="center">
<select name="level" onChange="changeColor(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
<td height="59" width="246" colspan="3">&nbsp;</td>
<td>
<p align="center">
<select name="level" onChange="changeColorb(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
</tr>

Hi,
I have 3 sum fields which I want to change to a red colour if the value is > or < 100.
Apparently this is a DAP, but I am using javascript to tweek some of the settings in DAP.

function subtotal()
if(document.getElementById("Sum1").value>100&&<100)
{
this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: red'
{
else
this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966'
</SCRIPT>
<SPAN class=MSTheme-Label id="Sum1_Label"
style="Z-INDEX: 1; LEFT: 0.25in; OVERFLOW: hidden; WIDTH: 0.711in; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.161in">Totals:</SPAN><SPAN
class=MsoBoundSpan id="Sum1" onmouseover="subtotal()" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 5.416in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 1</SPAN><SPAN class=MsoBoundSpan
id="Sum2" onmouseover="subtotal()" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 2</SPAN><SPAN class=MsoBoundSpan
id="Sum3" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 7.917in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 3</SPAN></DIV>

I'm a noobie at coding, and I was wondeirng if anyone can help me with the coding.

Many Thanks

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

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

how to change placeholder text colour in javascript?

Code:

<script>
// this is inside a html form
form['height'].placeholder+="enter password";
</script>

how do I change the text above from grey to a different colour?

Also, how do I check for isnotanumber in a form submission?

Code:

if(isNaN(form['weight'].value)) {
			console.log('use a number');

it still outputs that console.log error!!!!!!!!!

Greetings,

I'm working on a php/mysql app that has multiple tabs with multiple form fields. I am trying to incorporate a javascript form field detection function that alerts the user that they have not submitted their changes if they try to navigate away. The detection works as designed, but the problem I am having is when the form is submitted, the script senses an unload and still fires the alert. The form submits to itself and updates the database and then reloads the page with the new values. Is there a way to have the script ignore the forms submit url and skip the form check?

Here is the code ( NOT mine, found it somewhere else.)

Code:

<script language="javascript">
  var ids = new Array('description');
  var values = new Array('<?php echo $detail['description']; ?>');
  
  function populateArrays() {
    // assign the default values to the items in the values array
    for (var i = 0; i < ids.length; i++) {
      var elem = document.getElementById(ids[i]);
      if (elem)
        if (elem.type == 'checkbox' || elem.type == 'radio')
          values[i] = elem.checked;
        else
          values[i] = elem.value;
    }      
  }
  var needToConfirm = true;
  
  window.onbeforeunload = confirmExit;
  function confirmExit() {
    if (needToConfirm) {
      // check to see if any changes to the data entry fields have been made
      for (var i = 0; i < values.length; i++) {
        var elem = document.getElementById(ids[i]);
        if (elem)
          if ((elem.type == 'checkbox' || elem.type == 'radio') && values[i] != elem.checked)
            return "Your changes have not been saved. Are you sure you want to leave?";
          else if (!(elem.type == 'checkbox' || elem.type == 'radio') && elem.value != values[i])
            return "Your changes have not been saved. Are you sure you want to leave?";
      }
      // no changes - return nothing      
    }
  }
</script>

The url of the page is "edit.php?&mode=edit&t=2&id=284&cn=2009-002"
The only detectable change to the query string would be the 't' variable.

Basically what I want to do is have the script look for a change in the 't' variable and if detected, check the form values for changes. If 't' doesn't change, skip the script completely.


Thanks..

Hello, I am needing the coding to do the follow:

When a user makes a selection from a dropdown, the value is placed in a text input.

SELECT >>> INPUT

Thank you so much for your help!

I have a form that has several dependant drop down boxes and copies all of the selections to a text box so you can paste the results to another location. I am using this in training to simulate the selections they will make in the actual system.

I would like for the last selection to be a link instead of another drop-down box so that I can direct them to more information (a step by step) based on their selections.

I am including a scaled down version of my code below. It actually has 8 possible selections for code 1 and 83 for code 6.

I have looked at http://www.outfront.net/tutorials_02/faq.htm#DropDown but am not sure how to adapt it to work with the dependant boxes.

Any help would be greatly appreciated!

Code:

<html>

<head>

<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1


var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1


var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12


var arrItems4 = new Array();
var arrItemsGrp4 = new Array();

arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42


var arrItems5 = new Array();
var arrItemsGrp5 = new Array();

arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133


var arrItems6 = new Array();
var arrItemsGrp6 = new Array();

arrItems6[500] = "http";
arrItemsGrp6[500] = 244

function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}

function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
<script language='Javascript'>
function listChoices() {
var textStr='';
var aSel=document.getElementsByTagName('select');
for(var i=0; i<aSel.length; i++) {
    if(aSel.length>1) {
        textStr+=aSel.name+": "+aSel[aSel.selectedIndex].text+",";
        }
    }
document.form.text1.value=textStr;
}
</script>
</HEAD>

<BODY>

<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="listChoices(); selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
</select></font></font></td>
<td width="220" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif">    Code 2: 
<select id="secondChoice" name="Choice1" onchange="listChoices(); selectChange(this, 2); "></select></font></td>
<td width="220" align="center" rowspan="5">
<TEXTAREA name="text1" cols="24" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif">    Code 3: 
<select id="thirdChoice" name="Choice2" onchange="listChoices(); selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif">    Code 4: 
<select id="fourthChoice" name="Choice3" onchange="listChoices(); selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2">    Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="listChoices(); selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<p><font face="MS Sans Serif" size="2">    Code 6: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="listChoices(); selectChange(this, 6); alert('Reminder') " size="1"></select>
</font></p></td>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2">          Link: </font> <font size="3" face="Courier">
<select id="seventhChoice" name="Choice6"></select></font></td>
<td width="220" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</table>
</div>
</form>

</body>

</html>

Hi! I want to insert flash player on my page, that user can change flv source. But I dont know how to make input field that change flv source. I tried to insert input field and button but dont know how to make it working, please help me Here is my flvplayer embed code:

<script type="text/javascript" src="http://flvplayer.com/free-flv-player/flvplayer/swfobject/swfobject.js"></script>
<div id="embed_player">
<h1>Please Upgrade Your Flash Player</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

<script type="text/javascript">
var flashvars = {
flvpFolderLocation: "http://flvplayer.com/free-flv-player/flvplayer/",
flvpVideoSource: "http://flvplayer.com/media/audi_tdi_commercial.mp4",
flvpWidth: "640",
flvpHeight: "375",
flvpInitVolume: "50",
flvpTurnOnCorners: "true",
flvpBgColor: "#FFFFFF"
};
var params = {
bgcolor: "#FFFFFF",
menu: "true",
allowfullscreen: "true"
};
swfobject.embedSWF("http://flvplayer.com/free-flv-player/FlvPlayer.swf", "embed_player", "640", "375", "9.0.0", "http://flvplayer.com/free-flv-player/flvplayer/swfobject/expressInstall.swf", flashvars, params);
</script>

Good Morning Everyone,

My first post here so hope i get the format right

The problem

I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image.

The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows:

Code:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

if (filename = 'about.php')
 {
  $('#about').attr('src', 'images/Nav/about_selected.png')
 }
else
 {
  $('#about').attr('src', 'images/Nav/about_over.png')
 }

I am using jQuery for this project thus the jQuery code being thrown in there.

The logic of the code iv made is, IF the page is 'About' then the 'About' menu button should display 'about_selected.png'.

I hope this makes sense and a solution would be much appreciated. Thanks!