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

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

Related

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>

validating all the html rows when the form is submitted

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()">

Show table cell function

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"

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.

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

Categories

Resources