We Keep Coding

How can i select values from datalist dropdown multiple times and store the value each time in a new row in table?

I am setting up a new web page where I want to select value from datalist dropdown and store it in a table row but when I select value from the same datalist second time the previous value gets replaced instead of that I want value selected second time from datalist to store in the second row of a table? How can I achieve that?
I have tried to add value selected in a datalist in a table row which is adding in a table row but when I select a value from same datalist second time the previous value gets replaced but I want the second value to be stored in the second row of a table, how can I achieve this?
<input list="browa" name="adv">
<datalist id="browa">
<option value="Twice a Day">
<option value="Thrice a Day">
<option value="After meal">
<option value="Before meal">
<option value="Once a Day">
</datalist>
<input list="brown" name="dose">
<datalist id="brown">
<option value="Morning">
<option value="Afternoon">
<option value="Evening">
<option value="Night">
</datalist>
</div>
<table style="width:100%; margin-top:10px;">
<tr>
<th>Advice</th>
<th>Dose</th>
</tr>
<tr>
<td id="adv"></td>
<td id="dose"></td>
</tr>
</table>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("input[name=adv]").on('change', function () {
$("#adv").text($(this).val());
});
$("input[name=dose]").on('change', function () {
$("#dose").text($(this).val());
});
</script>
As of now, I am getting a result like this (https://ibb.co/2nfTV1N) but I want results like this (https://ibb.co/YLhCrgk). please tell me how can I do this?

Yes the value is being replaced because you are just setting the .text property. You should use .append or .add, or some method that doesn't overwrite.
If you want it to append an actual new grid row, then create a new element that is the grid row populated with the correct values. Then, append the new element

$("input[name=adv]").on('change', function() {
$("#adv").append($("<tr><td></td></tr>")
.text($(this).val()));
});

validate the dom using jquery

I am trying to validate the DONM using jquery Please look into the fiddle.
My objective is not to select the same country to same room number .
I have two scenarions
scenario 1 (before saving into DB)
The example is working fine
scenario 2 (After saving the data into db )
saved data coming from DB
Available Country RooNumber SelectedPerson
droipdown1 1
dropdown2 2 chennai
WRONG SELECTION
Available Country RooNumber SelectedPerson
chennai 1 chennai
chennai 2 chennai
JSFiddle:
http://jsfiddle.net/bharatgillala/9o1gxa1h/10/
code:
<table id="gridviewInfo" runatr="server">
<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>
</TR>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>
</TR>
<TR>
<TD style="WHITE-SPACE: nowrap" align=left>
<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<OPTION selected value=>
</OPTION>
<OPTION value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
2
<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>

First of all, you're creating n label tags with the id lbl2.
This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.
Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('select'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// initially, we want to change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
// then, we must disable this option in all the other dropdownlists
updateDisabled(ddl);
// so, we add a change event handler
ddl.addEventListener('change', function(e) {
// when the ddl value is changed, we update the label text
lbl.textContent = ddl.value;
// and we disable the option selected in all the other dropdownlists
updateDisabled(ddl);
});
});
function updateDisabled(ddl) {
// to disable all the other dropdownlists
// we loop through all the HTMLOptionElements inside the table
[].forEach.call(table.querySelectorAll('option'), function (opt, j) {
// we look if the current option inside the loop is not the selected one
if (opt.parentNode !== ddl) {
// then, if the option has the same selected value, we disable it, else we enable
opt.disabled = opt.value && opt.value === ddl.value;
}
});
}
});
})(document);
#gridviewInfo td:nth-child(1) {
white-space: nowrap;
text-align: left;
}
<table id="gridviewInfo" runatr="server">
<thead>
<tr>
<th>Available Person</th>
<th>RooNumber</th>
<th>SelectedPerson</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>1</td>
<td>
<label>maxico</label>
</td>
</tr>
<tr>
<td>
<select class="judges" id="ddlAvailableJudges2" name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges>
<option selected value=''></option>
<option value="maxico">maxico</option>
<option value="chennai">chennai</option>
<option value="newdelhi">newdelhi</option>
<option value="hongkong">hongkong</option>
</select>
</td>
<td>2</td>
<td>
<label>hongkong</label>
</td>
</tr>
</tbody>
</table>
Update
Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/

change dropdown content when checked

I have made a way to present a droplist to end user and by default containing 4 items (value=a,value=b,value=c,value=d). When a user click on a checkbox the content of the droplist changes to only 2 items (value=a,value=b) IF unchecked returned to default state.
I achieve this way below using hiding div but wondering if a better different way using Jquery, I have searched and cant figure it out using let say if checked present these options else present default. Currently I have to work with 2 different dropdown which is awkward when passing values in a form.
THE CHECKBOX
<label for="optionChoice"><input class="optionChoice" type="checkbox" id="optionChoice" name="optionChoice" value="YES" onClick="if(this.c.........
IN MY PHP PAGE I HAVE 2 DIV WHERE ONE IS VISIBLE AND THE OTHER IS NOT ALL DEPENDS ON IF CHECKBOX CLICKED THEN MAKE ONE VISIBLE AND THE OTHER INVISIBLE VISVERSA.
<div id="test">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType" id="serviceType">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
<option value="C" label="C">C</option>
<option value="D" label="D">D</option>
</select>
</td>
</tr>
</table>
</div>
<div id="test2">
<table class="TableStyle">
<tr>
<td>
<label for="serviceType2">Service Type<font color="red"><b> * </b></font></label>
</td>
</tr>
<tr>
<td>
<select name="serviceType2" id="serviceType2">
<option value="" label="-- Choose One --"> -- Choose One --</option>
<option value="A" label="A">A</option>
<option value="B" label="B">B</option>
</select>
</td>
</tr>
</table>
</div>
script
$(function() {
enable_cbChoice();
$("#optionChoice").click(enable_cbChoice);
});
function enable_cbChoice() {
if (this.checked) {
$("#test").hide();
$("#test2").show();
}
else{
$("#test").show();
$("#test2").hide();
}
}

Try to just have one dropdown (id="serviceType") and then add or remove the options based on the state of the checkbox:
var detached;
$('#optionChoice').on('change', function() {
var $el = $(this);
if( $el.prop('checked') ) {
detached = $('option[value="C"], option[value="D"]').detach();
} else {
$('#serviceType').append(detached);
}
});
Working Fiddle: http://jsfiddle.net/jhummel/D43fh/

You can achieve this by detecting the state of the checkbox using javascript. I can show you the method using jquery. Then you can use the remove and append function of jquery to add and remove values from the dropdown. To achieve your problem, you can do something like this.
$('input[type="checkbox"]').click(function() {
if( $(this).is(':checked') ) {
$("#selectBox option[value='C']").remove();
$("#selectBox option[value='D']").remove();
} else {
$('#selectBox').append('<option value="C">C</option>');
$('#selectBox').append('<option value="D">D</option>');
}
});

Add disabled to form option that are on the table list

I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?

$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/

Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo

I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}

jQuery: Conditional show an element based on drop down box selection

I have two related drop-down lists, in which the contents in the second drop-down list depends on the selection made in the first one. For example, in the following HTML code, you will choose application method first. If you choose Aerial as the application method, then you will answer further question such as aerial size dist. Otherwise, you need to answer ground spray type.
So once the webpage is loaded, the two second level drop-down lists (aerial size dist., and ground spray type.) are hidden. They will appear only when related choice is made in the first one (application method).
I am able to achieve this feature in jQuery (below jQuery code). But my approach is pretty stupid. My question is:
Is there a way to select the whole row, without using counting its sequence (nth-child())? Can I choose the whole row, based on selecting an element ID ? For example, can I first select $('#id_A') and then expand my selection to the whole row?
Is there a better way (a loop?) to achieve this hide or show feature rather than comparing all the possible choices (($(this).val() == "X") )?
Thanks!
Here is the HTML code, and the form is generated by Django:
<div class="articles">
<form method="GET" action=_output.html>
<table align="center">
<tr><th><label for="id_application_method">Application method:</label></th><td><select name="application_method" id="id_application_method">
<option value="">Pick first</option>
<option value="A">Aerial</option>
<option value="B">Ground</option>
</select></td></tr>
<tr><th><label for="id_A">Aerial Size Dist:</label></th><td><select name="aerial_size_dist" id="id_A">
<option value="A1" selected="selected">A1</option>
<option value="A2">A2</option>
</select></td></tr>
<tr><th><label for="id_B">Ground spray type:</label></th><td><select name="ground_spray_type" id="id_B">
<option value="B1" selected="selected">B1</option>
<option value="B2">B2</option>
</select></td></tr>
</table>
</form>
</div>
Here is the jQuery code:
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>$(function() {
$("tr:nth-child(2)").hide();
$("tr:nth-child(3)").hide();
$('#id_application_method').change(function() {
($(this).val() == "A") ?
$("tr:nth-child(2)").show() : $("tr:nth-child(2)").hide();
($(this).val() == "B") ?
$("tr:nth-child(3)").show() : $("tr:nth-child(3)").hide();
});});</script>

I think iKnowKungFoo's answer is very straightforward (it's got my vote). I noticed you said your form is generated by Django though. In case it's not straightforward for you to modify your generated HTML markup, here is another solution to your problem.
$(document).ready(function() {
var $aerialTr = $('#id_A').closest('tr').hide();
var $groundSprayTr = $('#id_B').closest('tr').hide();
$('#id_application_method').change(function() {
var selectedValue = $(this).val();
if(selectedValue === 'A') {
$aerialTr.show();
$groundSprayTr.hide();
} else if (selectedValue === 'B') {
$aerialTr.hide();
$groundSprayTr.show();
} else {
$aerialTr.hide();
$groundSprayTr.hide();
}
});
});
Here is a jsFiddle to test: http://jsfiddle.net/willslab/n54cE/2/
It should work with your existing markup. It selects the tr's based on the current IDs for the select boxes. If you change those IDs, you will need to modify the selectors accordingly.
I hope that helps!
Edit: Here is another alternative, "hybrid" approach inspired by iKnowKungFoo. His solution is very elegant, so I combined it with my own. This works without changes to HTML or CSS.
$(document).ready(function() {
$('#id_A').closest('tr').addClass('method_options').hide();
$('#id_B').closest('tr').addClass('method_options').hide();
$('#id_application_method').change(function() {
$('tr.method_options').hide();
$('#id_' + $(this).val()).closest('tr').show();
});
});
jsFiddle link: http://jsfiddle.net/willslab/6ASJu/3/

Your questions describe the right ideas. You just have to structure your HTML to take advantage of them.
JSFiddle posted here: http://jsfiddle.net/iknowkungfoo/TKamw/
HTML - I added an ID and CLASS to each TR that match the values in your primary SELECT:
<div class="articles">
<form method="get" action="_output.html">
<table align="center">
<tr>
<th><label for="id_application_method">Application method:</label></th>
<td><select name="application_method" id="id_application_method">
<option value="">Pick first</option>
<option value="A">Aerial</option>
<option value="B">Ground</option>
</select></td>
</tr>
<tr id="tr_A" class="method_options">
<th><label for="id_A">Aerial Size Dist:</label></th>
<td><select name="aerial_size_dist" id="id_A">
<option value="A1" selected="selected">A1</option>
<option value="A2">A2</option>
</select></td>
</tr>
<tr id="tr_B" class="method_options">
<th><label for="id_B">Ground spray type:</label></th>
<td><select name="ground_spray_type" id="id_B">
<option value="B1" selected="selected">B1</option>
<option value="B2">B2</option>
</select></td>
</tr>
</table>
</form>
</div>
CSS - hide those TRs by default:
tr.method_options { display: none; }​
JavaScript/jQuery - When the primary SELECT changes, hide all TRs with a CLASS of "method_options". Then, Find the TR whose ID matches the value of the selected option in the primary SELECT and show it. If there is no match, then nothing is shown.
$(document).ready(function(){
$('#id_application_method').on('change', function() {
$('tr.method_options').hide();
$('#tr_' + $(this).val() ).show();
});
});