Dynamically increasing radio button validation - javascript

I have some radio buttons that dynamically increase based on data. What I want is to check if all radio button are selected or not. If they're not, I want to show an error message on that particular row as I am using form substitution to send data to ajax.
$(document).ready(function() {
// radio buttons
$('#mySpan4').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'ajax2.php',
data: $(this).serialize(), // reads the data ...
success: function(data) {
alert("data Updated Successfully");
window.location = 'login.html';
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mySpan4">
<table>
<tr>
<td>
Name : abc
</td>
<td>
<input type="radio" name="game[0]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[0]" value="Father">Father
</td>
</tr>
<tr>
<td>
Name : def
</td>
<td>
<input type="radio" name="game[1]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[1]" value="Father">Father
</td>
</tr>
<tr>
<td>
Name : ghi
</td>
<td>
<input type="radio" name="game[2]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[2]" value="Father">Father
</td>
</tr>
</table>
<input name="submit" type="submit" id="submit" value="submit">
</form>


You may try using :checked
var all = $('input[type=radio][name^=game]').length;
var chk = $('input[type=radio][name^=game]:checked').length;
var exp = all / 2;// in a group two radios each, any one will be selected
if(chk === exp) {
//all checked
} else {
// some goup is not checked
}
$(document).ready(function() {
// radio buttons
$('#mySpan4').submit(function(e) {
e.preventDefault();
var all = $('input[type=radio][name^=game]').length;
var chk = $('input[type=radio][name^=game]:checked').length;
var exp = all / 2; // in a group two radios each, any one will be selected
if (chk !== exp) {
alert('Error, select all !');
return false;
}
$.ajax({
url: 'ajax2.php',
data: $(this).serialize(), // reads the data ...
success: function(data) {
alert("data Updated Successfully");
window.location = 'login.html';
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mySpan4">
<table>
<tr>
<td>
Name : abc
</td>
<td>
<input type="radio" name="game[0]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[0]" value="Father">Father
</td>
</tr>
<tr>
<td>
Name : def
</td>
<td>
<input type="radio" name="game[1]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[1]" value="Father">Father
</td>
</tr>
<tr>
<td>
Name : ghi
</td>
<td>
<input type="radio" name="game[2]" value="Mother">Mother
</td>
<td>
<input type="radio" name="game[2]" value="Father">Father
</td>
</tr>
</table>
<input name="submit" type="submit" id="submit" value="submit">
</form>


Loop through the radio buttons and check weather its checked.
$(input[type="radio"]).each(function(val, i){
if($(val.is('checked'))){
//all checked
}else{
//Not all checked
}
})

Related

Radio button answer appears in <textarea> but then disappears quickly [duplicate]

This question already has answers here:
Disable form auto submit on button click
(6 answers)
Closed 1 year ago.
Project:
create 4 radio buttons
user clicks on an option and submits
answer should appear in a textarea box
Why is it when I click on a specific radio button option, and then the submit button, the value of the radio button appears in the textarea space for a split second and then disappears?
Thanks heaps!
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>

Use onsubmit="event.preventDefault();" on your form element:
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Edit:
You was asking for prevent reloading website after submitting form, so I was not checking other functionalitty. Now I repaired and simplified your snippet, so it selects correctly:
document.getElementById("clickMePlease").onclick = function() {
var theOptionPicked = document.querySelector('input[name="nameQuestion"]:checked').value;
document.myForm.txtOutput.value = "You have picked " + theOptionPicked;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>

javascript function check box values without submit button in php

I want to insert the checkbox values without submit button but i cant get my checkbox values on my jquery code please get me over this problem which jquery function i have to use to get my values i'm new this script
<?php
date_default_timezone_set('Asia/Kolkata');
$a=date('H');
$b=8;$c=15;
if($b<$a&&$a<=$c)
{
$status='check="unchecked"';
}
else
{
$status = 'disabled="disabled"';
}
?>
<form >
<div align="center">
<table>
<tr>
<td>
<p>S.NO</p>
</td>
<td>
<p>Check Box</p>
</td>
<td>
<p>Activity Name</p>
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input type="checkbox" class="get_value" value="Bod1" <?php echo $status ?> />
</td>
<td>
<label for="Bod1">BOD1 </label>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<input type="checkbox" class="get_value"value="Bod2"<?php echo $status ?> />
</td>
<td>
<label for="Bod2">BOD2 </label>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<input type="checkbox" class="get_value" value="Bod3"<?php echo $status ?>/>
</td>
<td>
<label for="Bod3">BOD3</label>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
<input type="checkbox" class="get_value" value="Bod4" <?php echo $status ?>/>
</td>
<td>
<label for="Bod4">BOD4 </label>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
<input type="checkbox" class="get_value" value="Bod5" <?php echo $status ?> />
</td>
<td>
<label for="Bod5">BOD5 </label>
</td>
</tr>
</div>
</div>
</form>
<script>
$(document).ready( function () {
var languages=[];
//$.each($("input[name='checklist[]']:checked"), function(){
/ alert($(this).val());
// $("input[name='checklist[]']").each( function () {
var checkedvalue=$('.check_list:checked').val();
var checkedvalue=null;
var inputelements=document.getelementbyclassname('check_list');
for(var i=0;inputelements[i];i++){
if(inputelements[i].checked){
checkedvalue=inputelements[i].value;
});
checkedvalue=checkedvalue.toString();
$.ajax({
url:"dummyeodcheckbox.php";
type:"post"
data:{languages:languages};
success:function(data){
var result=result.data;
alert("function called successfully");
}
});
});
});
</script>

check this , hope it will help you. this is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="form1">
<input type="checkbox" name="checkboxList[]" value="1">value1</input>
<input type="checkbox" name="checkboxList[]" value="2">value2</input>
<input type="checkbox" name="checkboxList[]" value="3">value3</input>
</form>
<script>
$("input[type=checkbox]").on("change", function () {
var ids = [];
$('input[type=checkbox]:checked').each(function () {
ids.push($(this).val());
});
$.ajax({
url: "test.php",
type: "POST",
async: true,
cache: false,
data: ({value: ids}),
dataType: "text",
success: function (data) {
alert(data)
}
});
});
</script>
then create test.php file
<?php
print_r($_POST['value']);
?>
in test.php file make your action.

JQuery Two 'Select All' Checkboxes Across 2 Tables

I have two tables that are filled with a number of checkboxes (the number is variable based on a retrieval profile defined on a previous screen). I've implemented a Select All check box at the top of each table with the following:
$('#select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
But this function selects all checkboxes in both tables (as it is poorly written to do). Is there an easy method of having the code select all checkboxes in each distinct tables.
Thanks.

You need to make your css more selective. It may not be necessary to use ids and an entirely different click function for each. You can probably just have a single click function bound to both and use the right selector, but hard to know without seeing your html.
If you post your html it will make it easier to help you, but you need something like the following:
$('#select_all1').bind('click', function() {
var checkedState = this.checked;
$('#table1 :checkbox').each(function() {
this.checked = checkedState;
});
});
$('#select_all2').bind('click', function() {
var checkedState = this.checked;
$('#table2 :checkbox').each(function() {
this.checked = checkedState;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all1"></input>
<table id="table1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<input type="checkbox" id="select_all2"></input>
<table id="table2">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>

It is advisable you use class attribute for your table since Id's are supposed to be unique.
Create a variable to store value for table closest to checkbox current checkbox triggered and Concatenate the variable with Selector.
$('.selectAll').bind('click', function() {
var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
var checkedState = this.checked;//variable for checkbox checked.
$(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
this.checked = checkedState;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
<tr>
<th> <input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="1"></td>
<td>Hello</td>
</tr>
<tr>
<td><input type="checkbox" id="2"></td>
<td>Hi</td>
</tr>
</table>
<table class="checkTable">
<tr>
<th><input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="3"></td>
<td>One</td>
</tr>
<tr>
<td><input type="checkbox" id="4"></td>
<td>Two</td>
</tr>
</table>

Use different id for different table or use class for table instead of id like so:
$('.select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});

Javascript UK Sort code validation with three input field

I have one payment page where I have three field called sort code each field can have 2 two digit I want to write java script code to validate this field and as user type 2 digit in first field its should jump to next field. how to validate static sort code.

$('.input').on('keyup', function(e) {
if ($(this).length == 2) {
$('.next-input').focus();
}
}

You'll have to create a collection of your inputs, and proceed to the next item in the collection after the second letter is typed.
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$inputs.eq($inputs.index(this) + 1).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1">
</td>
<td>
<input type="text" class="input-class input-2">
</td>
<td>
<input type="text" class="input-class input-3">
</td>
<td>
<input type="text" class="input-class input-4">
</td>
<td>
<input type="text" class="input-class input-5">
</td>
</tr>
</table>
</form>
If you'd like a more fine tuned solution, you can add as a data-attribute the selector of the next input
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$($(this).data('next')).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1" data-next=".input-3">
</td>
<td>
<input type="text" class="input-class input-2" data-next=".input-4">
</td>
<td>
<input type="text" class="input-class input-3" data-next=".input-5">
</td>
<td>
<input type="text" class="input-class input-4" data-next=".input-1">
</td>
<td>
<input type="text" class="input-class input-5" data-next=".input-2">
</td>
</tr>
</table>
</form>
This is just the "go to next" code, no validation is performed.

Skip First Row in html table after javascript

My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.
With Heading demo doent work as there is text on first row
Demo With out heading skips last row working
HTML
<table border="1" id="Positions_names">
<tbody>
<tr>
<td align="center">text heading
</td>
<td>
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
</tr>
<tr>
<td align="center">b
<input type="hidden" value="b">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">c
<input type="hidden" value="c">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">d
<input type="hidden" value="d">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
</tbody>
</table>
<input type="submit" onclick="save_election_req_details();" id="submit_positions">
js:
$('#submit_positions').click(function () {
var x = document.getElementById("Positions_names").rows.length;
if(x=="1")
{
alert("Select Some Details to Contunue");
}
else {
var html = '';
var arr = [];
var valid = true;
$('#Positions_names tr').each(function (index, me) {
if (index < $('#Positions_names tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function (index, me) {
if ($(me).val().length == 0) valid = false;
});
var selects = $('select', me);
selects.each(function (index, me) {
if ($(me)[0].selectedIndex == 0) valid = false;
});
if (valid){
arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');
}
}
});
if (valid) {
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
alert(html);
} else
{
alert("Fill the Price or Select the Created Product");
}
}
});

Maybe like this? FIDDLE
I just added another condition in your if-clause.
Before:
if (index < $('#Positions_names tr').length - 1 && valid) {
After:
if (index < $('#Positions_names tr').length && valid && index >= 1) {
Alternatively:
if (index >= 1 && valid) {

try this
$('#Positions_names tr:gt(0)').each(function (index, me) {

$('tbody tr').each(function(){
$(this).find('td:eq(5)').text('$145');
});
In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body
jsFiddle
Some Refrences, may Help you.
each()
find()
:eq() Selector
text()

Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.
$('form').submit(function(e) {
//prevents the form from submitting
e.preventDefault();
//pushes the strings into arrays to be joined by commas later
var chunck = [];
//foreach tr in tbody
$('tbody tr')
//do not select first or last child tr
.not(':last-child,:first-child')
//find the inputs an foreach
.find('input').each(function() {
//get the name and the value
var name = $(this).attr("name");
var value = $(this).val();
//if the value is not empty then push it to the string
if (value.length > 0) {
chunck.push("('" + name + "','" + value + "')");
}
})
//chunck.join() puts commas between array elements
var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
alert(string);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<thead>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>
<input name='a' />
</td>
</tr>
<tr>
<td>b</td>
<td>
<input name='b' />
</td>
</tr>
<tr>
<td>c</td>
<td>
<input name='c' />
</td>
</tr>
<tr>
<td>d</td>
<td>
<input name='d' />
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>

Categories