We have some data that user enters and the result after calculation. Now I want depending on the value that the user gets after calculation to change css style.
My html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.not_good { solid red; background:#eee;}
.good { solid green; background:#C0E9F6;}
</style>
<script type="text/javascript">
var BuckwheatCa = 4
function convcase(word) {
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
};
</script>
</head>
<body>
<FORM ACTION="#" NAME="convert">
Buckwheat, gramm
<INPUT TYPE=TEXT NAME="Buckwheat"
ONKEYUP="convcase(document.convert.Buckwheat.value)" >
<table>
<tr>
<td>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>
</tr>
</table>
</FORM>
</body>
</html>
so is there a way to create a function with if...else statement using document.convert.Ca.value variable value witch will change css style of text in <td> if the variable is < 10 for example?
You can do it using normal javascript using this in your code
if(value<10){
document.getElementById("sample").style.color="blue";
}
OR You can do it using jQuery:
if(value<10){
$("sample").css("color","blue");
}
Choose whichever appeals to you.
Of course you must have IDs as #Barmar suggested:
<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>
The above code now changes the style of Ca alone as the id exists for that tag.
And you can make changes to any of the css properties: http://www.blooberry.com/indexdot/css/propindex/all.htm
function convcase(word) {
document.convert.Ca.value = BuckwheatCa * document.convert.Buckwheat.value
// now add css comparison
if(document.convert.Ca.value < 10){
// using jQuery to access the 'td' and set the css on it
$('td').css('font-family', 'arial');
} else {
// whatever you want
}
};
Related
I make a auto complete .First I download my data from server and then write anything on text field it filter with my stationCode.I have two thing in my json array stationCode and stationName array .Now I need to set the selected station code on input text field .Can you please tell me what is better way to set the value of station code on input text field whenever user select any row of autosuggest.
here is my code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body ng-app="myapp">
<div ng-controller="cnt">
<input type="text" ng-model="searchText.stationCode">
<table ng-show="searchText.stationCode && searchText.stationCode.length != 0">
<tr id="$index"ng-repeat= "a in d.data | filter:searchText" ng-click="getselectedRow(searchText)">
<td> {{a.stationCode}} </td>
<td> {{a.stationName}} </td>
</tr>
</table>
</div>
</body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</html>
function cnt($scope,$http){
$http.get("http://184.106.159.143:8180/FGRailApps/jservices/rest/stationList")
.success(function (data) {
//alert(data);
$scope.d=data;
}).error(function(data){
alert("error")
});
$scope.getselectedRow=function(obj){
alert(obj.stationCode)
}
}
fiddle
http://jsfiddle.net/66z4dxsy/1/
Please disable web security of browser
Based on my code I have grayed out my images using the CSS (with #myImage)
and I am trying for the following
Need to set or remove the style when two ore more check boxes are checked so that the images are clear and bright (I mean with no gray/white background on the images)
And make the image buttons active.
I am trying to do that by getElementById, getElementsByname and can not get it right.
Can you please help with this and attached is the code.
Thanks in advance.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function countCheckboxes ( ) {
var form = document.getElementById('testForm');
var count = 0;
for(var n=0;n < form.length;n++){
if(form[n].name == 'itemID[]' && form[n].checked){
count++;
}
}
if(count >2)
{
document.getElementById('myimage').style = "none";
//document.getElementById('checkCount').innerHTML = count;
document.getElementsByname('testing').disabled = false;
document.getElementsByname('testing1').disabled = false;
alert("total no of checkbox selected "+count)
}
else
{
document.getElementsByname('testing').disabled = true;
document.getElementsByname('testing1').disabled = true;
}
}
/*
function diableQuoteBtns()
{
document.getElementById('itembutton').disabled = false;
}*/
</script>
</head>
<style>
#myImage {
opacity: 0.5;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.5;
filter: alpha(opacity=40); /* msie */
background-color: #0000;
}
</style>
<body >
<form name="form1" id="testForm">
<table>
<tr>
<td> <input type="checkbox" name="itemID[]" id="item1" value="1" onclick="countCheckboxes()" >
<input type="checkbox" name="itemID[]" id="item2" value="2" onclick="countCheckboxes()" >
<input type="checkbox" name="itemID[]" id="item3" value="3" onclick="countCheckboxes()" >
<input type="checkbox" name="itemID[]" id="item4" value="4" onclick="countCheckboxes()" >
</td>
<td><span class='my_class_item'>Item Name : </span></td>
</tr>
</table>
<table>
<tr>
<td align="center" colspan="6">
<!---<div id="wrapper"><img id="myImage" src="button_quote.gif" alt="" border="0" align="middle"></div>
<span class='my_class_item'><span class='bold'>-OR-</span></span>
<div id="wrapper"><img id="myImage" src="button_quote.gif" border="0" align="middle"></div>--->
<input type="image" disabled name="Testing" id="myimage" src="button_quote.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction1');">
<input type="image" disabled name="Testing1" id="myimage" src="button_quote.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction2');">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Check the Fiddle example here. the code is a bit messy but the main issue was that when you execute document.getElementsByName("Testing") this gives you a collection of the elements with that name, so you need to iterate them and perform whatever actions you want on each one individually like so:
var imgElements = document.getElementsByName("Testing");
for (var i = 0, max = imgElements.length; i < max; i++) {
imgElements[i].disabled = false
}
Other than that you are doing fine.
JQuery is an incredibly popular library, and for a good reason: it makes tasks like this trivial.
If you just download the latest version of jQuery (from www.jquery.com) and add it to the page you can set the disabled attribute and element styles very easily.
For example:
$('[name="testing"], [name="testing1"]').attr('disabled', 'disabled');
$('#myimage').css('display', 'none');
If, for whatever reason, you don't want to use jQuery, you can use the setAttribute method to set attributes directly:
document.getElementsByname('testing')[0].setAttribute('disabled', 'disabled');
Or, to set styles you just have to pick a particular style property and set it; for instance:
document.getElementById('myimage').style.display = "none";
For further info see:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/JavaScript
Error:
TypeError: d.options is undefined while(i<=d.options.length){
Hi i have this javascript of mine which has the select option to choose from. and from choosing from the select options it will display to the textbox field im using this onchange and using it while loop. can someone help me how to figure this out?? using while loop code?
Here's my code below
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
var i = 0;
while(i<=d.options.length){
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
}
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this.form)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" name="choose" />
</p>
</form>
</body>
</html>
any help is muchly appreciated! thanks
Fiddle
Fixed it:
<!DOCTYPE html>
<html>
<head>
<title>Activity 2 while loop</title>
<script type="text/javascript">
function tellMe(d){
document.getElementById("choose").value = d.value;
}
</script>
</head>
<body>
<form name="form1">
<p>Girl's qualities you want?</p>
<select name="listbox1" size="5" onchange="tellMe(this)">
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
<p>
You Choose: <input type="text" id="choose" name="choose" />
</p>
</form>
</body>
</html>
You were trying to get this.form but it should have been this, then the value of this (this.value).
Then, all you had to do was set the input type with name='choose', however I gave it an ID of choose to make it easier to select, then gave that value d.value, which was the value of listbox1.
You are passing the form element, which doesn't have options. Change d.options to d.listbox1.options
while(i<=d.listbox1.options.length){
After that is fixed your second problem will become apparant, whch is that you fail to increment i:
while(i<=d.listbox1.options.length){
...
i++;
}
You aren't incrementing i. You need to add i++ at the end of your while loop. You also need to target listbox1 in your while loop.
function tellMe(d){
var i = 0;
while(i<=d.listbox1.options.length){ // <-- use d.listbox1.options.length
if(d.listbox1.options[i].selected == true){
d.choose.value = d.listbox1.options[i].text;
}
i++; // <-- add increment here
}
}
I am new to javascript and I am trying to add a conditional field to a form. I have looked at these posts:
How do you create a hidden div that doesn't create a line break or horizontal space??
conditional display of html element forms
I have come up with this little example so far which works fine.
<html>
<head>
<script language="javascript">
function cucu(form){
if(form.check.checked){
document.getElementById("cucu").style.visibility="visible";
}
else{
document.getElementById("cucu").style.visibility="hidden";
}
}
function load()
{
document.getElementById("cucu").style.visibility="hidden";
}
</script>
</head>
<body onload="load()">
<form id="form">
<input type="checkbox" name="check" onclick="cucu(this.form)" >
<div id="cucu">
CUCU
</div>
</form>
</body>
<html>
I have tried the same method on a larger side and the only change is that the hidden element is a text field but it just doesnt' work.
This is the part of the form:
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this.form)" id="idAlbum">
<div id="divAlbum" >
Choisir un album : <input type="text" name="Album" list="Albums">
<datalist id="Albums">
<?php
$requete = 'SELECT DISTINCT titreAlbum FROM Album';
$resultat = mysqli_query($connexion, $requete);
while($row = mysqli_fetch_assoc($resultat)){
echo '<option value="'.$row['titreAlbum'].'">';
}
?>
</datalist> <br><br>
</div>
My head looks as follows:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-8" />
<title>BLABLA</title>
<link rel="stylesheet" type="text/css" href="include/styles.css">
<script language="javascript" >
function hideElements(){
document.getElementById("divAlbum").style.visibility="hidden";
}
function checkAlbum(form){
if(form.checkAlbum.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
</script>
</head>
I really don't know what the problem is. I've checked the functions again and again. Any suggestions for the possible error? Thanks
The reason your button is not working is that this refers to the clicked input itself. The form property on the input refers to the value of the form attribute, not the actual form. In reality you don't need the form attribute, you can simply use this.checked to see if the corresponding input is currently checked.
Album: <INPUT TYPE="checkbox" NAME="checkAlbum" onclick="checkAlbum(this)" id="idAlbum">
function checkAlbum(cb){
if(cb.checked){
document.getElementById("divAlbum").style.visibility="visible";
}else{
document.getElementById("divAlbum").style.visibility="hidden";
}
}
Beyond this I would suggest that you consider not applying your JavaScript inline. Keeping your code separate from your mark up improves readability and can help prevent errors. You might consider using the jQuery framework as it will make this sort of thing much easier.
$(function(){
$('#idAlbum').on('change', function() {
// use change instead of click in case there's a label involved
$('#divAlbum').toggle(this.checked);
});
});
I am javascript learner and have been trying to do this
two radio buttons but1 but2
two text boxes box1 box2
What I need to do is
when but1 is selected, box1 should be editable and box2 should be readonly.
when but2 is selected, box2 should be editable and box1 should be readonly.
On page load both the text boxes should be readonly.
My code is as below
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked = true) {
document.getElementById('box2').readonly = true;
}
else if (document.getElementById('but2').checked = true) {
document.getElementById("box1").readonly = true;
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
I do not want to disable the textboxes but make them readonly, so that on form submit i will have the textbox values that i can send to the server.
I do not know what mistake im doing here. Any help will be greatly appreciated. Thanks
You need to set the "readonly" attibute like this:
document.getElementById('box2').setAttribute('readonly','readonly')
and clear it like thisL
document.getElementById('box2').setAttribute('readonly','')
hope, this code would be of any help.
here is my try:
http://jsfiddle.net/ylokesh/AAAVp/1/
You're making a couple of mistakes.
First of all, your css and javascript code must be included into the <head> tag, which should be placed soon after <html>, before <body>.
Secondly your if statements are incorrect: with just one = sign you assign a value to a variable, you have to use two (or in this case three) of them to check the variables against a value, like this: if (something == value).
Lastly, you'd better use the functions setAttribute() and removeAttribute() to modify the values of the readonly attribute.
The complete code would be:
<html>
<head>
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked === true) {
document.getElementById('box2').setAttribute('readonly','readonly');
document.getElementById('box1').removeAttribute('readonly','');
}
else if (document.getElementById('but2').checked === true) {
document.getElementById('box1').setAttribute('readonly','readonly');
document.getElementById('box2').removeAttribute('readonly','');
}
}
</script>
</head>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde">
<input type="text" id="box2" value="pqrst">
</table>
</body>
<html>
Basically, you're using = instead of == on your conditionals. Also, you always have to set readonly to false on the one of the boxes, or you'll end up with two readonly boxes after two clicks. Try this:
EDIT the attribute name is readOnly, not readonly. Code also edited to manipulate the attribute directly, instead of using setAttribute. See working version on jsfiddle:
function makeChoice() {
document.getElementById('box1').readOnly = document.getElementById('but2').checked
document.getElementById('box2').readOnly = document.getElementById('but1').checked
}
In your IF statements, you are setting a variable, not testing whether it is in one state or another. You need to use this:
if (document.getElementById('but1').checked == true) {
Note that there are two equals signs. This checks whether the two are the same. Basically, one equals sets, two equals compares. Of course change both IF statements to the two equals signs.
Also, you say that onload both should be readonly. To do this, add
readonly="readonly"
to the textboxes. And furthermore, you need to turn readonly off on the appropriate textbox when a radio button is clicked.
So, altogether:
<style type="text/css">
.field-name {
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
</style>
<script type="text/javascript">
function makeChoice() {
if (document.getElementById('but1').checked) {
document.getElementById('box2').setAttribute('readOnly','readonly');
document.getElementById('box1').removeAttribute('readOnly','');
} else if (document.getElementById('but2').checked) {
document.getElementById('box1').setAttribute('readOnly','readonly');
document.getElementById('box2').removeAttribute('readOnly','');
}
}
</script>
<html>
<body>
<table>
<input type="radio" id="but1" name="vals" onclick="makeChoice()">
<input type="radio" id="but2" name="vals" onclick="makeChoice()">
<input type="text" id="box1" value="abcde" readonly="readonly">
<input type="text" id="box2" value="pqrst" readonly="readonly">
</table>
</body>
<html>