We Keep Coding

Jquery adding validate rules on select dynamically created

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

For loop ending unexpectedly

I'm having an issue with an assignment.
My for loop doesn't seem to run and I'm not sure what I've done wrong.
The variable dailyText prints "Weather Forecast" in a table but doesn't seem to enter the for loop. I'm not sure if this is a scoping issue or what's happening.
The script is supposed to take a number from a form option and create a table with that many rows.
Any help would be greatly appreciated!
function dailyInfo() {
var dailyText = "";
var numberDays = document.getElementById("numberDays").value; //https://stackoverflow.com/questions/23982774/turn-html-form-input-into-javascript-variable
dailyText += "<table class='table'><tr><th>Weather Forecast</th></tr>";
for (var i = 0; i < numberDays; i++) {
dailyText += "<tr><td>Day: " + (i + 1) + "</td>";
dailyText += "<td>" + dailyJsonObject.list[i].temp.min + "&#8451</td>";
dailyText += "<td>" + dailyJsonObject.list[i].temp.max + "&#8451</td>";
dailyText += "<td>" + dailyJsonObject.list[i].weather[0].description + "<img src ='http://openweathermap.org/img/w/'" + dailyJsonObject.list[i].weather[0].icon + ".png' /></td>";
}
document.getElementById("demo").innerHTML = dailyText;
dailyText += "</tr></table>";
}
<form id="numberDay">
<label id='numberDays'>Number of days requested</label>
<select name='numberDays'>
<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>
</select>
<button type="button" onclick="dailyInfo()">Submit</button>
</form>
</div>
<div id='demo'>
<table id="tableDaily"></table>
</div>

You have named the label with the id required for the numberDays. This means the loop was using the label value not the actual input as expected.
See below for alteration:
<form id="numberDay">
<label id='numberDays_label'>Number of days requested</label>
<!-- the select needs the id so the JS code can grab it!-->
<select name='numberDays' id="numberDays">
<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>
</select>
<button type="button" onclick="dailyInfo()">Submit</button>
</form></div>
<div id='demo'>
<table id="tableDaily"></table></div>

You say:
var numberDays = document.getElementById("numberDays").value;
But actually the element you are getting is the label:
<label id='numberDays'>
So numberDays has actually the value undefined then.
Instead, you should do:
<label for='numberDays'>
and then:
<select name='numberDays' id='numberDays'>
That should actually at least start the loop. And then the label > select relationships is actually working, for example you can click now also the label to focus on the select.

Access a selected option:
HTML
<select name="" id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
JavaScript
var select = document.getElementById("mySelect"),
selectedOption = select.options[select.selectedIndex].text;
Get selected option text with JavaScript
In total (commented stuff)
function dailyInfo() {
var dailyText = "";
var numberDays = document.getElementById("numberDays");
numberDays = numberDays.options[numberDays.selectedIndex].text;
dailyText += "<table class='table'><tr><th>Weather Forecast</th></tr>";
for (var i = 0; i < numberDays; i++) {
dailyText += "<tr><td>Day: " + (i + 1) + "</td>";
dailyText += "<td>" + /*dailyJsonObject.list[i].temp.min +*/ "&#8451</td>";
dailyText += "<td>" + /*dailyJsonObject.list[i].temp.max +*/ "&#8451</td>";
dailyText += "<td>" + /*dailyJsonObject.list[i].weather[0].description*/ +"<img src ='http://openweathermap.org/img/w/'" + /*dailyJsonObject.list[i].weather[0].icon +*/ ".png' /></td>";
}
document.getElementById("demo").innerHTML = dailyText;
dailyText += "</tr></table>";
}
<form id="numberDay">
<label>Number of days requested</label>
<select id='numberDays' name='numberDays'>
<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>
</select>
<button type="button" onclick="dailyInfo()">Submit</button>
</form>
<div id='demo'>
<table id="tableDaily"></table>
</div>

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 + '")');
}
});

How to store in Array the parent IDs of elements with the same CLASS and display in alert these stored IDs

I am working on an existing website which limits me to touch HTML code. In the code below, there are 3 rows with the same CLASS (sameRow),.Row numbers may differ from case to case. Inside each row contains DIV with unique ID and a corresponding SELECT element with the same CLASS (sameSelect).
My target output is to be able create a JS/Jquery code to store these unique div IDs individually in the array and display each ID in the alert. Currently, my code below is displaying only the ID of the first DIV. The second and the third is not displayed. What could be wrong in my code?
Any help is greatly appreciated. Fiddle link here -> https://jsfiddle.net/philcyb/crkLgxhd/
HTML:
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<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" selected>6</option>
</select>
</div>
</div>
JS/JQuery:
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});

Just use eq
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().eq(i).attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<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" selected>6</option>
</select>
</div>
</div>

$(document).ready(function(){
var optionValue = new Array();
$('.sameRow').each(function(i){
optionValue[i] = $(this).find('.sameSelect').parent().attr("id");
alert("array row number " + (i + 1) + " is " + optionValue[i]);
});
});
JSFIDDLE
I think in this case no need for array you can use
$(document).ready(function(){
$('.sameRow').each(function(i){
var getID = $(this).find('.sameSelect').parent().attr("id");
alert("array row number " + (i + 1) + " is " + getID);
});
});
JSFIDDLE

hot to get the selected text and selectedIndex in select?

I need to get the selected text and selectedIndex in dropdown on submit..The below code returns the first index always 0 with the first option text..for example if i selected three,it shows 0 index and one text...
function myfunc()
{
`enter code here`var x = document.getElementById("listt").selectedIndex;
var y = document.getElementById("listt").options;
alert("Index: " + y[x].index + " is " + y[x].text);
}
<select id="listt" >
<option >one</option>
<option >two</option>
<option>three</option>
<option >four</option>
</select>
<input type="Submit" value="submit " name="Submit" onclick="myfunc()"></input>

Try this code.
<select id="listt" >
<option >one</option>
<option >two</option>
<option>three</option>
<option >four</option>
</select>
<input id="btnSubmit" type="Submit" value="submit " name="Submit" />
function myfunc() {
var x = document.getElementById("listt").selectedIndex;
var y = document.getElementById("listt").options;
alert("Index: " + y[x].index + " is " + y[x].text);
}
document.getElementById ("btnSubmit").addEventListener ("click", myfunc, false);