Is there a way that I can change the style of a selected row, to whatever with a checkbox selection. The styles will change for the selected rows when the "click me" button is selected. I am able to delete the rows (with another button), but not change the styles of the selected rows. The rows will either be deleted or the style will change.
Can someone assist me, or show me in the right direction for the styling issue?
HTML:
<input class="dent" type="button" value="style">
<input class="delBtn" type="button" value="Delete">
<table>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
</table>
JS to delete a row
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = 0; i < boxes.length; i++) {
let box = boxes[i];
if (box.checked) {
let rowTag = box.parentNode.parentNode;
let tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
I have made a few changes to your HTML, adding ID's for the buttons and rows. Also I added data-sets to the check boxes so you can know which rows to execute the task (change style or remove)
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.parentNode.removeChild(rowTag);
}
}
}
function style() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.style.backgroundColor = "red";
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
document.getElementById("styleButton").addEventListener("click", style);
<input class="dent" type="button" value="style" id="styleButton">
<input class="delBtn" type="button" value="Delete" id="deleteButton">
<table>
<tr id="row1">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row1">
</td>
<td><input type="text" value="I am 1"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row2">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row2">
</td>
<td><input type="text" value="I am 2"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row3">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row3">
</td>
<td><input type="text" value="I am 3"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row4">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row4">
</td>
<td><input type="text" value="I am 4"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
Related
I have a table and each row of the table has a checkbox, textbox and name field.
Following is the html
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
<td>Name</td>
<td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>
i want to read the value as soon as it is entered in any of the text box with name = position
Please Have a look
$("input[name='position']").keyup(function() {
var valueOfInput = $(this).val(); //value
var indexOfTr = $(this).parents('tr').index(); //index
console.log(valueOfInput, '-->', indexOfTr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>
you can use name as array and make common class name for input field...
hope it work...
$('.myclassname').on("keyup",function(){
var row_index = $(this).closest("tr").index();
// row_index = row_index-1; // if you have tr header then enable this also...
var textvalue = $("[name='position[]']").eq(row_index).val();
alert(textvalue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>
Am working on project where i need to display dynamic table using database. Am able to display table but while passing values to another page for editing table am getting problem. Am able to pass only first row of the table. Am using javascript for passing value. Please help me. This is what I have tried till now
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<%
if(rs != null){
while(rs.next()){
%>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" id="dd" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(3)%>" name="two" id="two"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(4)%>" name="thr" id="thr"/></td>
<td><input style="border:0px; width:90px" type="text" value="<%=rs.getString(5)%>" name="fr" id="fr"/></td>
<td><input style="border:0px; width:100px" type="text" value="<%=rs.getString(6)%>" name="fve" id="fve"/></td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun()" value="Update"></td>
</tr>
<% } }
else { out.println("No Record Found"); } %>
</tbody>
</table>
This is my Jscript function
<script>
function myFun(){
var v1 = document.getElementById("one").value;
var v2 = document.getElementById("two").value;
var v3 = document.getElementById("thr").value;
var v4 = document.getElementById("fr").value;
var v5 = document.getElementById("fve").value;
var dd = document.getElementById("dd").value;
window.location.href='DCM_UsrShiftUpdt.jsp?v1='+v1+'&v2='+v2+'&v3='+v3+'&v4='+v4+'&v5='+v5+'&dd='+dd;
}
</script>
Kindly response. Thanks in advance.
Problem with your code is duplicate ids, use dynamic ids, lets take row id:
if(rs != null){
int rowId = 1;
while(rs.next()){ %>
<tr>
<td style="font-weight: bold;"><input style="border:0px; width:100px" name="dd" id="dd<%=rowId%>" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one<%=rowId%>"/></td>
.... so on for other <td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun(<%=rowId%>)" value="Update"></td>
</tr>
<%
rowId++;
}
}
JS
function myFun(rowId){
var v1 = document.getElementById("one"+rowId).value;
//so on for the rest
}
P.S. avoid using JSP scriptlets and use JSTL instead.
IDs need to be UNIQUE. Use parentNode's siblings to gather the input values for the row the button is in
var buts = document.querySelectorAll("[value=Update]");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
var cells = this.parentNode.parentNode.cells, parms = [];
for (var i=0;i<cells.length-1;i++) { // stop at the button
var input = cells[i].querySelector("input");
parms.push(input.name+"="+input.value)
}
console.log(parms.join("&"));
}
}
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
</tbody>
</table>
I want to add in a few formulas into a function called Calc(). I've managed to do the calculation for the total and standard hour. I need help in adding the calculations as the following formula.
Earn Hour = stdHour * Number of Tables
People = (Earn Hour / 6.6) * Number of Days
Earn Days = Number of Tables / (Number of Head Count / stdHour)
Note : Number of Tables, Number of Days and Number of Head Count are user inputs.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function Calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = document.getElementById('stdHour').value = ((tot * 1.15) / 60);
//I do not know how to reference the input box values from `HTML` to here.
}
<head>
<style>
<!--Table designing-->table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" method="get" align="center">
<td align="center">Number of Tables : <input type="text" name="tableNum"><br></td>
<td align="center">Number of Days : <input type="text" name="days"><br></td>
<td align="center">Number of Head Count : <input type="text" name="headC"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="text" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="text" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="text" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="text" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="Calc(),findSum()">Calculate</button></div>
</body>
I believe this is the answer that you are looking for.
You were close, and could just use the .value JavaScript attribute to get the values of the user's inputs.
I also changed the inputs from type="text" to type="number" as this would solve some possible errors.
Though improvements could be made to the JavaScript below, I hope that this is understandable to you.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = ((tot * 1.15) / 60);
document.getElementById('stdHour').value = stdHour;
var earnHour = ((tot * 1.15) / 60) * document.getElementById('numTables').value;
document.getElementById('earnHour').value = earnHour;
document.getElementById('hc').value = (earnHour / 6.6) * document.getElementById('numDays').value;
// Calculated earnDays, but unaware where you want this value to go.
var earnDays = (document.getElementById('numTables').value / (document.getElementById('numHeadCount').value /stdHour));
console.log(earnDays);
}
<!--Table designing-->
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
<head>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" align="center">
<td align="center">Number of Tables : <input type="text" id="numTables"><br></td>
<td align="center">Number of Days : <input type="text" id="numDays"><br></td>
<td align="center">Number of Head Count : <input type="text" id="numHeadCount"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="number" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="number" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="number" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="number" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="number" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="number" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="calc(),findSum()">Calculate</button></div>
</body>
// 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 />
I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});