Jquery adding validate rules on select dynamically created

Jquery adding validate rules on select dynamically created - javascript

I'm having trouble making dynamically added inputs required. especially with the "select" input
I have already tried manually checking (wo Jquery validate) if inputs submitted were correct but i encountered the same kind of problem. The "required" class doesn't help either.
Here's the html :
<form id='myform'>
<div>
<div id="addRow">+</div>
<div id="deleteRow">-</div>
</div>
<div>
<table id="tableex">
<tr>
<td>
<select name="selectbox[]" data-selected="" class='selectdyna required'>
<option value="" selected="selected" disabled="disabled">env :</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
</td>
</tr>
</table>
</div>
<div>
<input type='submit' value='Validate'>
</div>
</form>
here's my js:
$(document).ready(function() {
$("#addRow").click(function() {
var str = "<tr>\n" +
" <td id=\"selecttd\">\n" +
" <select name=\"selectbox[]\" class='selectdyna required' data-selected=\"\">\n" +
" <option value=\"\" selected=\"selected\" >env :</option>\n" +
" <option value=\"1\">option1</option>\n" +
" <option value=\"2\">option2</option>\n" +
" <option value=\"3\">option3</option>\n" +
" </select>\n" +
" </td>\n" +
" </tr>";
$("#tableex").append(str)
$('#myform').validate();
$('.selectdyna').rules('add', { 'required': true });
})
$("#deleteRow").click(function() {
if ($("#tableex tr").length > 1) {
$("#tableex tr:last").remove();
} else {
alert("there must been one line minimum.")
}
})
})
here's a link to the fiddle: https://jsfiddle.net/v3tj2c5u/

I don't understand why you require the name of the dropdown that way.
You can do it as below demo
$(document).ready(function() {
$("#addRow").click(function() {
var count= $("#tableex tr").length+1;
var str = "<tr>\n" +
" <td id=\"selecttd\">\n" +
" <select name=\"selectbox"+count+"\" class='selectdyna required' data-selected=\"\">\n" +
" <option value=\"\" selected=\"selected\" >env :</option>\n" +
" <option value=\"1\">option1</option>\n" +
" <option value=\"2\">option2</option>\n" +
" <option value=\"3\">option3</option>\n" +
" </select>\n" +
" </td>\n" +
" </tr>";
$("#tableex").append(str)
$('#myform').validate();
$('.selectdyna').rules('add', { 'required': true });
})
$("#deleteRow").click(function() {
if ($("#tableex tr").length > 1) {
$("#tableex tr:last").remove();
} else {
alert("there must been one line minimum.")
}
})
})
Working demo

Related

Once added, remove a value from dropdown menu and show the next value, also once deleted, add the deleted value once again to the dropdown menu

Currently I am using below procedure to add Month and value to a table using the dropdown menu and text box. My requirement is that once the data is added , remove that Month from the dropdown menu and show the next corresponding Month in the list to the user. Also if the record(s) is/were removed, re-add that removed value(s) to the dropdown menu as well. User need to tick the records from the table that needs to be deleted.
Data insertion method
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder="Enter amount" />
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id="delete" onclick="deleteval('table5')">Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>

This answer both removes and re-adds the clicked items (make sure all answers do both).
It does so by adding a hidden class - not by removing the SELECT option - making it easy to simply un-hide the option if the row is deleted.
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
$("#month option:selected").addClass('hidden'); //<===== Added
let nextMonth = $("#month option:selected").next('option').text(); //<===== Added
$('#month').val(nextMonth);
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
let mnth = $(this).parents("tr").find('td:nth-child(2)').text(); // HERE
$(this).parents("tr").remove();
$('select option').each(function(){ //<================ HERE
if ( $(this).val() === mnth ){
$(this).removeClass('hidden');
}
});
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
.hidden{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder ="Enter amount"/>
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id = "delete" onclick="deleteval('table5')" >Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
UPDATE:
Per comment request, updated to also display the "next" month in the drop-down when a row is added. There is one more thing to do, which I leave as an exercise for the OP. What happens if the user selects the final month? The code can't handle it. Here's how to solve that:
Before you get the "next" month, first get the selected month name (almost same code, just easier).
Then compare that to the text of the last item in the drop-down (start with hard-coding it to "AUGUST", then when you've got that working, figure that out programmatically)
IF the selected month is equal to the last name in the drop-down, set the drop-down to the first option (exact same method as in my code).
Bonne chance!

Try this
var selectbox = $("#month").val();
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
$("#month option:selected").remove();
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$("#month").append('<option value="'+selectbox+'">'+selectbox+'</option>');
$(this).parents("tr").remove();
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder ="Enter amount"/>
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id = "delete" onclick="deleteval('table5')" >Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>

PHP post with dynamic entries created in JS

I have a button that allows the user to add another row to add different types of returned equipment. I am posting this data to another page to print out. If I try and retrieve the data from the post array, I can only get the last in the entry
I've tried setting the name to name="device[]" then adding a value of "key" but since I'm using a drop down select, I can't do that.
<select name="device-type[]">
<option value="" disabled selected hidden>Select Equipment Type</option>
<option value="dvr">DVR</option>
<option value="modem">Modem</option>
<option value="router">Router</option>
<option value="other">Other</option>
</select>
I have a button that calls a JS function to just add another select element identical to that.
JS code:
function addBox(){
$("#devices").append('<select name="device-type" class="focus:outline-none plain-field">\n' +
' <option>Select Equipment Type</option>\n' +
' <option value="dvr">DVR</option>\n' +
' <option value="modem">Modem</option>\n' +
' <option value="router">Router</option>\n' +
' <option value="other">Other</option>\n' +
' </select>\n' +
' <input class="focus:outline-none plain-field" name="device-number" type="text" placeholder="CMAC/SN">\n' +
' <input type="checkbox" name="power-cord" class="">Power Cord?\n' +
' <input type="checkbox" name="remote" class="">Remote?\n' +
' <br>');
return false;
PHP to retrieve the information from that:
<p><?php echo $_POST['device-type']?></p>
<p><?php echo $_POST['device-number']?></p>
My question is, how can I retrieve the device type and number in the post array?

Simply make your HTML select tag accept multiple values. E.g:
<select name="device_type[]" class="focus:outline-none plain-field" multiple>
....
</select>
You can get the selected values on the PHP end using $_POST['device_type']
Refer to store multiple select option into a PHP array for more information

It looks like you need to add [] brackets to your field names to make them a multi array for $_POST to handle processing. Also, if you want to identify each row by an index, on clicking the ADD button, you can count the amount of select boxes generated to create a count and use that as the key index for each array. If you run the following below in a PHP file, click the ADD button to add some select boxes, and then click SUBMIT, you will see your data echo'd out as a multi-dimensional array. I also gave your initial select box an index of 0 for the multi array.
<?php
if(isset($_POST) && !empty($_POST)) {
echo "<pre>";
print_r($_POST);
foreach($_POST['device-type'] as $key => $type) {
echo "<b>Type:</b> " . $type . " ";
echo (isset($_POST['device-number']) && isset($_POST['device-number'][$key]) && !empty($_POST['device-number'][$key])) ? "<b>Number:</b> " .$_POST['device-number'][$key] . " " : "";
echo (isset($_POST['power-cord']) && isset($_POST['power-cord'][$key]) && !empty($_POST['power-cord'][$key])) ? "<b>Power Cord:</b> " .$_POST['power-cord'][$key] . " " : "";
echo (isset($_POST['remote']) && isset($_POST['remote'][$key]) && !empty($_POST['remote'][$key])) ? "<b>Remote:</b> " .$_POST['remote'][$key] . " " : "";
echo "<br/>";
}
echo "</pre>";
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function addBox() {
//console.log($('select.plain-field').length + 1);
var rowCount = $('select.plain-field').length + 1;
$("#devices").append('<br/><select name="device-type[' + rowCount + ']" class="focus:outline-none plain-field">\n' +
' <option value="">Select Equipment Type</option>\n' +
' <option value="dvr">DVR</option>\n' +
' <option value="modem">Modem</option>\n' +
' <option value="router">Router</option>\n' +
' <option value="other">Other</option>\n' +
' </select>\n' +
' <input class="focus:outline-none plain-field" name="device-number[' + rowCount + ']" type="text" placeholder="CMAC/SN">\n' +
' <input type="checkbox" name="power-cord[' + rowCount + ']" class="">Power Cord?\n' +
' <input type="checkbox" name="remote[' + rowCount + ']" class="">Remote?\n' +
' ');
return false;
}
</script>
<form action="" method="post">
<div id="devices">
<select name="device-type[0]">
<option value="">Select Equipment Type</option>
<option value="dvr">DVR</option>
<option value="modem">Modem</option>
<option value="router">Router</option>
<option value="other">Other</option>
</select>
</div>
<input type="button" onclick="addBox();" value="Add [+]" />
<br/>
<br/>
<input type="submit" value="Submit" />
</form>

How can I get special web elements in appending function with Jquery?

I have a problem with this, when I have a bottom function to appending some web elements, like this:
var index = 0;
$("#addGift").click(function () {
var gift = "<ul id=\"ul\">\n" +
" <li>\n" +
" <label>Gift Type1</label>\n" +
" <select name=\"giftType\">\n" +
" <option value=\"coin\">coin</option>\n" +
" <option value=\"album\">album</option>\n" +
" <option value=\"vip\">vip</option>\n" +
" </select>\n" +
" </li>\n" +
" <li>\n" +
" <label>Num</label>\n" +
" <input type=\"number\" name=\"num\">\n" +
" </li>\n" +
" <li>\n" +
" <label>Time</label>\n" +
" <input name=\"time\" class=\"easyui-datebox\" data-
options=\"sharedCalendar:'#cc'\">\n" +
" </li>\n" +
" <li>\n" +
" <label>Unit</label>\n" +
" <select name=\"unit\">\n" +
" <option value=\"day\">day</option>\n" +
" <option value=\"month\">month</option>\n" +
" </select>\n" +
" </li>\n" +
" <li>\n" +
" <label>Gift Type2</label>\n" +
" <select name=\"giftType\">\n" +
" <option value=\"coin\">coin</option>\n" +
" <option value=\"album\">album</option>\n" +
" <option value=\"vip\">vip</option>\n" +
" </select>\n" +
" </li>\n" +
" <li>\n" +
" <label>Num</label>\n" +
" <input type=\"number\" name=\"num\">\n" +
" </li>\n" +
" <li>\n" +
" <label>Time</label>\n" +
" <input name=\"time\" class=\"easyui-datebox\" data-
options=\"sharedCalendar:'#cc'\">\n" +
" </li>\n" +
" <li>\n" +
" <label>Unit</label>\n" +
" <select name=\"unit\">\n" +
" <option value=\"day\">day</option>\n" +
" <option value=\"month\">month</option>\n" +
" </select>\n" +
" </li>\n" +
" </ul>"
$("#giftTable").append(gift);
index++;
});
I had try many ways to get that web elements like name='time' or name='unit' to do show or hide action, but it doesn't work. Because I didn't get that elements correctly.
So how can I get special web elements in appending function with Jquery?

welcome to stack overflow.
ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.
A template literal is delimited by backticks:
var index = 0;
$("#addGift").click(function () {
var gift = `<ul id="ul">
<li>
<label>Gift Type1</label>
<select name="giftType">
<option value="coin">coin</option>
<option value="album">album</option>
<option value="vip">vip</option>
</select>
</li>
<li>
<label>Num</label>
<input type="number" name="num">
</li>
<li>
<label>Time</label>
<input name="time" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
</li>
<li>
<label>Unit</label>
<select name="unit">
<option value="day">day</option>
<option value="month">month</option>
</select>
</li>
<li>
<label>Gift Type2</label>
<select name="giftType">
<option value="coin">coin</option>
<option value="album">album</option>
<option value="vip">vip</option>
</select>
</li>
<li>
<label>Num</label>
<input type="number" name="num">
</li>
<li>
<label>Time</label>
<input name="time" class="easyui-datebox" data-options="sharedCalendar:'#cc'">
</li>
<li>
<label>Unit</label>
<select name="unit">
<option value="day">day</option>
<option value="month">month</option>
</select>
</li>
</ul>`;
$("#giftTable").append(gift);
index++;
});

Javascript go to the next line

First off, I'm sure there's some obvious answer to this, but I'll ask still.
So I have this project where the user is rolling dice, and writing what the dice is for and what is being done.
It works through html forms and the javascript prints the results without refreshing the page. I got all that working.
My current issue is that I want the result of the code to move on to the next line, and continue on when you click 'submit' again.
$( "#modTool" ).submit(function( event ) {
event.preventDefault();
console.log($(this).serialize());
var a = document.getElementById("modTool").elements.namedItem("user").value;
var b = document.getElementById("modTool").elements.namedItem("actionTaken").value;
var c = document.getElementById("modTool").elements.namedItem("target").value;
var amount = document.getElementById("modTool").elements.namedItem("amountOfDice").value;
var sides = document.getElementById("modTool").elements.namedItem("typeOfDice").value;
var d = document.getElementById("modTool").elements.namedItem("bonus").value;
var diceRoll = rollDice(amount, sides);
var display=document.getElementById("Prompt");
display.innerHTML = "> " + a + " uses " + b + " towards " + c + "<br />" + "> " + diceRoll + " Bonus " + d;
});
https://i.gyazo.com/fe3ffa835ed1acf41c08c7f6fe46ea93.png
It needs to both go to the next line, when I click 'submit' again, as well as having a scrollbar.
Any ideas?

Use this line:
display.innerHTML += "> " + a + " uses " + b + " towards " + c + "<br />" + "> " + diceRoll + " Bonus " + d + "<br /><br />";
Instead of:
display.innerHTML = "> " + a + " uses " + b + " towards " + c + "<br />" + "> " + diceRoll + " Bonus " + d;
display.scrollTop = display.scrollHeight;
Add overflow to your #Prompt like this:
#Prompt {
border-style: groove;
height: 400px;
max-width:98%;
width:auto;
position:relative;
overflow-y: auto;
}
See working example:
function rollDie(sides) {
if(!sides) sides = 6;
with(Math) return 1 + floor(random() * sides);
}
function rollDice(number, sides) {
var total = 0;
while(number-- > 0) total += rollDie(sides);
return total;
}
$( "#modTool" ).submit(function( event ) {
event.preventDefault();
console.log($(this).serialize());
var a = document.getElementById("modTool").elements.namedItem("user").value;
var b = document.getElementById("modTool").elements.namedItem("actionTaken").value;
var c = document.getElementById("modTool").elements.namedItem("target").value;
var amount = document.getElementById("modTool").elements.namedItem("amountOfDice").value;
var sides = document.getElementById("modTool").elements.namedItem("typeOfDice").value;
var d = document.getElementById("modTool").elements.namedItem("bonus").value;
var diceRoll = rollDice(amount, sides);
var display=document.getElementById("Prompt");
display.innerHTML += "> " + a + " uses " + b + " towards " + c + "<br />" + "> " + diceRoll + " Bonus " + d + "<br /><br />";
display.scrollTop = display.scrollHeight;
});
* {
font-family: Helvetica, Arial, sans-serif;
}
#wrapper {
max-width:98%;
width:auto;
margin:auto;
background-color: #fff;
}
#Prompt {
border-style: groove;
height: 400px;
max-width:98%;
width:auto;
position:relative;
overflow-y: auto;
}
#Buttons {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div id="Prompt">
<br />
<!-- <p id="diceRoll">
</p>
-->
</div>
<br />
<div ="Buttons">
<form id="modTool" method="POST" action="">
<table>
<tr>
<td>
<td><b>USER</b> </td>
<td><select name="user" id="User">
<option id="PC10">0</option>
<option id="PC11">1</option>
<option id="PC12">2</option>
<option id="PC13">3</option>
<option id="PC14">4</option>
<option id="PC15">5</option>
<option id="PC16">6</option>
<option id="PC17">7</option>
<option id="PC18">8</option>
<option id="PC19">9</option>
<option id="PC110">10</option>
</select></td>
</td>
<td>
<td><b>ACTION TAKEN</b> </td>
<td><input type="text" name="actionTaken"></input>
</td>
<td>
<td><b>TARGET</b> </td>
<td><select name="target" id="target">
<option id="PC20">0</option>
<option id="PC21">1</option>
<option id="PC22">2</option>
<option id="PC23">3</option>
<option id="PC24">4</option>
<option id="PC25">5</option>
<option id="PC26">6</option>
<option id="PC27">7</option>
<option id="PC28">8</option>
<option id="PC29">9</option>
<option id="PC210">10</option>
</select></td>
</td>
</tr>
<tr>
<td>
<td><b>DICE SIDES</b> </td>
<td><select name="typeOfDice" id="typeOfDice">
<option id="D20">20</option>
<option id="D100">100</option>
</select></td>
</td>
<td>
<td><b>AMOUNT OF DICE</b>
<td><select name="amountOfDice" id="amountOfDice">
<option id="1Dice">1</option>
<option id="2Dice">2</option>
<option id="3Dice">3</option>
<option id="4Dice">4</option>
<option id="5Dice">5</option>
<option id="6Dice">6</option>
<option id="7Dice">7</option>
<option id="8Dice">8</option>
<option id="9Dice">9</option>
<option id="10Dice">10</option>
</select></td>
</td>
<td>
<td><b>BONUS</b> </td>
<td><select name="bonus" id="bonus">
<option id="plus0">0</option>
<option id="plus1">+1</option>
<option id="plus2">+2</option>
<option id="plus3">+3</option>
<option id="plus4">+4</option>
<option id="plus5">+5</option>
<option id="plus6">+6</option>
<option id="plus7">+7</option>
<option id="plus8">+8</option>
<option id="plus9">+9</option>
<option id="plus10">+10</option>
<option id="Minus1">-1</option>
<option id="Minus2">-2</option>
<option id="Minus3">-3</option>
<option id="Minus4">-4</option>
<option id="Minus5">-5</option>
<option id="Minus6">-6</option>
<option id="Minus7">-7</option>
<option id="Minus8">-8</option>
<option id="Minus9">-9</option>
<option id="Minus10">-10</option>
</select></td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submitRound" id="submit"></input>
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
EDIT:
Added overflow and made it autoscroll to bottom.

Skip last Html row text box value and select on print

I am trying to create a query which inserts the data in to Mobile sqlite data base say for now i have three rows in a html table on button press a query is generated where it selects the value of the text box and the select selected value but the problem is on print it should skip the last rows value as in my case that is a auto increment table where a last row is left blank to fill in the data for the user.
Now
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match"),("skip row","skip row","No Match");
Expected
INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match");
Demo Jsfiddle
JS
function Get() {
var html = '';
var arr = [];
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
});
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
$('#data').html(html);
}
HTML
<form id="Form" onsubmit="return false;">
<table>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey1">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse1">
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>First name:
<input type="text" name="FirstName" value="Mickey2">
</td>
<td>Last name:
<input type="text" name="Lastname" value="Mouse2">
</td>
</td>
<td>Last name:
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
<tr>
<td>skip row
<input type="text" name="FirstName" value="skip row">
</td>
<td>skip row
<input type="text" name="Lastname" value="skip row">
</td>
</td>
<td>skip row
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</td>
</tr>
</table>
</form>
<input type="submit" name="Submit" onclick="Get();" />
<div id="data"></div>

If you add the index parameter to the each function you can edit your code to only display specific lines.
$('tr').each(function(index, me) {
if(index < $('tr').length - 1) {
var inputs = $('input', me);
var selects = $('select :selected', me);
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});
Also in each functions I believe this is not recommended. Adding the second argument to the function should act like this for the individual row (as I've have used me).
Here is a forked version of your Fiddle - https://jsfiddle.net/szkp0Lwq/1/
Edit
As per your comment below -
If you first want to validate your inputs you can do something like -
var valid = true;
$('tr').each(function(index, me) {
if(index < $('tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function(index, me) {
if($(me).val().length == 0)
valid = false;
});
var selects = $('select', me);
selects.each(function(index, me) {
if($(me)[0].selectedIndex == 0)
valid = false;
});
if(valid)
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + $(selects[0]).val() + '")');
}
});
if(valid)
..... submit query
else
alert("Form isn't valid!");
Fiddle - https://jsfiddle.net/o4b1rLns/2/

You could skip the row when you build the array, or only add the ones that doesnt have the "skip row" value, as below:
$('tr').each(function() {
var inputs = $('input', this);
var selects = $('select :selected', this);
if (inputs[0].value != "skip row") {
arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
}
});

We Keep Coding

JavaScript is the programming language of the Web.

Jquery adding validate rules on select dynamically created - javascript

Related

Once added, remove a value from dropdown menu and show the next value, also once deleted, add the deleted value once again to the dropdown menu

PHP post with dynamic entries created in JS

How can I get special web elements in appending function with Jquery?

Javascript go to the next line

Skip last Html row text box value and select on print

Categories

Resources