Is there a way to get the custom HTML5 data-* attributes for the selected radio button when you submit a form? The value does not seem to get picked up by serializeArray().
HTML
<form id="preference-form">
<table>
<tr class ="result">
<td width="100%">{{Title}}</td>
<td><input type="radio" id="radio-{{Project_No}}-1" data-application="{{Application_ID}}" name="{{Project_ID}}" value="1"></td>
<td><input type="radio" id="radio-{{Project_No}}-2" data-application="{{Application_ID}}" name="{{Project_ID}}" value="2"></td>
<td><input type="radio" id="radio-{{Project_No}}-3" data-application="{{Application_ID}}" name="{{Project_ID}}" value="3"></td>
<td><input type="radio" id="radio-{{Project_No}}-9" data-application="{{Application_ID}}" name="{{Project_ID}}" value="9"></td>
</tr>
</table>
</form>
JavaScript
$("#preference-form).on('submit', function() {
var data = $(this).serializeArray();
console.log(data)
});
This outputs the name and value fields, but I can't seem to find a simple answer about the data-* fields. Unfortunately, I need all three pieces of information in order to perform an update on the database record, and from what I understand:
Each ID and Value field has to be unique,
Each name field has to be identical to group the elements.
I think the tricky part for this is the multiple elements compared to a single element.
Based on comment that all you have is radios; writing your own serializer is simple.
First I would put the data attribute on the <tr> for less repetition
<tr data-application="{{Application_ID}}">
Then you would do something like:
var data = $(this).find('tr:has(:radio:checked)').map(function(){
var $row=$(this), radio = $row.find(':radio:checked')[0]
return {
app: $row.data('application'),
name: radio.name,
value: radio.value
}
}).get()
You are missing #
$('#preference-form').on('submit', function(e) {
Use a hidden input for the data-* attribute values. The following demo sends to a live test server and the response will be displayed in the iframe below.
$('#preference-form').on('submit', function(e) {
radData(e);
var data = $(this).serializeArray();
console.log(data);
});
var radData = e => {
$(':radio:checked').each(function(e) {
var dataSet = $(this).data('application');
$(this).closest('tr').find('.dataSet').val(dataSet);
});
}
.as-console-wrapper {
width: 350px;
min-height: 100%;
margin-left: 45%;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
.hide {
display: none
}
<form id="preference-form" action='https://httpbin.org/post' method='post' target='response'>
<table width='100%'>
<tr class="result">
<td><input type="radio" id="rad1" data-application="rad1" name="rad1" value="1"></td>
<td><input type="radio" id="rad2" data-application="rad2" name="rad1" value="2"></td>
<td><input type="radio" id="rad3" data-application="rad3" name="rad1" value="3"></td>
<td><input type="radio" id="rad9" data-application="rad9" name="rad1" value="9">
</td>
<td class='hide'>
<input class='dataSet' name='dataSet1' type='hidden'>
</td>
</tr>
<tr class="result">
<td><input type="radio" id="rad4" data-application="rad4" name="rad2" value="4"></td>
<td><input type="radio" id="rad5" data-application="rad5" name="rad2" value="5"></td>
<td><input type="radio" id="rad6" data-application="rad6" name="rad2" value="6"></td>
<td><input type="radio" id="radA" data-application="radA" name="rad2" value="A">
</td>
<td class='hide'>
<input class='dataSet' name='dataSet2' type='hidden'>
</td>
</tr>
<tr class="result">
<td><input type="radio" id="rad7" data-application="rad7" name="rad3" value="7"></td>
<td><input type="radio" id="rad8" data-application="rad8" name="rad3" value="8"></td>
<td><input type="radio" id="radB" data-application="radB" name="rad3" value="B"></td>
<td><input type="radio" id="radC" data-application="radC" name="rad3" value="C">
</td>
<td class='hide'>
<input class='dataSet' name='dataSet3' type='hidden'>
</td>
</tr>
</table>
<input type='submit'>
</form>
<iframe name='response'></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I have been searching solutions for this and found that the most effective way is through a hacky workaround like this, but none of them has posted a working way to catching every tick and untick box for a dynamic input row using a lot of checkbox arrays.
I looked around and saw a script way -- let hidden inputs be the POST source and change value according to their adjacent checkbox upon submit. However the jquery doesn't seem to work -- it always submits a value of 0 (whatever the value attribute inside hidden inputs.
$(document).ready(function() {
$('#frm').submit(function() {
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
Your code works
I will delete this answer once we have discussed it
I have changed hidden to text and added preventDefault to show it works
$(document).ready(function() {
$('#frm').on("submit",function(e) {
e.preventDefault(); //while testing
$('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>
Consider the following example.
$(function() {
function getTableData(table) {
var results = [];
$("tbody > tr", table).each(function(i, row) {
results.push({
id: $(row).data("uid"),
isHeadofHousehold: $("input", row).eq(0).prop("checked"),
isEmployed: $("input", row).eq(1).prop("checked")
});
});
return results;
}
$('#frm').on("submit", function(e) {
e.preventDefault();
var formData = getTableData($("#myTable"));
console.log(formData);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
<td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
You now have:
[
{
"id": 1001,
"isHeadofHousehold": true,
"isEmployed": true
},
{
"id": 1002,
"isHeadofHousehold": false,
"isEmployed": false
}
]
You can then use AJAX to POST this data back to PHP so the changes can be saved to SQL. As mentioned, you can switch them to 1 and 0 respectively if you choose.
Update
Returning to OP's desired method, consider the following.
$(function() {
$("#frm").on("change", "input[type='checkbox']", function(event) {
$(this).prev(".checkboxHandler").val($(this).prop("checked") ? 1 : 0);
});
});
.checkbox {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Head of Household</th>
<th>Employed</th>
</tr>
</thead>
<tbody>
<tr data-uid="1001">
<td>Homer Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="1" />
<input type="checkbox" checked />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="1" />
<input type="checkbox" checked />
</td>
</tr>
<tr data-uid="1002">
<td>Marge Simpson</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0" />
<input type="checkbox" />
</td>
<td class="checkbox">
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0" />
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Save" />
</form>
This updates the hidden text box value when a User makes a change.
If you are insistent on using the original code, use the following:
$('input[type="checkbox"]:checked').prevAll('.checkboxHandler').val(1);
I strongly advise not using this, as it's a one way logic and if the User unchecks a box before the form is submitted, the change will not be captured.
Update 2
Based on the Top rated answer here, you could also do this:
<td>
<input type="hidden" name="isHeadOfFamily[]" value="0">
<input type="checkbox" name="isHeadOfFamily[]" value="1">
</td>
<td>
<input type="hidden" name="isEmployed[]" value="0">
<input type="checkbox" name="isEmployed[]" value="1">
</td>
The only caveat is that if the User checks a box, both values would get sent. So as suggested, disable the hidden upon submit if unchecked.
$("#frm").submit(function(){
$('input[type="checkbox"]:checked').prevAll().prop("disabled", true);
});
I am building a personality assessment page. However, I am seriously stuck and at this point, I cannot even understand where I went wrong. (Psychology student here, so this world is new to me.)
<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return validateForm()">
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="submit" onclick="get();">Get Results</button></th>
</tr>
</form>
Now I am adding here following script:
function get() {
var res1 = document.getElementsByName("st1").value;
var res2 = document.getElementsByName("st2").value;
var x = res1 + res2;
if (x < 0) {
document.getElementById('result').innerHTML = x;
}
}
And answer.html consists of
<div id="result"></div>
I cannot seem to get the value no matter how hard I try. I've tried doing id="st1_1" and getElementById, but it still won't do it.
Any suggestions or ideas what am I doing wrong?
Thank you
document.getElementsByName returns a NodeList, so there are multiple elements. As a result, it doesn't have a value property so res1 and res2 are undefined.
Try changing document.getElementsByName("st1").value to document.querySelector("[name=\"st1\"]:checked").value. If you get an error message like "TypeError: Cannot read property 'value' of null" then it means that none of the inputs with the name "st1" is checked.
Adding to James Long's answer,
Open the console on the webpage and type
document.getElementsByName("st1");
You will get
[<input type="radio" name="st1" class="dis" value="-1">, <input type="radio" name="st1" class="na" value="0">, <input type="radio" name="st1" class="agg" value="1">]
This indicates that you the above code returns an array. Now to select either of the <input> tags, you can use document.getElementsByName("st1")[0] which will select the first <input>.
To find out which input/s have been selected, iterate over the inputs and find the total sum. If you changed your values to
<input type="radio" name="st#" class="dis" value="1">
<input type="radio" name="st#" class="na" value="2">
<input type="radio" name="st#" class="agg" value="4">
Then if the sum is 1, then first one is selected, if it is 2, then second is selected, if 3 then first two were selected, if 4 then third is selected, if 5 then first and third, 6 then second and third, 7 then all three.
function get() {
var res1 = document.querySelector('input[name="st1"]:checked').value;
var res2 = document.querySelector('input[name="st2"]:checked').value;
console.log("res1="+res1);
console.log("res2="+res2);
var x = parseInt(res1) + parseInt(res2);
// if (x < 0) {
document.getElementById('result').innerHTML = x;
// }
}
<form method="get" class="personality_form" id="personality_form">
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="button" onclick="get();">Get Results</button></th>
</tr>
</table>
</form>
<div id="result"></div>
Please review working code this may help to resolve an issue. You should not use both "onClick() on submit button" and "OnSubmit on form post" at a time.
click()
This method is a shortcut for in the first two variations and in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. click() event bind with a mouse. There are multiple events available for the mouse.
submit()
submit() This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third. This method belongs to form event. There are also more events which are specifically bound with HTML form only.
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.
$(document).ready(function() {
$(".personality_form").on("submit", function(e) {
e.preventDefault();
getData();
});
function getData() {
var res1 = $("input[name='st1']").val();
var res2 = $("input[name='st2']").val();
var x = parseInt(res1) + parseInt(res2);
if (x < 0) {
$('.result').html(x);
}
}
function validateForm() {
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" class="personality_form" id="personality_form">
<tr>
<td>Statement1</td>
<td>
<input type="radio" name="st1" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st1" class="na" value="0">
</td>
<td>
<input type="radio" name="st1" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement2</td>
<td>
<input type="radio" name="st2" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st2" class="na" value="0">
</td>
<td>
<input type="radio" name="st2" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement3</td>
<td>
<input type="radio" name="st3" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st3" class="na" value="0">
</td>
<td>
<input type="radio" name="st3" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement4</td>
<td>
<input type="radio" name="st4" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st4" class="na" value="0">
</td>
<td>
<input type="radio" name="st4" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement5</td>
<td>
<input type="radio" name="st5" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st5" class="na" value="0">
</td>
<td>
<input type="radio" name="st5" class="agg" value="1">
</td>
</tr>
<tr>
<th colspan="4">
<button type="submit" class="btnSubmit">Get Results</button>
</th>
</tr>
</form>
<div class="result">
</div>
getElementsByName returns a live nodelist so you can't immediately grab the value. You need to iterate over the nodelist (or get the node you want using array notation) and then add the values.
However, what you might find easier is to use querySelectorAll to pick up all the checked buttons (document.querySelectorAll(":checked")) and iterate over those instead, making sure that you convert the string value to a number on each iteration when you add the values together.
function get() {
var checked = document.querySelectorAll(":checked");
let total = 0;
for (let i = 0; i < checked.length; i++) {
total += Number(checked[i].value);
}
document.getElementById('result').textContent = total;
}
document.querySelector('button').addEventListener('click', get, false);
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
</table>
<button>Get!</button>
<div id="result"></div>
this might be a stupid question but I need to get values of checked checkboxes of a specific row.
<form method="POST" action="flight_cart.php">
<table>
<tr id=1>
<td><input id="foodType" type="checkbox" value="Burger">Burger</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=2>
<td><input id="foodType" type="checkbox" value="Sandwich">Sandwich</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr id=3>
<td><input id="foodType" type="checkbox" value="Sub">Sub</input></td>
<td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
<td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
<td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
</tr>
<tr><td><button type="submit">Add to Order</td></tr>
</table>
</form>
So basically, I want users to be able to pick for example: Burger with jalapeno, Sandwich with jalapeno, mustard, and chili, and sub with chili only. And storing them into an array so I can pass it to cart page. Thank you in advance!
use code
$("tr[id='1']").find("input[type='checkbox']:checked")
Just add some id to form,
var choices=[];
$("#formId input:checkbox:checked").each(function() {
choices.push($(this)[0].value);
});
and you will get array of all selected checkboxes in form.
Try this, it might be what you are looking for or it should give you a good idea about how to solve your problem
Note: It is not good practice to have multiple elements with the same Id. Use class for that
This example also checks that you have selected a foodtype before it pushes the data into the array.
$("table button").click(function(e) {
e.preventDefault()
var food = [];
$("table tr").each(function() {
if ($(this).find(".foodType").prop("checked") == true) {
var values = $(this).find('input:checkbox:checked').map(function() {
return this.value;
}).get();
food.push(values)
}
})
console.log(food)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="">
<table>
<tr id=1>
<td><input class="foodType" type="checkbox" value="Burger">Burger</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=2>
<td><input class="foodType" type="checkbox" value="Sandwich">Sandwich</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr id=3>
<td><input class="foodType" type="checkbox" value="Sub">Sub</input>
</td>
<td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
</td>
<td><input class="extras" type="checkbox" value="mustard">Mustard</input>
</td>
<td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
</td>
</tr>
<tr>
<td><button type="submit">Add to Order</td></tr>
</table>
</form>
// What I want to do is allow the user to select many checkboxes. In order to make a booking the user must select atleast one seat number checkbox(this checkbox has to be one or many of the seat number checkboxes). They can also select child,wheelchair or special diet, but in order to do so, the checkbox that belongs to the corresponding seat number must be checked. If it isnt a validation or popup must occur stating that the seat number must be checked. Meaning that if a user wants to check either special diet, wheelchair or child the seat number must be checked. If the user clicks the submit button without any checkboxes selected than a validation should occur or popup stating that atleast one checkbox must be selected.THis is my current page layout
this is my nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
p{
font-size: 16px;
}
</style>
<body>
<?php
// Start the session
session_start();
?>
<?php
$str = $_GET['Confirm'];
$array = (explode(",",$str));
?>
<h1>Booking Details</h1>
Flight Details:
<table>
<tr>
<td> Route_no
</td>
<td><?php echo $array[0] ?>
</td>
</tr>
<tr>
<td>
To_city</td>
<td> <?php echo $array[1] ?>
</td>
</tr>
<tr>
<td>
From_city</td>
<td> <?php echo $array[2] ?>
</td>
</tr>
<tr>
<td>
Price</td>
<td> $<?php echo $array[3] ?>
</td>
</tr>
</table>
<?php
// Set session variables
$_SESSION["route_no"] = $array[0];
$_SESSION["to_city"] = $array[1];
$_SESSION["from_city"] = $array[2];
$_SESSION["price"] = $array[3];
echo "Session variables for this booking have been set.";
?>
<form action="Yourbookings.php" method="get">
<table>
<tr>
<td>Seat #</td>
<td>Child </td>
<td>WheelChair</td>
<td>Special Diet</td>
</tr>
<tr>
<td>Seat 1 <input type="checkbox" name="seat1" value="2"> </td>
<td> <input type="checkbox" name="Child" value="Child1"> </td>
<td> <input type="checkbox" name="WheelChair" value="WheelChair1"> </td>
<td> <input type="checkbox" name="Special Diet" value="SpecialDiet1"> </td>
</tr>
<tr>
<td>Seat 2 <input type="checkbox" name="seat2" value="1"> </td>
<td> <input type="checkbox" name="Child2" value="Child2"> </td>
<td> <input type="checkbox" name="WheelChair2" value="WheelChair2"> </td>
<td> <input type="checkbox" name="Special Diet2" value="SpecialDiet2"> </td>
</tr>
<tr>
<td>Seat 3 <input type="checkbox" name="seat3" value="seat3"> </td>
<td> <input type="checkbox" name="Child3" value="Child3"> </td>
<td> <input type="checkbox" name="WheelChair3" value="WheelChair3"> </td>
<td> <input type="checkbox" name="Special Diet3" value="SpecialDiet3"> </td>
</tr>
<tr>
<td>Seat 4 <input type="checkbox" name="seat4" value="seat4"> </td>
<td> <input type="checkbox" name="Child4" value="Child14"> </td>
<td> <input type="checkbox" name="WheelChair4" value="WheelChair4"> </td>
<td> <input type="checkbox" name="Special Diet4" value="SpecialDiet4"> </td>
</tr>
<tr>
<td>Seat 5 <input type="checkbox" name="seat5" value="seat5"> </td>
<td> <input type="checkbox" name="Child5" value="Child5"> </td>
<td> <input type="checkbox" name="WheelChair5" value="WheelChair5"> </td>
<td> <input type="checkbox" name="Special Diet5" value="SpecialDiet5"> </td>
</tr>
</table>
<?php
$_SESSION["price"] = $array[3];
?>
Total = $variable??
<input type="submit" name="Add booking" value="Add_booking">
</form>
</body>
</head>
</html>
In my opinion, forget about all the alerts and such, just use arrayed check box keys:
<tr>
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[child]" value="1"></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[child]" value="1"></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[child]" value="1"></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1"></td>
</tr>
<tr>
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[child]" value="1"></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1"></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1"></td>
</tr>
Upon submission your array will look like this:
Array
(
[seat1] => Array
(
[child] => 1
[wheelchair] => 1
)
[seat2] => Array
(
[wheelchair] => 1
)
[seat3] => Array
(
[wheelchair] => 1
[specialdiet] => 1
)
[seat4] => Array
(
[child] => 1
[wheelchair] => 1
[specialdiet] => 1
)
[Add_booking] => Add_booking
)
EDIT:
Based on your clarification, you need some javascript (jQuery):
Demo:
https://jsfiddle.net/9e9embjt/
JavaScript:
$(document).ready(function(){
$(this).on('click',".seat_selector",function() {
var thisBtn = $(this);
var isChk = thisBtn.is(":checked");
var thisWrap = thisBtn.parents('.seat_selector_wrap').find("input[type=checkbox]");
if(isChk)
thisWrap.attr("disabled",false);
else {
thisWrap.attr("disabled",true);
thisBtn.attr("disabled",false);
}
var allSeats = $(".seat_selector");
var disable = true;
$.each(allSeats, function(k,v) {
if($(v).is(":checked")) {
disable = false;
return false;
}
});
$("#submitter").attr('disabled',disable);
});
});
HTML:
<table>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 1</td>
<td><input type="checkbox" name="seat1[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat1[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat1[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 2</td>
<td><input type="checkbox" name="seat2[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat2[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat2[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 3</td>
<td><input type="checkbox" name="seat3[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat3[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat3[specialdiet]" value="1" disabled /></td>
</tr>
<tr class="seat_selector_wrap">
<td>Seat 4</td>
<td><input type="checkbox" name="seat4[seat]" value="1" class="seat_selector" /></td>
<td><input type="checkbox" name="seat4[child]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[wheelchair]" value="1" disabled /></td>
<td><input type="checkbox" name="seat4[specialdiet]" value="1" disabled /></td>
</tr>
</table>
<input type="submit" name="Add booking" value="Add_booking" id="submitter" disabled />
An asp:DataList has generated the below html. A Q&A form, where each set has the Qno, Question and options.
//Repeating Set
<table id="tblQuestions" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" value="1/><label>sometext</label</td>
<td><input type="radio" value="2/><label>sometext</label</td>
<td><input type="radio" value="3/><label>sometext</label</td>
</tr>
</table>
</td>
</tr>
</table>
On a button click, I would like to check that all questions are answered.
JS:
//Get the questionslist
//Loop thro' them, assigning each list to a table.
// and then get the Qno and optionslist in that table
var QuestionsList = document.getElementsByClassName("tblQuestions");
function AllQuestionsAnswered() {
for(var i = 0;i<QuestionsList.length;i++)
{
var tbl = QuestionsList[i];
var OptionsList = $('tbl.clOptions input:radio');
$('tbl tr').each(function () {
var QuestionNo = $(this).find('.lbQno').text();
if(QuestionId > 0){
//perform check on each radiobutton of question
}
});
}
}
I am failing here on how to get the controls. All the 3 definitions inside the for loop arent working. How should I proceed further.
Let us assume that you can correct all problems with HTML:
missing " in input's value.
missing name for inputs.
missing > for </label>.
Then you can use this code for check all necessary questions.
Filter all questions that should be checked (based on .lbQno text).
For each filtered questions:
Get length of selected radio buttons for current question.
If there is no selected radio buttons (length equals to 0), then show an error and stop checking.
JavaScript:
$(document).ready(function()
{
function filterElement()
{
return parseInt($(this).find(".lbQno").text()) > 0;
}
$('#check').click(function()
{
$(".tblQuestions").filter(filterElement).each(function()
{
var checkedCount = $(this).find('.clOptions input:radio:checked').length;
if (!checkedCount)
{
alert($(this).find(".lbQno").next().text() + " is not answered");
return false;
}
});
});
});
Fiddle.
Related HTML:
<table id="tblQuestions1" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>First question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q1" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q1" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions2" class="tblQuestions">
<tr><td><span class="lbQno">1</span><span>Second question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q2" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q2" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="tblQuestions3" class="tblQuestions">
<tr><td><span class="lbQno">0</span><span>Unnecessary question</span></td></tr>
<tr>
<td>
<table class="clOptions">
<tr>
<td><input type="radio" name="q0" value="1"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="2"/><label>sometext</label></td>
<td><input type="radio" name="q0" value="3"/><label>sometext</label></td>
</tr>
</table>
</td>
</tr>
</table>
<input id="check" type="button" value="check"/>