We Keep Coding

trying to make validation on radiobutton

I have a problem with validation on radiobutton.
I did try by having a loop to check if the radiobutton is checked or not but it turns out give delivery flag still true
var optDelivery=document.getElementsByName("f__deliver");
var deliveryFlag=false;
for (var i=0;i<optDelivery.length;i++){
if (optDelivery.checked){
deliveryFlag=true;
}
}
if (deliveryFlag===true){
alert("AAAA");
optDelivery.style.background="white";
optDelivery.style.color="#000";
} else{
alert("A");
optDelivery.style.background="#DE8971";
optDelivery.style.color="#FFE9D6";
optDelivery.focus();
return false;
}

You need to access each input radio by its index, also the condition needs to be inside the loop
Also instead of return falseset deliveryFlag to false
const optDelivery = document.getElementsByName("f__deliver");
for (let i = 0; i < optDelivery.length; i++) {
const deliveryFlag = optDelivery[i].checked ? true : false;
if (deliveryFlag === true) {
console.log("AAAA");
optDelivery[i].style.background = "white";
optDelivery[i].style.color = "#000";
} else {
console.log("A");
optDelivery[i].style.background = "#DE8971";
optDelivery[i].style.color = "#FFE9D6";
optDelivery[i].focus();
}
}
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="" checked>
<input type="radio" name="f__deliver" id="">

var optDelivery=document.getElementsByName("f__deliver");
var deliveryFlag=false;
for (var i=0;i<optDelivery.length;i++){
if (optDelivery[i].checked){
deliveryFlag=true;
}
if (deliveryFlag===true){
alert("AAAA");
optDelivery[i].style.backgroundColor="white";
optDelivery[i].style.color="#000";
optDelivery[i].focus();
}else{
alert("A");
optDelivery[i].style.backgroundColor="#DE8971";
optDelivery[i].style.color="#FFE9D6";
}
deliveryFlag = false;
}
<input type='radio' name = 'f__deliver'>
<input type='radio' name = 'f__deliver' checked>
<input type='radio' name = 'f__deliver'>

add additional value to the total

I am looking for a way to add the value from (discount) and (quantity) to my total. As for discount part, the customer will need to enter the right code to receiver discount. And for quantity, when clicked at the checkbox, then change the quantity, the total will also follow. Can you guys help me out on this problem?
thanks
(sorry, my English is not good)
function addItemPrice() {
var total = 0;
var count = 0;
for (var i = 0; i < document.myform.item.length; i++) {
if (document.myform.item[i].checked) {
total = (total + document.myform.item[i].value * 1); // another way to convert string to number
count++;
}
}
return total;
}
var sh_prices = new Array();
sh_prices["standard"] = 10;
sh_prices["express"] = 20;
function getAddShipping() {
var shippingPrice = 0;
var theForm = document.forms["myform"];
var shipping = theForm.elements["shipping"]
for (var i = 0; i < shipping.length; i++) {
if (shipping[i].checked) {
shippingPrice = sh_prices[shipping[i].value];
break;
}
}
return shippingPrice;
}
function getCode() {
var theForm = document.forms["myform"];
var discode = theForm.elements["discount"]
if (discode == "UAC123") {
alert("yes");
} else {
alert("no")
}
}
function getTotal() {
var totalPrice = getAddShipping() + addItemPrice();
document.getElementById('Price').innerHTML = "the total price" + totalPrice;
}
<form name="myform">
Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity"><br> Sickle $1 <input type="checkbox" name="item" value="1" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $50 <input type="checkbox" name="item" value="50" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $7 <input type="checkbox" name="item" value="7" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Standard
<input type="radio" name="shipping" value="standard" onClick="getTotal(shipping)" /> Express
<input type="radio" name="shipping" value="express" onClick="getTotal(shipping)" /> <br> Discount code
<input type="text" name="discount" size=15>
<input type="button" id="code" value="check" onClick="getCode(code)">
<div id="Price">
</div>
</form>

Dynamically, check radio button with for loop

I'm trying to create a 5 star radio picker.
This is the 1 of the radio buttons:
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
After the method gets called and "3" is passed on this is my javascript function:
function check(stars)
{
for(i = 0 ; i < stars; i++)
{
document.getElementById("num_" + stars + "_star").checked = true;
}
}
When I run the code, it does not perform the checked to = true, though if remove the for loop, it works just fine.
Any ideas why the for loop is preventing from checking the radio boxes?
This is my entire code:
<script>
function check(stars)
{
for(i = 0 ; i < stars; i++)
{
document.getElementById("num_" + stars + "_star").checked = true;
}
}
</script>
<form>
<input onclick="check(1)" type="radio" name="one" id="num_1_star" value="1">
<input onclick="check(2)" type="radio" name="two" id="num_2_star" value="2">
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
<input onclick="check(4)" type="radio" name="four" id="num_4_star" value="4">
<input onclick="check(5)" type="radio" name="five" id="num_5_star" value="5">
</form>
Thanks!

i had to be 1 initially as ids are starting from 1
Also reset all the checked status when click is initiated! Use i instead of stars in getElementById
Try this:
function check(stars) {
for (var j = 1; j <= 5; j++) {
document.getElementById("num_" + j + "_star").checked = false;
}
for (var i = 1; i <= stars; i++) {
document.getElementById("num_" + i + "_star").checked = true;
}
}
<input onclick="check(1)" type="radio" name="one" id="num_1_star" value="1">
<input onclick="check(2)" type="radio" name="two" id="num_2_star" value="2">
<input onclick="check(3)" type="radio" name="three" id="num_3_star" value="3">
<input onclick="check(4)" type="radio" name="four" id="num_4_star" value="4">
<input onclick="check(5)" type="radio" name="five" id="num_5_star" value="5">

Put var before the iteration variable i. You are creating a global variable.

Javascript - get the radio button index number

**I have a php page with an array of option like this... and I need to get by javascript **the index of the selected option. Above I put the code of the javascript that is not working... Any help will be appreciated!
<input type="radio" name="option[1]" value="1">
<input type="radio" name="option[1]" value="2">
<input type="radio" name="option[1]" value="3">
<input type="radio" name="option[1]" value="4">
<input type="radio" name="option[2]" value="1">
<input type="radio" name="option[2]" value="2">
<input type="radio" name="option[2]" value="3">
<input type="radio" name="option[2]" value="4">
<input type="radio" name="option[3]" value="1">
<input type="radio" name="option[3]" value="2">
<input type="radio" name="option[3]" value="3">
<input type="radio" name="option[3]" value="4">
...
Can anyone help me?
I am trying something like this but it didn´t work
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
var index = 0;
for (var i = 0; document.forms[0].elements.length; i++)
{
if (document.forms[0].elements[i] == element)
{
index = i;
}
}
return index;
}
</script>

If I correctly understood the questuion, it can be solved like this:
$(document).on('change','input[type=radio]', function(){
alert($(this).prop('name').charAt(7));
});
Here is fiddle http://jsfiddle.net/Goodluck/ynkgr/

the name attribute is used for group the radio buttons, you have to use the id attribute to access the control asking if it's checked.
Example
<html>
<head>
</head>
<body>
<form id="frmTest">
<input type="radio" name="option[1]" id="option1-item1" value="1" >
<input type="radio" name="option[1]" id="option1-item2" value="2" >
<input type="radio" name="option[1]" id="option1-item3" value="3" >
<input type="radio" name="option[1]" id="option1-item4" value="4" >
<input type="radio" name="option[2]" id="option2-item1" value="1" >
<input type="radio" name="option[2]" id="option2-item2" value="2" >
<input type="radio" name="option[2]" id="option2-item3" value="3" >
<input type="radio" name="option[2]" id="option2-item4" value="4" >
<input type="radio" name="option[3]" id="option3-item1" value="1" >
<input type="radio" name="option[3]" id="option3-item2" value="2" >
<input type="radio" name="option[3]" id="option3-item3" value="3" >
<input type="radio" name="option[3]" id="option3-item4" value="4" >
</form>
<input type="button" onclick="validateForm(document.getElementById('frmTest'))" />
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
return element.id;
}
</script>
</body>
</html>

You forgot to check the condition in this line:
(the loop in function clickedElm)
for (var i = 0; document.forms[0].elements.length; i++)
So, you enter in an infinite loop.
the correct line:
for (var i = 0; i < document.forms[0].elements.length; i++)

SUM radio button values and checkboxes values in one calculation - javascript and html

I am trying to calculate the values of radio buttons and checkboxes.
I have the radio buttons working as required but cannot get the script right for the checkboxes.
I want the check boxes to have a sub total (which is working fine) and then have that subtotal added to the calculation of the radio buttons. Below is what I have so far.
Any suggestions would be appreciated.
Thanks.
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p><input id="rdo_1" type="radio" value="3" name="price3" onClick="DisplayPrice(this.value);"><label for="ra1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price3" onClick="DisplayPrice(this.value);"><label for="ra2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price3" onClick="DisplayPrice(this.value);"><label for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01" value="300"/><label for="check01">Check 1</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG" id="check02" value="200"/><label for="check02">Check 2</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG" id="check03" value="200"/><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly" >
</form>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
</script>
<hr>
<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for( i = 0; i < document.form4.price4.length; i++ ){
val4 = document.form4.price4[i].value;
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>

In Javascript if there is single texbox of a specific name then length function will be return undefined.
Here you can do two things.
First there is only single field of subtotal so u can assign value direct to val4 like given below
val4 = document.form4.price4.value;
Second If you want to run for loop then
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
Edited
In function
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
finalResult();
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function finalResult(){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
i hope it will be work for you
thanks

In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value
Try this code... same code with some modifications
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
for="radio1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
for="radio2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p>
<input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
value="300" /><label for="check01">Check 1</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
id="check02" value="200" /><label for="check02">Check 2</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
id="check03" value="200" /><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">
Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly">
</form>
<p>
<label for="valueTotal">
Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("valueTotal")
var result = document.getElementById("price4")
function clickCh(caller)
{
if (caller.checked)
{
add(caller)
} else
{
subtract(caller)
}
}
function add(caller) { result.value = total.value * 1 + caller.value * 1 }
function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
</script>
<hr>
<script type="text/javascript">
function DisplayPrice(price)
{
var val1 = 0;
for (i = 0; i < document.form1.price.length; i++)
{
if (document.form1.price[i].checked == true)
{
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2.price2.length; i++)
{
if (document.form2.price2[i].checked == true)
{
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3.price3.length; i++)
{
if (document.form3.price3[i].checked == true)
{
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4.price4.length; i++)
{
val4 = document.form4.price4[i].value;
}
var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value = sum;
}
</script>
Thank you. hope it will work