Develop Reference

How to disable an option when selected more than 5 times in dynamically generated rows?

Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.

You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>

Add new row with button jquery then remove the button

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.

how to display the product of checkbox and dropdown list in number box

here is my catalogue codes. want to display the value of the checkbox multiplied to the value of the dropdown list and output the product to the . just html and javascript codes are to be used.
<table align=center border=1>
<tr colspan=3>
<td colspan=3><h2>Specialty Cakes</h2></td>
</tr>
<tr>
<td><img src=special\blackforest_small.jpg valign=center-right><br><center>Black Forest</td>
<td>Chocolate sponge layered with sugar syrup and Kirsch flavouring, white mousse and dark sweet cherries.</td>
<td><input type="checkbox" id="check1" name="check1" value="550.00"onclick="product1()">Buy P550.00</input><br><input type="number" id="total1" name="total1" value="P0.00"size="8"></input><br>
QTY: <select id="qty1" name="qty1" onchange="product1()">
<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>
<option value="9">9</option>
</select>
</td>
</tr>
</table>
<script>
var m = document.getElementById("check1").checked;
function product1(){
var x = document.getElementById("check1").value;
var y = document.getElementById("qty1").value;
var z = 0;
if (m = true){
z = "P" + x * y;
}
document.getElementById("total1").value = z;
}
</script>

You have your input with id total1 as a type = number - but you are assigning it a text value of P0.00 change its type to text and it will work, or give it a numeric value.

php script is not receiving data param of Javascript load() method

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>";
}
}
?>

Multi select in form?

I am trying to auto populate two drop down fields in form with two rows of same table.
Getting confused on JavaScript
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option>
</select>
</td>
</tr>
And i want to auto populate select 1000,1001,1002 for Center USA 1003 1004 for Center UK
<tr>
<td><label>Center</label></td>
<td><select name="center">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
Any help pl

Try this:
HTML:
<tr>
<td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
<td><select id="cardid" name="cardid" >
<option value="">Select</option>
<option value="1000">1000</option>
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
<option value="1004">1004</option></select></td>
</tr>
<tr>
<td><label>Center</label> </td>
<td><select id="center" name="center">
<option value="USA ">USA </option>
<option value="UK "> UK </option>
</select> </td>
</tr>
Javascript:
var usa = "1000,1001,1002";
var uk = "1003,1004";
$(function(){
$('#cardid').change(function(){
if(usa.indexOf($(this).val()) != -1){
// found usa
$('#center').val($('#center > option:first-child').val());
}
else if(uk.indexOf($(this).val()) != -1){
//found uk
$('#center').val($('#center > option:last-child').val());
}
});
});
Here is demo