I'm trying to create a table that have "add" button to add new rows in every new row then remove the previous button. I have a code like this.
$("#insert-more").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Or you can see it here https://jsfiddle.net/f6xcqy2s/.
In that code the add button will show up in every rows, but i wanted the add button just show up in new row only, so there will be one button only. Do you know the way?
Hide the button like below.change the id of the button to a class and bind the button like below.it works perfectly
$('body').on('click','.insert-more',function(){
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).hide();
})
here is the fiddle
you need to put add button outside the #mytable (table) so you can get your desire output only change html part as i pasted here.
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
</tr>
</tbody>
</table>
</table>
<tr>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td></tr></table>
let me know is it ok for you ?
Here first we create an event handler function and assign it to clickHandler. Then when we append the button into the table row after that we assign that click handler to the newly added button using the code as$("#insert-more").click(clickHandler);.
$( document ).ready(function() {
var clickHandler = function() {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
$(this).remove();
$("#insert-more").click(clickHandler);
};
$("#insert-more").click(clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="insert-more btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
Here you go with a solution https://jsfiddle.net/f6xcqy2s/4/
$(document).on('click', "#insert-more", function () {
$('#mytable tbody')
.append(`<tr>${$(this).closest('tr').html()}</tr>`);
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
<thead>
<th>Check</th>
<th>Nama Klien</th>
<th>Nama File</th>
<th>Ukuran</th>
<th>Bahan</th>
<th>Jumlah</th>
<th></th>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" value="" data-toggle="checkbox">
</label>
</td>
<td>
<select class="form-control">
<option value="default">KLIEN :</option>
<option value="default">ELV</option>
<option value="default">ZYTA</option>
<option value="default">LOUSALUNA</option>
<option value="default">MYLADY</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">FILES :</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
<option value="default">TWOTONE 1</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">UKURAN :</option>
<option value="default">110</option>
<option value="default">115</option>
<option value="default">120</option>
<option value="default">130</option>
<option value="default">150</option>
</select>
</td>
<td>
<select class="form-control">
<option value="default">BAHAN :</option>
<option value="default">MAXMARA</option>
<option value="default">VOAL INDO</option>
<option value="default">VOAL INDIA</option>
<option value="default">DIAMOND</option>
<option value="default">SILKY</option>
</select>
</td>
<td><input class="form-control" type="number" name="" value=""></td>
<td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
</tr>
</tbody>
</table>
In the solution, amount of jQuery code is very less.
Hope this will help you.
Related
I have a form as below, Here i am looking to remove tr row if the input text and select option was empty. and the show the table row if any of the input was not empty
As you can see the input was not empty, it was removing the entire row, it is possible check both are not empty then remove
By using Jquery
Note: table rows are dynamically adding
$(function(){
$("table#my_form tr td").each(function(){
$(this).find('input, select').each(function(){
if($(this).val()==""){
$(this).closest('tr.table_row').remove();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="TCS" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="Deloite" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess" selected>Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
</table>
</form>
To check all inputs, you could try something like this. As you mentioned, you are adding rows dynamically, so you would want some other event handler to check again for more bad rows. This code would run once on page load, and then again any time the '#removeBadRows' button is clicked.
$(function () {
removeBadRows();
$(document).on('click', '#removeBadRows', function () {
removeBadRows();
});
});
function removeBadRows() {
$("table#my_form tr").each(function () {
var badCount = 0;
var inputLength = $(this).find('input, select').length;
$(this).find('input, select').each(function () {
if ($(this).val() == "") {
badCount++;
}
});
if (badCount == inputLength) {
$(this).remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="test" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="" selected>Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby" selected>Ruby</option>
</select>
</td>
</tr>
</table>
</form>
This could be the most simple method
$(function(){
$(document).on('change', '.table_row input', function(e) {
if($(this).val()==""){
$(this).closest('.table_row').remove();
}
});
});
I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.
Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview
Sample html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function submitData(){
alert("submit");
}
</script>
</head>
<body>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
check if all data entered or not then the rest data is entered partially
if (sprint && role && project) {.....}
else if (!sprint && !role && !project) {} // do nothing
else {....}
Demo:
function submitData() {
var dataPassed = false,
dataCount = 0,
hasEnteredData = false;
$('#productTable tr:not(:first)').each(function(index) {
var sprint = $(this).find('.sprint :selected').text(),
role = $(this).find('input[name="role"]').val(),
project = $(this).find('.project :selected').text();
if (sprint && role && project) {
dataPassed = true
dataCount++;
}
else if (!sprint && !role && !project) {
// all empty, skip
}
else {
alert('Required data missing in row: ' +
(index + 1) + '\nfill: Sprint, Role, Project')
dataPassed = false;
hasEnteredData = true;
return false;
}
})
if (dataPassed) {
alert('Success, Data count: ' +
dataCount + ' rows, submit?');
// do submit
}
else if (!hasEnteredData) {
alert('No data entered')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" value="submit" onclick="submitData()">
UPDATE: so more accurately it seems the table cell appears and immediately disappears again?
UPDATE UPDATE: it works if I use onmousedown instead of onclick? But of course the second I release the mouse button it disappears again so that won't work either.
So I've searched around and can't seem to make this work. I'm simply trying to make a function so that when I click a button it changes the default display style for a table cell from none to show the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="buildform.js" defer></script>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="buildform.css" />
</head>
<body>
<form id="buildForm">
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tr>
<td colspan="3">Custom Computers Order Form</td>
</tr>
<tr>
<td><label>Operating System</label></td>
<td>
<select id="operatingSys" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="w7h" value="w7h">Windows 7 Home</option>
<option name="w7p" value="w7p">Windows 7 Professional</option>
<option name="w10h" value="w10h">Windows 10 Home</option>
<option name="w10p" value="w10p">Windows 10 Professional</option>
</select>
</td>
<td rowspan=2><label name="displayPrice" id="displayPrice">Display</label></td>
</tr>
<tr>
<td><label>Processor</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Motherboard</label></td>
<td>
<select id="motherboards" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="a" value="a">Motherboard a</option>
<option name="b" value="b">Motherboard a</option>
<option name="c" value="c">Motherboard a</option>
</select>
</td>
</tr>
<tr>
<td rowspan=4><label>RAM</label></td>
<td>
<select id="ram1" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
<button onclick="add()">Add More?</button>
</td>
</tr>
<tr>
<td id="hiddenRam1">
<select id="ram2" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam2">
<select id="ram3" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam3">
<select id="ram4" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Hard Drive</label></td>
<td>
<select id="hardrives" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ssd128gb" value="ssd128gb">128 GB Corsair SSD</option>
<option name="ssd256gb" value="ssd256gb">256 GB Corsair SSD</option>
<option name="hdd500gb" value="hdd500gb">500 GB Western Digital HDD</option>
<option name="hdd1tb" value="hdd1tb">1 TB Western Digital HDD</option>
</select>
</td>
</tr>
<tr>
<td><label>Power Supply</label></td>
<td>
<select id="psus" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="300watt" value="300watt">300 Watt P/S</option>
<option name="400watt" value="400watt">400 Watt P/S</option>
<option name="500watt" value="500watt">500 Watt P/S</option>
<option name="600watt" value="600watt">600 Watt P/S</option>
<option name="700watt" value="700watt">700 Watt P/S</option>
</select>
</td>
</tr>
<tr>
<td><label>Case</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="case1" value="case1">Case 1</option>
<option name="case2" value="case2">Case 2</option>
<option name="case3" value="case3">Case 3</option>
</select>
</td>
</tr>
</table>
The javascript
function add() {
var x = document.getElementById("hidden");
x.style.display = "table-cell";
}
When someone clicks the 'Add More' button, the second select with options should show up. I have no idea what I'm doing wrong.
Nothing at all happens.
Try the following:
x.style.display = "table-cell"
I have a table that shows some information of tickets
check this for the html of table. Check this jsfiddle
how can I loop through each select box click?, select box i.e rows will varies.
please give me some hints.
thank you...
<table id="tableTickets" class="table table-striped custab">
<thead>
<tr>
<th> Ticket Type </th>
<th> REMAINING </th>
<th> Price </th>
<th> Quantity </th>
</tr>
</thead>
<tbody>
<tr id="ticketRow1">
<td id="tdTicketName1">
<input type="hidden" id="ticketId" name="ticketId" value="1">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity1">
100 </td>
<td id="tdTicketPrice1">
<div id="divTicketPrice1">12.30</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty1" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow2">
<td id="tdTicketName2">
<input type="hidden" id="ticketId" name="ticketId" value="2">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity2">
200 </td>
<td id="tdTicketPrice2">
<div id="divTicketPrice2">12.34</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty2" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow3">
<td id="tdTicketName3">
<input type="hidden" id="ticketId" name="ticketId" value="3">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity3">
100 </td>
<td id="tdTicketPrice3">
<div id="divTicketPrice3">23.52</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty3" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow4">
<td id="tdTicketName4">
<input type="hidden" id="ticketId" name="ticketId" value="4">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity4">
200 </td>
<td id="tdTicketPrice4">
<div id="divTicketPrice4">15.41</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty4" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:right;">
<h4 class="heading1">Total <div id="ticketPriceTotal" class="col-sm-12">000</div></h4>
</td>
</tr>
</tbody>
</table>
first give class to to price <div class="price"></div> and then write code given bellow,
$(document).on("change",".form-control",function(){
var total=0;
$("tbody tr").each(function(){
var price=$(this).find(".price").text();
var tickets=$(this).find(".form-control").val();
total=parseFloat(total)+(parseFloat(price)*parseFloat(tickets));
})
alert(total);
});
Check code on fiddle. with below code you can get each select box "onchange" or "onclick" event.
jsfiddle
$(document).ready(function(){
$('select').on('change',function(){
alert($(this).val())
})
})
thank you in advance for your help on this matter. I'm trying to implement a dynamic drop down menu. The region menu is created dynamically upon a selection of a country. The problem is that the country value is not reaching the php script, and so I am unable to create the proper sql statment. I have used a "select col from table" query to verify the dynamic list is indeed being created (just not one based on user's country selection). I am not sure why the "choice" isn't making it over. I'm thinking it may be a problem with my javascript syntax? Any guidance is much appreciated!
FILE: cargo.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#product_country").click(function()
{
$("#product_region").load("../scripts/find_region.php?choice=" + $("#product_country").val());
});
});
html of cargo.php
<table id="menuSelectors" width="850" cellpadding="2">
<form action="cargo.php" method="POST">
<tr>
<td>varietal</td>
<td>type</td>
<td>style</td>
<td>color</td>
<td>country</td>
<td>region</td>
<td>price</td>
<tr>
<td>
<select name="product_varietal" class="selector">
<option value="" selected="selected"></option>
<option value="merlot">merlot</option>
<option value="pinot gris">pinot gris</option>
<option value="chardonnay">chardonnay</option>
</select>
</td>
<td>
<select name="product_type" class="selector">
<option value="" selected="selected"></option>
<option value="sparkling">sparkling</option>
<option value="still">still</option>
<option value="still">effervescent</option>
</select>
</td>
<td>
<select name="product_style" class="selector">
<option value="" selected="selected"></option>
<option value="dry">dry</option>
<option value="sweet">sweet</option>
<option value="semi-sweet">semi-sweet</option>
</select>
</td>
<td>
<select name="product_color" class="selector">
<option value="" selected="selected"></option>
<option value="red">red</option>
<option value="white">white</option>
</select>
</td>
<td>
<select id="product_country" name="product_country" class="selector">
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="united states">United States</option>
</select>
</td>
<td>
<select id="product_region" name="product_region" class="selector">
<option value="" selected="selected">Select Country First</option>
</select>
</td>
<td>
<select name="product_price" class="selector">
<option value="" selected="selected"></option>
<option value="BETWEEN 0 AND 10"> under $10</option>
<option value="BETWEEN 10 AND 20">$10 - $20</option>
<option value="BETWEEN 20 AND 30">$20 - $30</option>
<option value="BETWEEN 40 AND 50">$40 - $50</option>
<option value="BETWEEN 50 AND 100">$50 - $100</option>
<option value="BETWEEN 100 AND 500">$100 over</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="submit" class="submit" value="SUBMIT" /></td>
</tr>
</form>
</table>
File: find_region.php
<?php
//CONNECT
require_once 'connect.php';
$country = mysqli_real_escape_string($_GET['choice']);
$region_result = mysqli_query($con,"SELECT product_region FROM product");
//$region_result = mysqli_query($con,"SELECT wine_region FROM wine_regions WHERE wine_country = '$country'");
if (!$region_result)
{
printf("Error: %s\n", mysqli_error($con));
}
else
{
while ($row = mysqli_fetch_array($region_result))
{
echo "<option>" . $row{'product_region'} . "</option>";
//echo "<option>" . $row{'wine_region'} . "</option>";
}
}
?>