I have this code:
<div id="star-rating">
<script type="text/javascript">
$(function(){
$('#star-rating form').submit(function(){
$('.test',this).html('');
$('input',this).each(function(){
if(this.checked)
//$('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
$('.test',this.form).append(this.value);
});
return false;
});
});
</script>
<form name="form1" method="post" action="<?=base_url();?>rate/student">
<div class="dbtable">
<table cellpadding="0" cellspacing="0" border="0"><tbody>
<th colspan="4" align="left">Personal Appearance</th>
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="20%">
<input name="neat" type="radio" class="neat-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="neat-star" value="2" title="Fair"/>
</td>
</tr>
<tr><td></td><td>Health</td>
<td>
<input name="health" type="radio" class="health-star" value="1" title="Poor"/>
<input name="health" type="radio" class="health-star" value="2" title="Fair"/>
</td>
</tr>
<tr><td></td><td align="right"></td>
<td><input type="submit" value="Submit scores!" /></td>
<td><div class="test Smaller">
<span style="color:#FF0000">Results</span>
</div>
</td></tr>
So now I have 2 radio star rating. What I want is when I click the submit score it will add up the 2 selected radio box. E.g when click radio button neat with the value of 1 and radio button health with the value of 2 then the result will show 3 coz 1+2=3 in my div class=test. Could anyone help me with this.
$('#star-rating form').submit(function() {
$('.test', this).html('');
var total = 0;
$('input', this).each(function(){
if(this.checked) {
total += parseInt(this.value, 10);
}
}
//Do something with total
return false;
});
You need to use parseInt to convert a String into a Number. Otherwise, you'll just be concatenating values onto a string.
$('#star-rating form').submit(function() {
var score = $(this).find('.neat-star').val()
+ $(this).find('.health-star').val();
$(this).find('.test').html(score);
return false;
});
Try this
(function(){
$('#star-rating form').submit(function(){
var neatVal, healthVal;
neathVal = $(this).find("input[name=neat]:checked").val();
healthVal = $(this).find("input[name=health]:checked").val();
$('.test', this).append(praseInt(neatVal) + parseInt(healthVal ));
return false;
});
});
Related
I'm trying to get the span text when looping over table cells with no success.
<td>
<select name="newStatus" class="stChange">
<option value="0-596">active</option>
<option value="2-596">logout</option>
</select>
</td>
<td class="CellWithComment">
<input id="c57" type="checkbox" name="tfoza" value="1">
<label for="c57">
<span></span>
</label>
<span class="CellComment">960</span>
</td>
<td class="CellWithComment">
<input id="c58" type="checkbox" name="tfoza" value="1">
<label for="c58">
<span></span>
</label>
<span class="CellComment">901</span>
</td>
</tr>
jquery:
$('.stChange').on('change', function ()
{
var st = $(this).val();
var vls = st.split('-');
if( vls[0] == 0){
console.log('0',st);
$(this).closest('tr').find('input[type=checkbox]:checked').each(function(){
console.log($(this).find('.CellComment').text()) ;
});
}
if( vls[0] == 2){
}
});
I'm trying to find the span text when the checkbox is checked (JSFiddle).
What is wrong with the code?
This line of code $(this).find('.CellComment').text() was the problem. The find function looks for children and grand children etc inside of a parent element. That line of code is looking for .CellComment inside the checkbox, which the .each function is iterating through.
I have change that line of code to $(this).parent().find('.CellComment').text(). I have selected the parent of the checkbox using the parent() function, which selects the .CellWithComment element and then find the .CellComment element inside.
$('.stChange').on('change', function (event)
{
var st = $(this).val();
var vls = st.split('-');
if( vls[0] == 0){
$(event.target).closest('tr').find('input[type=checkbox]:checked').each(function() {
console.log($(this).parent().find('.CellComment').text());
});
}
if( vls[0] == 2){
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table>
<tr>
<td class="test">
<select name="newStatus" class="stChange">
<option value="0-596">active</option>
<option value="2-596">logout</option>
</select>
</td>
<td class="CellWithComment">
<input id="c57" type="checkbox" name="tfoza" value="1">
<label for="c57">
<span></span>
</label>
<span class="CellComment">960</span>
</td>
<td class="CellWithComment">
<input id="c58" type="checkbox" name="tfoza" value="1">
<label for="c58">
<span></span>
</label>
<span class="CellComment">901</span>
</td>
</tr>
</table>
I want to compare the two items(text and checkbox) and output the result.
for example, 164cm and style S is A, 186cm and style B is XL
input number is height and radio button value are 3 styles(small,normal,big)
output is 164s 186b
I use a if and == display result are 'S, M, L, XL)
If user enter height and select a style, want to output a value that matches the size table prepared in advance.
I'm a beginner, so this is my plan.
this time, I want output text+radio button value
<script>
$(window).load(function(){
$(".height, .style, .style_2").keyup(function() {
var row = $(this).closest('tr');
var height = parseInt(row.find('.height').val(), 10);
var total = "height" + "style";
row.find('.total').val(isNaN(total) ? '' : total);
});
});
</script>
<table>
<tbody>
<tr id="person_total">
<td><input name="height" type="number" class="span1 height" maxlength="5"></td>
<td>
<input type="radio" id="stylebox" name="stylebox" class="style" value="s" onClick="document.getElementById('hidfield').value=this.value" />
<label for="kjc-small">S</label>
<input type="radio" id="stylebox" name="stylebox" class="style" value="n" onClick="document.getElementById('hidfield').value=this.value" />
<label for="kjc-normal">N</label>
<input type="radio" id="stylebox" name="stylebox" class="style" value="b" onClick="document.getElementById('hidfield').value=this.value" checked/>
<label for="kjc-big">B</label>
</td>
<td><input name="total" type="text" class="span1 total" readonly></td>
</tr>
</tbody>
</table>
Don't use onClick in html when you use other script controller.
You can insert input in label, when id and for no need
id can't duplicate (id="stylebox")
$(document).ready(function(){
/* get nodes */
var totalNode = $('.total');
var heightNode = $('.height');
var styleNode = $('input[name="stylebox"]');
/* initial state */
var currentTotal = 0;
var currentHeight = heightNode.val();
var currentStyle = styleNode.val();
calcTotal(); // calc state
// when [input] Height change
heightNode.on('input propertychange', function() {
currentHeight = this.value;
console.log('now height', currentHeight)
calcTotal();
})
// when [radio] Style change
styleNode.change(function() {
currentStyle = this.value;
console.log('now style', currentStyle)
calcTotal();
})
// calc.
function calcTotal() {
currentTotal = currentHeight + currentStyle;
totalNode.val(currentTotal);
console.log('now total:', totalNode.val())
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<tbody>
<tr id="person_total">
<td>
<label>
<b>Height:</b>
<input name="height" type="number" class="span1 height" value="0" maxlength="5">
</label>
</td>
<!-- radio START -->
<td>
<label>
<input type="radio" name="stylebox" class="style" value="s" />
S
</label>
<label>
<input type="radio" name="stylebox" class="style" value="n" />
N
</label>
<label>
<input type="radio" name="stylebox" class="style" value="b" checked/>
B
</label>
</td>
<!-- radio END -->
<td>
<label>
<b>Total:</b>
<input name="total" type="text" class="span1 total" readonly>
</label>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can do it like this:
$('.height,.style').on('change, input',
function(){
$('.total').val($('.height').val() + $('.style:checked').val());
});
and please note that id should be unique in the document but all your radios has the same id (stylebox).
Live Demo
You can create a new input field which is set to read only and call a javascript function to set the value
which will append the input text and radio button field there
Total :
var size = document.getElementsById('stylebox');
var height = document.getElementsByName('height');
var size_value;
for(var i = 0; i
Hey guys i have a question about calculating checkboxes and its total in real time so here is my code:
function calc()
{
theTotal = 0;
checkForm = document.FormName;
for (i=0; i <= checkForm.length-1; i++) {
if (checkForm.elements[i].type == "checkbox") {
if (checkForm.elements[i].checked == true) {
document.getElementById("total").value = theTotal;
}
}
}
document.getElementById("total").innerHTML = theTotal;
}
Here is my html code:
<p>Total: $<span id="total">0</span></p>
<tr>
<td> <br> <center> <img src="Shirt1.jpg" width="160" height="150" alt="shirt1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Obey T-Shirt: $19.99</label> </center> </br></td>
<td> <br> <center> <img src="Shoe1.jpg" width="160" height="150" alt="shoe1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Shoe - Red Lace: $19.99</label> </center> </br> </td>
<td> <br> <center> <img src="Snapback1.jpg" width="160" height="150" alt="snap1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Snapback Bullets: $19.99</label> </center> </br> </td>
</tr>
When i click on one of the selected checkboxes it won't give me the calculation that i want. Are you able to help me with this one?
There are lot of problems seems in your code. Here I am writing simpler for you.
You don't need to iterate over every form element, even when you are calling it separately with each checkbox.
You also need to make theTotal as global variable for having total of checked items. Right now you are resetting it to 0 on every function call.
You can try this
var theTotal = parseFloat(0);
function calc(control) {
if (control.checked == true) {
theTotal += parseFloat(control.value);
} else {
theTotal -= parseFloat(control.value);
}
document.getElementById("total").innerHTML = theTotal;
}
and call it like this
<input type="checkbox" onchange="calc(this)" value="19.99">
JS Fiddle Demo
you are not updating the variable total.
You should be reading the .value of the checked inputs
I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.
<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>
</select>
</div>
</td>
</tr>
</table>
Where I am going wrong ..... any valuable input will be appreciated.
Could you try to change the input element's name:
<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>
and create a function:
function change(t, div){
var ele = document.getElementsByTagName("div");
var radios = document.getElementsByName("license[1]");
for (var i = 0, radio; radio = radios[i]; i++) {
if (!radio.checked) {
if(ele[i].id != div){
ele[i].style.display = 'none';
}
}else{
document.getElementById(div).style.display='inline';
}
}
}
I'm not sure if this is what you want, but HERE you can see an example.
You just need to change your parenthesis:
document.getElementById('select5000').style.display = (this.checked ? 'inline':'none');
Here is your inputs
<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">
and the function:
<script type="text/javascript">
function hideElem(self,divId){
var divs = ['select1000','select3000','select5000'];
if(self.checked){
for(var i=0; i < divs.length; i++){
if (divs[i] === divId){
document.getElementById(divs[i]).style.display = 'inline';
} else{
document.getElementById(divs[i]).style.display = 'none';
}
}
}
}
</script>
DEMO
because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:
(function () {
var oldSel = null;
$('input:radio').click(function () {
// get the current select
var sel = $('#select' + this.value);
// show current select
sel.show();
// if old select is exist, hide it
oldSel && oldSel.hide();
// store the current select when radio on click
oldSel = sel;
});
})();
see the demo
Short
What I want to do is following: At first, function validate() must check all inputs one by one: if they are not empty (or whitespaced) then move to if statement (for checking radio buttons) But if some of inputs empty then stop whole validate function and focus on empty input.
Here is result: http://jsfiddle.net/tt13/y53tv/4/
Just press ok button, you'll see that it finished first function and fires if too. But I want to exit from whole validate() function in case there is empty field, not only from each() function
Detailed
JS
function validate() {
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
return false;
}
});
if (!$(".answer:checked").val()) {
alert("boom");
return false;
}
return true;
}
$(document).ready(function() {
$("#add_question").submit(function(e) {
if (validate()) {
alert("good");
}
e.preventDefault();
})
});
HTML Markup
<form id="add_question" method="post" action="">
<table>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="a" /> a)
</td>
<td>
<input type="text" class="var_txt" name="var_a" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="b" /> b)
</td>
<td>
<input type="text" class="var_txt" name="var_b" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="c" /> c)
</td>
<td>
<input type="text" class="var_txt" name="var_c" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="d" /> d)
</td>
<td>
<input type="text" class="var_txt" name="var_d" />
</td>
</tr>
<tr>
<td class="var_label">
<input class="answer" type="radio" name="answer" value="e" /> e)
</td>
<td>
<input type="text" class="var_txt" name="var_e" />
</td>
</tr>
</table>
<input type="submit" name="submit" value="ok" />
</form>
Add a flag that has to be false to continue.
function validate() {
var invalid = false;
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
invalid = true;
return false;
}
});
if (invalid) {
return false;
}
if (!$(".answer:checked").val()) {
alert("boom");
return false;
}
return true;
}
$(document).ready(function() {
$("#add_question").submit(function(e) {
if (validate()) {
alert("good");
}
e.preventDefault();
})
});
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
Set a flag at the beginning of your validation: var broken = false;. Inside the each, just before return false;, add broken = true;. Then after your each code add if( broken) return false;
Like that?
function validate() {
var pass = true;
$('.var_txt').each(function() {
if ($.trim($(this).val()) == '') {
$(this).focus();
pass = false;
return false;
}
});
if (!$(".answer:checked").val()) {
alert("boom");
pass = false;
return false;
}
return pass;
}
Add a variable that checks if the conditions are true.