Develop Reference

Select Field OnChange, Make <tr> Show/Hide, Shows Initially but Once Gone, Cant ReShow

I have a select form field, which once the value of this field becomes "Location", the TR table row will change from display: none, to empty property.
See below in head tag.
<script type="text/javascript">
function disableit()
{
if (document.getElementById("typepicker").value === "Location") {
document.getElementById("1-row").style.display = "";
} else {
document.getElementById("1-row").style.display = "none";
}
}
</script>
Then I have a select field, with disableit() being called once the option changes. Default option is "Location", and so the script runs, and the 1-row table row is being shown. Then, when choose different option, great, the table row gets display:none.
But problem, when I change option back to Location again, it not show the hidden TR...
<select class="alert-select" onChange="disableit();" id="typepicker" name="type">
<option value="Location">Location</option>
<option value="movement">First Movement</option>
</select>
<tr id="1-row">
<td><label>At Location</label></td>
<td>
<select class="alert-select" name="Location" id="locationpicker">
//In here goes some dynamically generated <options> from php query, works fine
</select>
</td>
</tr>
So to sum up, 1-row id table row is shown initially, because typepicker has option Location set by default as its first in the list, but when click a different option, it hides the row - great, but then click location again, and it does not show.
Any help much appreciated, thanks

You need to sort out your mark-up (HTML):
Your tr should be wrapped in a table tag. Without this, your table doesn't render properly.
Remove the comment // In here goes some dynamically generated... or use a HTML comment instead: <!-- In here goes some dynamically generated... -->
Fixing these two issues seems to resolve your issue:
function disableit() {
if (document.getElementById("typepicker").value === "Location") {
document.getElementById("1-row").style.display = "table-row"; // change to display table-row
} else {
document.getElementById("1-row").style.display = "none";
}
}
<select class="alert-select" onChange="disableit();" id="typepicker" name="type">
<option value="Location">Location</option>
<option value="movement">First Movement</option>
</select>
<table>
<tr id="1-row">
<td><label>At Location</label></td>
<td>
<select class="alert-select" name="Location" id="locationpicker">
<option>France 🇫🇷</option>
<option>Australia 🇦🇺</option>
<option>UK 🇬🇧</option>
<option>Korea 🇰🇷</option>
</select>
</td>
</tr>
</table>

how create autocomplete with datalist

i'm try to create a autocomplete with datalist html this is my code:
<input type="text" id="options" name="options" list="list_option">
<datalist id="list_option">
<option value="1">Op1</option>
<option value="2">Op2</option>
</datalist>
<input type="button" onclick="data($('#options').val());" value="getId">
<script>
function data(term){
alert(term);
}
</script>
the list show correct the problem is if i select a item from my datalist on the input show the value, dont the name...
and how i can get this value(id).. please any suggest..thanks

"...dont the name... and how i can get this value(id)."
I have no idea what you mean...or how it relates to autocomplete.
The following Demo will run callback function getData() when the change event is fired on #options. The console (not alarm because it's irritating) will log two items:
Text Box Value
Run callback function getID() when the click event is fired on :button. The console will log:
Text Box ID
Data List ID
As for autocomplete behavior, you just add the autocomplete attribute to the text box tag or not, because it's on by default. To test it, just type in a letter.
.autocomplete() is not a built-in method of JavaScript or jQuery. You need to load jQuery UI as Mr. Noyon commented or a plugin.
BTW, never use an onclick attribute event handler when you have jQuery loaded. That's like pushing a car instead of driving it.
Demo
$('#options').on('change', getData);
$(':button').on('click', getID);
function getID(event) {
var textID = $('#options')[0].id;
var listID = $('#list')[0].id;
console.log('Text Box ID: #' + textID);
console.log('List ID: #' + listID);
}
function getData(event) {
var val = this.value;
console.log('Text Box Value: ' + val);
}
<input type="text" id="options" name="options" list="list" autocomplete>
<datalist id="list">
<option value='wallet'>wallet</option>
<option value='hair'>hair</option>
<option value='coasters'>coasters</option>
<option value='book'>book</option>
<option value='clay pot'>clay pot</option>
<option value='twezzers'>twezzers</option>
</datalist>
<input type='button' value='getID'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Cloning tr to add new item and replacing a select box

I Had a code where i had to clone the respected tr and create the new one, but the tr has the column which has a select and that selection has one value which when chosen converts the select box into the textbox and then whe i click add item, it adds another text text, i knowwhy it is hapening, because i am just cloning it.
how can i fix it, i am bit confused
here is my code
<table>
<tr><td><input type="text"></td></tr>
<tr>
<td><div id="stlineitems">
<label for="stlineitems">Item(s)</label></td>
<td><div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<select name="getSelection" class="form-control getSelectedprice">
<optgroup label="Class Price">
<option value="160.0000">$160.00</option>
</optgroup>
<optgroup label="Custom Price">
<option value="0">$0</option>
<option value="-2">My Price</option>
<option value="-1">Custom Price</option>
</optgroup>
</select>
</div><div class="moveboxleftinput" style="display:none;">
<input type="text" name="getSelection" value="" class="form-control">
</div>
<br/>
<div class="nextitem">Add Item</div></td>
</div>
</tr>
</table>
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first();
var clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0);'>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
obj.before(clonedObj);
initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
$(document).on('change','.getSelectedprice',function() {
if ($('.getSelectedprice option:selected').text() == "Custom Price"){
$('.moveboxleft').hide();
$('.moveboxleftinput').show();
}else {
$('.moveboxleft').show();
$('.moveboxleftinput').hide();
}
});

You do have some improperly nested HTML that should be fixed.
But as for the cloning. My advice is to never clone an item after it has been instrumented with any event handlers or other plugins (like Select2). The way to avoid that is to do the following:
Clone the row right away at page load (before registering event handlers and instrumenting).
Whenever you need a new row, clone the original clone. That way you still have the original clone to re-clone over and over.
Use event delegation as much as possible to register event handlers.
If you need to instrument any of the elements on a newly added row, do it after you have inserted it into the page.
In your case, you could have this:
var $table = $('table');
var $CLONED_ROW = $table.find('tbody>tr:first').clone();
$CLONED_ROW.find('.createNewItemTag').replaceWith(
'<a class="removeItem" href="#">Remove</a>');
$table.on('click', '.createNewItemTag', function(e) {
e.preventDefault();
var $row = $(this).closest('tr'),
$newRow = $CLONED_ROW.clone();
$newRow.insertBefore($row);
//initSelect2ForNextItem($newRow.find('.selectItemsList'));
});
$table.on('click', '.removeItem', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
$table.on('change', '.getSelectedprice', function() {
var $select = $(this),
$row = $select.closest('tr');
if ($select.val() == '-1') {
$row.find('.moveboxleft').hide();
$row.find('.moveboxleftinput').show();
} else {
$row.find('.moveboxleft').show();
$row.find('.moveboxleftinput').hide();
}
});
//initSelect2ForNextItem($table.find('.selectItemsList'));
Notice the placement of the calls to initSelect2ForNextItem().
jsfiddle
A few more things:
You can use .closest(), instead of .parents().first().
When you hide/show the text input, you need to limit it to the current row.
It is better to use the value of a select element, rather than the text.

Your HTML is invalid. For example, you haven't closed the first div in your first td tag:
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
<!-- Close div should go here -->
</td>
Try correcting your HTML and re-evaluate your code, then resubmit if you are still having problems.

Onchange events for multiple textboxes

here's my javascript
function disp(s)
{
var st=document.getElementById("stats");
st=st.options[st.selectedIndex].text;
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}
and here's my front end
Rain Guage Status
<select id="stats" onchange="disp('oth')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the status briefly" style="display:none" id="oth">
Exposure
</td>
<td><select id="expo" onchange="disp('othe')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the exposure briefly" style="display:none" id="othe">
the problem i'm facing is that exposure texbox opens up only when rainguage textbox is displayed... there's no relation to both of dropdowns except for the function which takes the id of textbox to display.
like if rainguage tb is displayed and exposure tb is displayed, i cannot hide exposure tb unless i hide rainguage tb. please help

It's because you are getting the element by id stats. Instead you can pass the element with your function.
<select id="stats" onchange="disp(this, 'oth')">
<select id="expo" onchange="disp(this, 'othe')">
and Update your function like this :
function disp(ele,s)
{
//var st=document.getElementById("stats"); No need for this line
var st=ele.options[ele.selectedIndex].text; //use ele from here
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}

use onchange event for multiple select as follows.
1.give same class name for all select as below.
<select id="stats" class='select-box">
<select id="expo" class='select-box">
2.use jquery onchange function
$( ".select-box" ).change(function() {
alert( "option selected" );
});

How to add and remove the class of the select input using Jquery addClass( )?

I am using Uniform JS plugin for the form inputs. in the below code, i was trying to initialize the uniformjs styles in the dynamically created fields also.
In the below html code, there is a function called ext() which inserts a new row when the add button is clicked. I want the uniformjs style to get applied to those dynamically generated fields too. I tried and tried but its getting worst and its getting collapsed and the select boxes are not at all showing the selected value even after selecting ... :(
HTML
<table style="width:100%;border:1px solid;" id="table1">
<tr><td>
<select>
<option>Through Google</option>
<option>Through Twitter</option>
<option>Other…</option>
<option><Hi></option>
</select>
</td>
<td><button onClick="ext();">Add</button></td>
</tr>
</table>
JS
$(function()
{
$("input, textarea, select, button").uniform();
});
function ext()
{
$(function()
{
$("input, textarea, select, button").uniform();
});
rl = document.getElementById("table1").rows.length;
var a = document.getElementById("table1").insertRow(rl);
var b = a.insertCell(0);
b.innerHTML = '<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option> <option value="Monthly">Monthly</option></select></div></div>';
}
Resource - www.uniformjs.com

instead of "input, textarea, select, button" you can just use ":input" it covers all the input type elements.
please try something like below :
$(function(){
$(":input").uniform();
});
function ext()
{
rl=document.getElementById("table1").rows.length;
var a=document.getElementById("table1").insertRow(rl);
var b=a.insertCell(0);
b.innerHTML='<div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option> <option value="Monthly">Monthly</option></select></div></div>';
$(function(){
$(":input").uniform();
});
}

Try this:
function ext()
{
$("#table1").append('<tr><td><div style="width:95%;margin-bottom:0px;padding:5px;"><div class="selector" id="uniform-clinic_visit"><span style="-moz-user-select: none;">Monthly</span><select name="clinic_visit[]" id="clinic_visit" onChange=""> <option>-Select-</option><option value="Weekly">Weekly</option> <option value="Monthly">Monthly</option></select></div></div></td></tr>');
$(":input").uniform();
}

I don't know how Uniform works, so just a guess: within your ext() function, move the following code:
$("input, textarea, select, button").uniform();
to be the last line of the function. That is, call .uniform() after you create the new elements. (Obviously I'm assuming here that it is the call to .uniform() that applies the styles you are talking about.)
Note also that within your ext() function you currently surround the above line with a document ready function and you don't need to do that.