We Keep Coding

on click mulitple input then show button for validation jquery

I have here three sections, how can I make the next button show up when all three sections have been clicked? If one of them is not clicked then the button with the class "hideme" is visible, if all of them are clicked then hide "hideme" and show the "third_step" button.
<input type="date" name="purchase_date">
<input type="radio" name="group" value="one">
<input type="radio" name="group" value="two">
<input type="radio" name="group" value="three">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
<a class="next hideme">Next</a><a class="next third_step">Next</a>
Anybody please help, I don't know where to start on this.

Here I have add a id on <form>. And give the input some class .
use Change event | Show() | hide()
Try this
<form id="myForm">
<input type="date" name="purchase_date" class="date">
<input type="radio" name="group" value="one" classs="group">
<input type="radio" name="group" value="two" classs="group">
<input type="radio" name="group" value="three" classs="group">
<input type="radio" name="choice" value="yes" classs="choice">
<input type="radio" name="choice" value="no" classs="choice">
<a class="next" style="display:none">Next</a>
</form>
<script>
$(document).ready(function(){
$('.group').on('change',function(){
$('.date').change();
});
$('.choice').on('change',function(){
$('.date').change();
});
$('.date').on('change',function(){
var date = $('.date').val();
var group = ($('input:radio[name=group]:checked').val() || 0);
var choice = ($('input:radio[name=choice]:checked').val() || 0);
if(date != '' && group != '' && group != 0 && choice != '' && choice != 0)
$('.next').show();
else
$('.next').hide();
});
});
</script>

$(document).on("click, change","input[name=group],
input[name=choice],
input[name=purchase_date] ",
function(){
var groupSelected = $("input[name=group]:checked").val();
var choiceSelected = $("input[name=choice]:checked").val();
var dateSelected = $("input[name=purchase_date]").val();
if(groupSelected === undefined ||
choiceSelected === undefined ||
dateSelected === undefined ||
dateSelected === "")
{
$(".next").toggleClass("hideme",true);
}
else{
$(".next").toggleClass("hideme",false);
}
});

Check specific radio button is checked

I'm just trying to return true/false in one my my jquery methods depending on the check of a 2 radio buttons and if it's selected or not
I've tried several things but have not been able to get this right, it still submit the form without giving error that the buttons are not selected.
HTML Code
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" checked="" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" checked="true" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
Javascript
function checkOrderForm(frm) {
var paymentSelected = false;
var shippingSelected = false;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && frm.elements[i].checked) {
shippingSelected = true;
}
if (frm.elements[i].name == 'payment' && frm.elements[i].checked) {
paymentSelected = true;
}
}
if (!shippingSelected) {
alert(flow_no_shipping);
return false;
}
if (!paymentSelected) {
alert(flow_no_payment);
return false;
}

If I'm understanding your question correctly, you would only like this test to pass if BOTH of the radio buttons are checked. Currently, as long as one radio button in each group is checked, the code variable will be set to true, ignoring the state of the other radio button.
For example, if ONLY one of your shipping radio buttons was checked, the shippingSelected variable would be set to true and it would remain true.
A way to fix this is to begin with shippingSelected and paymentSelected set to true, and if one of the radio buttons are found to be unchecked, the variable will be set to false.
Here's an example:
var paymentSelected = true;
var shippingSelected = true;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && !frm.elements[i].checked) {
shippingSelected = false;
}
if (frm.elements[i].name == 'payment' && !frm.elements[i].checked) {
paymentSelected = false;
}
}

You can use $("#payment_1").checked to check whether the radio is checked or not. Similarly you could use other ID's to check whether they are selected or not.
Here is the fiddle:
https://jsfiddle.net/bf8bo43t/

Try below code,
HTML
<form method="post" name="frm_payment_types">
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<br />
<input type="submit" name="submit" onclick="return checkOrderForm();" />
</form>
Javascript
<script type="text/javascript">
function validateForm(){
var payment_1 = document.getElementById('payment_1');
var payment_2 = document.getElementById('payment_2');
var ECS_NEEDINSURE_1 = document.getElementById('ECS_NEEDINSURE_1');
var ECS_NEEDINSURE_2 = document.getElementById('ECS_NEEDINSURE_2');
if((payment_1.checked == true || payment_2.checked == true) && (ECS_NEEDINSURE_1.checked == true || ECS_NEEDINSURE_2.checked == true)){
return true;
}
else if(payment_1.checked == false && payment_2.checked == false){
alert("Please select Cash On Delivery or Credit Card / Debit Card.");
}
else if(ECS_NEEDINSURE_1.checked == false && ECS_NEEDINSURE_2.checked == false){
alert("Please select Home Delivery or Self-pickup.");
}
return false;
}
</script>

radio button form submission?

All.
I've got what should be a simple radio button form, which can be seen here (Jsfiddle). All I want to achieve is to find out which button is active when myFunction() is ran. Can anybody give a hint? I can't figure out what the issue is.
Javascript:
function myFunction() {
var answer1a = (document.getElementById("a1a").checked);
var answer1b = (document.getElementById("a1b").checked);
var answer1c = (document.getElementById("a1c").checked);
var answer1d = (document.getElementById("a1d").checked);
var answer1e = (document.getElementById("a1e").checked);
var answer1f = (document.getElementById("a1f").checked);
var answer1g = (document.getElementById("a1g").checked);
var answer1h = (document.getElementById("a1h").checked);
var answer1i = (document.getElementById("a1i").checked);
var answer1j = (document.getElementById("a1j").checked);
if answer1a === true {
alert('Its \'Earlier\'')
} else if answer1b === true {
alert('Its \'5AM\'')
} else if answer1c === true {
alert('Its \'6AM\'')
} else if answer1d === true {
alert('Its \'7AM\'')
} else if answer1e === true {
alert('Its \'8AM\'')
} else if answer1f === true {
alert('Its \'9AM\'')
} else if answer1g === true {
alert('Its \'10AM\'')
} else if answer1h === true {
alert('Its \'11AM\'')
} else if answer1i === true {
alert('Its \'12PM\'')
} else if answer1j === true {
alert('Its \'Later\'')
}
}
html:
<form id="q1" method="post">
<p>What time did you wake up?</p>
<!--<input type="text" placeholder="7:00AM" id="a1" />-->
<p>Earlier</p><input type="radio" value="Earlier" id="a1a" name="a1"/>
<p>5:00AM</p><input type="radio" value="5AM" id="a1b" name="a1"/>
<p>6:00AM</p><input type="radio" value="6AM" id="a1c" name="a1"/>
<p>7:00AM</p><input type="radio" value="7AM" id="a1d" name="a1"/>
<p>8:00AM</p><input type="radio" value="8AM" id="a1e" name="a1"/>
<p>9:00AM</p><input type="radio" value="9AM" id="a1f" name="a1"/>
<p>10:00AM</p><input type="radio" value="10AM" id="a1g" name="a1"/>
<p>11:00AM</p><input type="radio" value="11AM" id="a1h" name="a1"/>
<p>12:00PM</p><input type="radio" value="12PM" id="a1i" name="a1"/>
<p>Later</p><input type="radio" value="Later" id="a1j" name="a1"/>
</form>
<input type="button" onclick="myFunction()" value="myFunction"/>
Thanks in advance!

Your error is the missing brackets around the if statement if (answer1a) {
For a shorter method you can use document.querySelector('input[name="a1"]:checked').value to find the selected radio button
function myFunction() {
var checkValue = document.querySelector('input[name="a1"]:checked').value;
alert(checkValue)
}
<form id="q1" method="post">
<p>What time did you wake up?</p>
<!--<input type="text" placeholder="7:00AM" id="a1" />-->
<p>Earlier</p>
<input type="radio" value="Earlier" id="a1a" name="a1" />
<p>5:00AM</p>
<input type="radio" value="5AM" id="a1b" name="a1" />
<p>6:00AM</p>
<input type="radio" value="6AM" id="a1c" name="a1" />
<p>7:00AM</p>
<input type="radio" value="7AM" id="a1d" name="a1" />
<p>8:00AM</p>
<input type="radio" value="8AM" id="a1e" name="a1" />
<p>9:00AM</p>
<input type="radio" value="9AM" id="a1f" name="a1" />
<p>10:00AM</p>
<input type="radio" value="10AM" id="a1g" name="a1" />
<p>11:00AM</p>
<input type="radio" value="11AM" id="a1h" name="a1" />
<p>12:00PM</p>
<input type="radio" value="12PM" id="a1i" name="a1" />
<p>Later</p>
<input type="radio" value="Later" id="a1j" name="a1" />
</form>
<input type="button" onclick="myFunction()" value="myFunction">

There were some problems with your JavaScript Syntax.
Missing brackets around the if statements and unnecessary brackets around the document.getElementById statements
var myFunction = function() {
var answer1a = document.getElementById("a1a").checked;
var answer1b = document.getElementById("a1b").checked;
var answer1c = document.getElementById("a1c").checked;
var answer1d = document.getElementById("a1d").checked;
var answer1e = document.getElementById("a1e").checked;
var answer1f = document.getElementById("a1f").checked;
var answer1g = document.getElementById("a1g").checked;
var answer1h = document.getElementById("a1h").checked;
var answer1i = document.getElementById("a1i").checked;
var answer1j = document.getElementById("a1j").checked;
if (answer1a) {
alert('Its Earlier');
} else if (answer1b) {
alert('Its 5AM');
} else if (answer1c) {
alert('Its 6AM');
} else if (answer1d) {
alert('Its 7AM');
} else if (answer1e) {
alert('Its 8AM');
} else if (answer1f) {
alert('Its 9AM');
} else if (answer1g) {
alert('Its 10AM');
} else if (answer1h) {
alert('Its 11AM');
} else if (answer1i) {
alert('Its 12PM');
} else if (answer1j) {
alert('Its Later');
}
};
<form id="q1" method="post">
<p>What time did you wake up?</p>
<!--<input type="text" placeholder="7:00AM" id="a1" />-->
<p>Earlier</p><input type="radio" value="Earlier" id="a1a" name="a1"/>
<p>5:00AM</p><input type="radio" value="5AM" id="a1b" name="a1"/>
<p>6:00AM</p><input type="radio" value="6AM" id="a1c" name="a1"/>
<p>7:00AM</p><input type="radio" value="7AM" id="a1d" name="a1"/>
<p>8:00AM</p><input type="radio" value="8AM" id="a1e" name="a1"/>
<p>9:00AM</p><input type="radio" value="9AM" id="a1f" name="a1"/>
<p>10:00AM</p><input type="radio" value="10AM" id="a1g" name="a1"/>
<p>11:00AM</p><input type="radio" value="11AM" id="a1h" name="a1"/>
<p>12:00PM</p><input type="radio" value="12PM" id="a1i" name="a1"/>
<p>Later</p><input type="radio" value="Later" id="a1j" name="a1"/>
</form>
<input type="button" onclick="myFunction()" value="myFunction"/>

Like mentioned before, jQuery is really the way to simplify your code and have it work on older browsers. Your same concept but cleaned up and simplified with a small jQuery call.
The idea is find the checked check box by using a simple query. If a checkbox wasn't checked, alert the user.
/* Move the logic out of the page */
$(function(){
// Wait till it's clicked
$('#checkButton').click(function(){
// Find the value, if there is one
var value = $('input[name=a1]:checked').val();
// Validate that they choose something
if (value) {
// You would do your work here with value
console.log(value);
} else {
// Alert the user to their mistake
alert('Please make a selection');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="q1" method="post">
<p>What time did you wake up?</p>
<!--<input type="text" placeholder="7:00AM" id="a1" />-->
<p>Earlier<input type="radio" value="Earlier" id="a1a" name="a1"/></p>
<p>5:00AM<input type="radio" value="5AM" id="a1b" name="a1"/></p>
<p>6:00AM<input type="radio" value="6AM" id="a1c" name="a1"/></p>
<p>7:00AM<input type="radio" value="7AM" id="a1d" name="a1"/></p>
<p>8:00AM<input type="radio" value="8AM" id="a1e" name="a1"/></p>
<p>9:00AM<input type="radio" value="9AM" id="a1f" name="a1"/></p>
<p>10:00AM<input type="radio" value="10AM" id="a1g" name="a1"/></p>
<p>11:00AM<input type="radio" value="11AM" id="a1h" name="a1"/></p>
<p>12:00PM<input type="radio" value="12PM" id="a1i" name="a1"/></p>
<p>Later<input type="radio" value="Later" id="a1j" name="a1"/></p>
</form>
<input type="button" id="checkButton" value="myFunction"/>

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++)

check for empty radio input

I want to check if the user selects a radio button. I have coded this:
HTML
<form action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
//etc
<button type="submit" class="myButton" onclick="sendSuccess()">Submit</button>
</form>
JS
function sendSuccess(){
var len = document.formRate.ratingInput1.length;
var flag;
for(i=0; i<len; i++){
if (document.formRate.ratingInput[i].checked){
flag = true;
}
else{
flag = false;
break;
}
}
if(flag === false){
console.log('noooooo');
return false;
}else{
console.log('yesssss');
}
}
But its not working.

You can do it with jQuery using Attribute Equals Selector [name="value"] to find radio button with same name and :checked to get only checked elements. You can use length to check if you get any checked radio button or not. The length will be zero of none of radio button is checked and will be greater then zero if one or more radio button is checked.
Live Demo
if($('[name=ratingInput1]:checked').length)
console.log('Yes');
else
console.log('No');

Working demo http://jsfiddle.net/cXPYQ/
Hope this fit your needs :)
Code
$("form").submit(function () {
var flag = true;
$(':radio').each(function () {
name = $(this).attr('name');
if (flag && !$(':radio[name="' + name + '"]:checked').length) {
alert(name + ' group not checked');
flag = false;
}
});
return flag;
});

try this
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
function sendSuccess(){
var flag = false;
var len = $('input:radio[name="ratingInput1"]:checked').size();
if(len == 0){
console.log('noooooo');
flag = false;
}else{
console.log('yesssss');
flag = true;
}
return flag;
}

Its a simple form with radio buttons, so all you need is give the form a name formRate, and no need for jQuery, the following will work
HTML
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
Javascript
function sendSuccess() {
rating = document.forms["formname"]["ratingInput1"].value;
if(rating > 0){
console.log(rating);
}
else {
console.log('No rating');
}
return false;
}

var flag = $('[name="ratingInput1"]').is(':checked');
will return false if no radio with that name is chosen.