I have a simple form that accepts input from a popup form (the user clicks Contour): https://codepen.io/alabamarob/pen/JjGYVjr. The user selects how they would like their input number distributed across dates from a graphic representing skew.
What I'd like to do is populate the "Adjustments" text fields based on the selected distribution curve and ETC amount. For instance, if the user selects the first curve, whatever amount in the ETC amount field would be distributed 10% 25% 65% and populate the adjustments fields accordingly. Likewise, the normal distribution would populate the 20% 60% 20% amounts.
Any pointers would be helpful. Thanks!
//this is the main page
<table><tr><td>
Contour
</td>
<td> <input name="0" type="text" />
</td>
<td> <input name="1" type="text" />
</td>
<td> <input name="2" type="text" />
</td>
</tr>
</table>
<br/>
//this is the popup page
<table>
<tr><td>Choose Countour: <input type="radio" name="skew0" value="neg">
<img src="imgs/0.jpg" width="20px"></td>
<td align="center"><input type="radio" name="skew0" value="pos">
<img src="imgs/1.jpg" width="20px"></td>
<td ><input type="radio" name="skew0" value="no">
<img src="imgs/2.jpg" width="20px"></td>
</tr>
<tr><td>ETC Total Value:</td><td colspan="2" align="right"> <input type="textbox" ></td></tr>
<tr><td colspan="3" align="right"><input type="submit" value="submit" onclick="self.close()"></td></tr></table>```
<script type="text/javascript">
function copy()
{
if(document.getElementById('neg').checked) {
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var n3 = document.getElementById("n3");
var n4 = document.getElementById("n4");
n2.value = n1.value*.4;
n3.value = n1.value*.5;
n4.value = n1.value*.1;
}
if(document.getElementById('pos').checked) {
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var n3 = document.getElementById("n3");
var n4 = document.getElementById("n4");
n2.value = n1.value*.1;
n3.value = n1.value*.7;
n4.value = n1.value*.4;
}
if(document.getElementById('no').checked) {
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var n3 = document.getElementById("n3");
var n4 = document.getElementById("n4");
n2.value = n1.value*.15;
n3.value = n1.value*.7;
n4.value = n1.value*.15;
}
}
</script>
<table border="0" style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px black solid;">
<tr>
<td>Enter ETC and Choose Contour: </td>
<td><input type="text" name="n1" id="n1"></td>
<td><input type="radio" name="skew0" id="pos"><img src="imgs/0.jpg" width="20px"></td>
<td align="center"><input type="radio" name="skew0" id="no"><img src="imgs/1.jpg" width="20px"></td>
<td ><input type="radio" name="skew0" id="neg">
<img src="imgs/2.jpg" width="20px"></td>
<td><input type="button" value="Go!" onClick="copy();" /></td>
</tr>
</table>
<br/>
<table border="0"><tr>
<td> </td>
<td>8/21/20</td>
<td>9/25/20</td>
<td>10/30/20</td>
<td></td>
</tr>
<tr> <td>Adjustments:</td><td><input type="text" name="n2" id="n2"/></td><td><input type="text" name="n3" id="n3"/></td><td><input type="text" name="n4" id="n4"/></td><td></td></tr>
</table>
Related
I have the following table
<table>
<tr style="background-color: silver;">
<th>Check it</th>
<th>Estimate item</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" value="450" /></td>
<td>Remove Tile</td>
<td><input type="text" value="1"></td>
<td>$450</td>
</tr>
<tr>
<td><input type="checkbox" value="550" /></td>
<td>Remove Tub</td>
<td><input type="text" value="1"></td>
<td>$550</td>
</tr>
<p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>
Table example
I found how to calculate the sum of checkboxes values:
<script>
$(document).ready(function () {
var $inputs = $('input[type="checkbox"]')
$inputs.on('change', function () {
var sum = 0;
$inputs.each(function() {
if(this.checked)
sum += parseInt(this.value);
});
$("#price").val(sum);
});
});
</script>
The question is:
If user will update the quantity in textbox, i need to update the total.
I want it to work in two ways: quantity changed before or after checkbox has been checked.
So the value in "Cost" column is equal to checkbox value. I do not want to modify "Cost" column. I need total to be shown at the bottom of the table in "textbox with id="price" textbox.
Case:
User checked the first checkbox #price should be updated with 450.
User checked the second checkbox #price should benow 1000.
User changed the quantity to 2 in the row with the first checkbox.Now #price should be updated to 1450
Thanks in advance!
To achieve this you should loop through the table body's row for that use the code as
$('table tbody tr').each(function()
{
//do something
});
and then find the checkbox in that row. You can check if the check box is checked by using $tr.find('input[type="checkbox"]').is(':checked') this code. It will find a check box in the row and it will check whether it is checked or not.
var $columns = $tr.find('td').next('td').next('td'); This code is used to retrieve the column Quantity.
We call the function calculateSum() to calculate the sum coast of checked rows in both textbox change event and checkbox change event.
$(document).ready(function() {
function calculateSum(){
var sumTotal=0;
$('table tbody tr').each(function() {
var $tr = $(this);
if ($tr.find('input[type="checkbox"]').is(':checked')) {
var $columns = $tr.find('td').next('td').next('td');
var $Qnty=parseInt($tr.find('input[type="text"]').val());
var $Cost=parseInt($columns.next('td').html().split('$')[1]);
sumTotal+=$Qnty*$Cost;
}
});
$("#price").val(sumTotal);
}
$('#sum').on('click', function() {
calculateSum();
});
$("input[type='text']").keyup(function() {
calculateSum();
});
$("input[type='checkbox']").change(function() {
calculateSum();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sum" type="button">Calculate</button><br/>
<table>
<tr style="background-color: silver;">
<th>Check it</th>
<th>Estimate item</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" name="chck" value="450" /></td>
<td>Remove Tile</td>
<td><input type="text" name="qnty" value="1"></td>
<td>$450</td>
</tr>
<tr>
<td><input type="checkbox" class="chck" value="550" /></td>
<td>Remove Tub</td>
<td><input type="text" name="qnty" value="1"></td>
<td>$550</td>
</tr>
</table>
<p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>
<div class="serve" id="service">
<form action="" id="roomform" onsubmit="return false">
<div class="order">
<fieldset>
<legend>Tell us where to clean:</legend>
<p>
<input value="30" type="checkbox" id="myCheck" class="sum" name="myCheck" oninput="x.value=parseInt(bedroom.value)*30.00"/>
<label for="sleeping" class="contain">Bedrooms (P30/room) </label>
<input type="number" id="a" class="room" value="1" min="1" max="20" onchange="calculateTotal()"/>
Total: P <span id="costPrice"> </span
</p>
<p>
<input value="20" type="checkbox" id="myCheck" class="sum" name="myCheck1" onclick="calculateTotal()" />
<label for="sitting" class="contain">Sitting room (P20/room)</label>
<input type="number" class="room" id="a" value="1" min="1" max="20" />
Total: P <output type="number" ></output>
</p>
<p>
<input value="20" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" />
<label class="contain">Dining room (P20/room)</label>
<input type="number" class="room" id="a" value="1" min="1" max="20" />
Total: P <output type="number" ></output>
</p>
<p>
Extra services:</p>
<p>
<input value="15" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" />
<label class="contain">Carpet Cleaning (P 15/room)</label>
<input type="number" class="room" id="a" value="0" min="0" max="20" />
Total: P <output type="number" ></output>
</p>
<p>
<input value="3" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" />
<label class="contain">Window Cleaning (P 3/room)</label>
<input type="number" class="room" id="a" value="0" min="0" max="20" />
Total: P <output type="number" ></output>
</p>
<div class="grandPrice" >
Grand Total Price: P<span id="grandTotal">0</span>
</div>
</fieldset>
</div>
</form>
<script>
// When a checkbox is clicked
/*$('#order input[type=checkbox]').click(function() {
// Get user input and set initial variable for the total
inputBox = parseInt($('#a').val());
bedroomPrices = 0;
// If it's checked, add the current value to total
if($(this).prop('checked'))
{
thisValue = parseInt($(this).val());
bedroomPrices = bedroomPrices + thisValue;
}
// Output the total checkbox value multipled against user input
$('#costPrice').html(bedroomPrices * inputBox);
});*/
var checkbox = document.getElementsByClassName('sum'),
inputBox = document.getElementById('a'),
GrandTotal = document.getElementById('grandTotal');
//"(this.checked ? 1 : -1);" this sees if checkbox is checked or unchecked by adding or subtracting it (1 :-1)
//make sure that each checkbox total is added if its checked
for (var i=0; i < checkbox.length; i++) {
checkbox[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
grandTotal.innerHTML = parseFloat(grandTotal.innerHTML) + add
}
}
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="indent_list">
<table border="1">
<thead>
<tr>
<th>rate</th>
<th>quantity</th>
<th>coltotal</th>
</tr>
</thead>
<body>
<tr>
<td><input type="text" id="val" class="rate" value="10"></td>
<td><input type="text" id="val" class="quantity" value="1"></td>
<td><input type="text" id="val" class="coltolal" value=""></td>
</tr>
<tr>
<td><input type="text" id="val" class="rate" value="10"></td>
<td><input type="text" id="val" class="quantity" value="2"></td>
<td><input type="text" id="val" class="coltolal" value=""></td>
</tr>
<tr>
<td><input type="text" id="val" class="rate" value="10"></td>
<td><input type="text" id="val" class="quantity" value="2"></td>
<td><input type="text" id="val" class="coltolal" value=""></td>
</tr>
</body>
<tfoot>
<tr>
<th class="rateRow"></th>
<th class="quantityRow"></th>
</tr>
<tr>
<th colspan="2" class="totalRow"></th>
</tr>
</tfoot>
</table>
</div>
> button
<input type="checkbox" class="btn btn-info checkbox" onclick="calculateCheck()">
<input type="button" class="btn btn-info" onclick="calculate()" value="Calculate">
> script
<script>
function calculateCheck() {
var check = $('.checkbox').prop('checked');
if (check) {
calculate()
} else {
$('.rateRow').text('');
$('.quantityRow').text('');
$('.totalRow').text('');
}
}
function calculate() {
var rateRow = '';
var quantityRow = '';
var totalRow = '';
var rate = 0;
var quantity = 0;
var total = 0;
// alert(quantitycol);
$('tbody tr').each(function () {
var ratecol = $('td .rate', this).val();
var quantitycol = $('td .quantity', this).val();
var coltotal = ratecol * quantitycol;
$('td .coltolal', this).val(coltotal);
// alert(a);
rate += +$('td .rate', this).val();
quantity += +$('td .quantity', this).val();
total = rate * quantity;
});
rateRow += rate;
quantityRow += quantity;
totalRow = total;
$('.rateRow').text(rateRow);
$('.quantityRow').text(quantityRow);
$('.totalRow').text(totalRow);
}
</script>
I am building a volume calculator for a website, however, I cannot seem to get the user input from the form to pull into Javascript and calculate the volume. It generates no output.
function calculate() {
var x = 0;
var length = parseFloat(document.getElementById("length").value) * 12;
var width = parseFloat(document.getElementById("width").value) * 12;
var depth = parseFloat(document.getElementById("depth").value);
if (document.getElementById("square").checked)
{
x = (length * width * depth) / 12;
}
else if (document.getElementById("circle").checked)
{
x = (Math.PI * length * width * depth / 4) / 12;
}
document.getElementById("result").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
<table>
<tr>
<td>
Type:
</td>
<td>
<input type="radio" name="type" value="square" checked> Cubic<br />
<input type="radio" name="type" value="circle"> Cylinder<br />
</td>
</tr>
<tr>
<td>
Length: <br />
(in feet)
</td>
<td>
<input type="text" id="length">
</td>
</tr>
<tr>
<td>
Width: <br />
(in feet)
</td>
<td>
<input type="text" id="width">
</td>
</tr>
<tr>
<td>
Depth: <br />
(in Inches)
</td>
<td>
<input type="text" id="depth">
</td>
</tr>
</table>
</form>
<button onclick="calculate()"><font color="#979189">Calculate</font></button>
<label id="result"> </label> Cubic Feet
<script>
</script>
</body>
</html>
The script should output the calculation into a label but nothing seems to happen. When I attempt to output the data directly to the label from the form field:
document.getElementById("result").innerHTML = document.getElementById("length").value;
It also does not show any output. Would anyone happen to see what I am missing here?
There are no elements with the ID circle or square, only those values
<input type="radio" name="type" value="square" checked> Cubic
<input type="radio" name="type" value="circle"> Cylinder
which means you can't do
document.getElementById("square").checked
Just give them the correct ID
<input id="square" type="radio" name="type" value="square" checked> Cubic
<input id="circle" type="radio" name="type" value="circle"> Cylinder
and it should work -> FIDDLE
document.getElementById("square")
and
document.getElementById("circle") could not have been resolved because you missed the Id on the Inputs
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
<table>
<tr>
<td>
Type:
</td>
<td>
<input type="radio" name="type" value="square" id="square" checked> Cubic<br />
<input type="radio" name="type" value="circle" id="circle"> Cylinder<br />
</td>
</tr>
<tr>
<td>
Length: <br />
(in feet)
</td>
<td>
<input type="text" id="length">
</td>
</tr>
<tr>
<td>
Width: <br />
(in feet)
</td>
<td>
<input type="text" id="width">
</td>
</tr>
<tr>
<td>
Depth: <br />
(in Inches)
</td>
<td>
<input type="text" id="depth">
</td>
</tr>
</table>
</form>
<button onclick="calculate()"><font color="#979189">Calculate</font></button>
<label id="result"> </label> Cubic Feet
<script>
function calculate() {
var x = 0;
var length = parseFloat(document.getElementById("length").value) * 12;
var width = parseFloat(document.getElementById("width").value) * 12;
var depth = parseFloat(document.getElementById("depth").value);
if ( document.getElementById("square").checked )
{
x = (length * width * depth) / 12;
}
else if ( document.getElementById("circle").checked )
{
x = (Math.PI * length * width * depth / 4) / 12;
}
document.getElementById("result").innerHTML = x;
}
</script>
</body>
</html>
When you run the code it shows an error in the console that you are trying to access an element with id of square or circle that is not present and these are the radio buttons. You should give them either ids or handle them in some other way: http://www.homeandlearn.co.uk/JS/radio_buttons.html
I am trying to find the position of an input value from a list of input values in a table then display the position. This is after sorting the values from highest to lowest value.
In the example below, I expect the input with value of 10 to be position 2. Similarly, if I would test it with input with value of 45 the position will be 1 and so on.
I have tried the code below but I get a -1 position
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b - a
});
</script>
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class="">
<input name="name" class="sm" id="sm" type="text" value="4" />
</td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm1" type="text" value="6" />
</td>
<td class="pos1"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm2" type="text" value="10" />
</td>
<td class="pos2">
<script type="text/javascript">
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
</script>
</td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm3" type="text" value="45" />
</td>
<td class="pos3"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm4" type="text" value="1" />
</td>
<td class="pos4"></td>
</tr>
</table>
You must call your javascript after the page loaded.
Put that code at the end of your body element :
</body>
<script type="text/javascript">
(function() {
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
})();
</script>
I figured out .Using DOMContentLoaded as suggested by Steven P on one of the comments. Here is the demo of what i made. A good way of saying position of numbers in a list after sorting from highest to lowest.
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class=""> <input name="name" class="sm" id="sm" type="text" value="4" /> </td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm1" type="text" value="6" /> </td>
<td class="pos1"> </td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm2" type="text" value="10" /> </td>
<td class="pos2">
</td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm3" type="text" value="6" /> </td>
<td class="pos3">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID3 = document.getElementById('sm3').value;
var mark3 = parseInt(marksID3);
//alert (mark3)
var valPos3 = marks.indexOf(mark3);
var valPost3 = parseInt(valPos3 + 1);
document.getElementsByClassName('pos3')[0].textContent = valPost3;
});
</script></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm4" type="text" value="45" /> </td>
<td class="pos4">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID4 = document.getElementById('sm4').value;
var mark4 = parseInt(marksID4);
//alert (mark4)
var valPos4 = marks.indexOf(mark4);
var valPost4 = parseInt(valPos4 + 1);
document.getElementsByClassName('pos4')[0].textContent = valPost4;
});
</script></td>
</tr>
</table>
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b-a
});
</script>
If there are any other good suggestions or improvements i will highly appreciate
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<script>
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
</script>
<html>
<body>
<form action="" method="post">
<table border="1" id="table">
<tr> <td colspan="2">Select Technolgy:</td> </tr>
<tr> <td>c</td>
<td><input type="checkbox" name="techno[]" value="c" class='chk'></td>
</tr>
<tr> <td>hadoop</td>
<td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>
</tr>
<tr> <td>core java</td>
<td><input type="checkbox" name="techno[]" value="Core JAVA" class='chk'></td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>
</body>
</html>
Using this code, I candelete the checked checkbox. But how can I remove the checked checkbox containing row of table in the form?
I've read through this question, but it didn't help me.
Editing your code you can do it like this
function delBoxes() {
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for (var i = 0; i < boxes.length; i++) {
box = boxes[i];
if (box.checked) {
rowTag = box.parentNode.parentNode;
tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr>
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr>
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' />and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
But you have to consider changing design to something better. Set ids or classes and refer to them, instead of relative "magic number of levels".
If you mark rows with data-tech attribute then you could do something like:
function delBoxes() {
var classname = document.getElementsByClassName("chk");
for (var i = 0; i < classname.length; i++) {
box = classname[i]
if (box.checked) {
elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
elements[0].parentNode.removeChild(elements[0]);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr data-tech="c">
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr data-tech="hadoop">
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr data-tech="Core JAVA">
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' /> and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
I have a simple table with a series of Yes/No radio button questions and have added some Javascript that should apply a red colour to the label of an adjacent text area input. It's working but not for the first row in the table - all other rows it works.
Here's a cutdown version of the html for the first 3 rows in the table:
<table width="71%" class="record">
<tr>
<td width="63%" valign="top" class="field_name_left"><p><strong>Section 1</strong><br>
(a) section 1A.</p>
</td>
<td width="11%" valign="top" class="field_data">
<input type="radio" name="Scale1A" value="Yes" validate = "required:true " class = "radioClick">Yes
<input type="radio" name="Scale1A" value="No" validate = "required:true " class = "radioClick">No <label for = "Scale1A" class = "error">Please ensure this is completed</label> </td>
<td width="26%" valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale1AWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1AWhere" class="where" name="Scale1AWhere" cols="25" rows="2" validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
<label for = "Scale1AWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td valign="top" class="field_name_left"> (b) section 1B.</td>
<td valign="top" class="field_data"> <input type="radio" name="Scale1B" value="Yes" validate = "required:true " class = "radioClick" />
Yes <input type="radio" name="Scale1B" value="No" validate = "required:true " class = "radioClick" />
No <label for = "Scale1B" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data"><span class="field_name_left style1" id = "Scale1BWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1BWhere" class="where" name="Scale1BWhere" cols="25" rows="2" validate="required:'input[name=Scale1B][value=Yes]:checked'"></textarea> <label for = "Scale1BWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td width="63%" valign="top" class="field_name_left"><strong>Section 2.</td>
<td valign="top" class="field_data">
<input type="radio" name="Scale2" value="Yes"validate = "required:true" class="radioClick">Yes <input type="radio" name="Scale2" value="No"validate = "required:true" class="radioClick">No <label for = "Scale2" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale2WhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale2Where" class="where" name="Scale2Where" cols="25" rows="2" validate="required:'input[name=Scale2][value=Yes]:checked'"></textarea> <label for = "Scale2Where" class = "error">Please ensure this is completed</label></td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
and here's my script:
$(".radioClick").click(function(){
theStr = $("#"+this.name+"Where").val().length;
if($(this).val()=="Yes" && theStr == 0){
$("#"+this.name+"WhereLabel").addClass("emphasise");
} else {
$("#"+this.name+"WhereLabel").removeClass("emphasise");
}
$(".where").keyup(function(){
str = this.value.length;
if(str == 0){
$("#"+this.name + "Label").addClass("emphasise");
}else{
$("#"+this.name + "Label").removeClass("emphasise");
}
});
});
$.metadata.setType("attr", "validate");
$("#editRecord").validate();
You can see this in action over at this jsFiddle
For some reason that I can't fathom the Where label for the Question 1A is never changed to red when the Yes button is clicked, but is for all others?
Issue is an extra space in your text area. You need to trim it. or remove it.
theStr = $.trim($("#"+this.name+"Where").val()).length;
Extra space in the text area:-
<textarea id = "Scale1AWhere" class="where"
name="Scale1AWhere" cols="25" rows="2"
validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
Fixed Code