We Keep Coding

How to show input and remove it based on select box?

I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!

You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>

Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>

Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>

Making a div hidden and visible according to the chosen option under select tag

My code don't seem to work.
So i have a div like this:
<div class="abc">
<form>
**some input tags**
then this:
<select>
<option value="" onclick="myfx1()">yes</option>
<option value="" onclick="myfx2()">no</option></select>
And this is my js code:
<script type="text/javascript">
function myfx1(){
document.getElementById("hid").style.visibility="hidden";
}
function myfx2(){
document.getElementById("hid").style.visibility="visible";
}
</script>
***************and below is the div that has to appear when no is selected**********************
<div id="hid">
<select>
**some options**
</select>
<font>
**some text**
</font>
**some more textarea and input tags**
</div>
**end of the div**
then it ends with a button:
<input type="button" style="float:right" value="Go">
</div></form>

<select onchange='myfx1(this.value)'>
<option value="1" >yes</option>
<option value="0" >no</option></select>
<script type="text/javascript">
function myfx1(value){
if(value==1) {
document.getElementById("hid").style.visibility="hidden";
}else {
document.getElementById("hid").style.visibility="visible";
}
}</script>

HTML
<select name='options' id="select">
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<div id="hid">
Test
</div>
JS
var elem = document.getElementById("hid");
document.getElementById('select').addEventListener('change', function(){
if(this.value == 'yes'){
elem.style.visibility="visible";
}else{
elem.style.visibility="hidden";
}
})

$("#YourSelectBoxID").change(function(){
if($(this).val() == "YourDesiredConditionForCheckWhichValueIsSelected") {
$(".abc").hide();
} else {
$(".abc").show();
}
});

Filter drop down jquery is not working on IE but is on Chrome/FF

I have this code working in Chrome and FF, but it is not working in IE. It is a simple form with 2 drop downs, with the second drop down filtering based on the first. The selection then brings you to a different site on Submit. In IE, the filtered options are greyed out rather than hidden.
<!DOCTYPE html>
<head>
<html>
<title>Dropdowns</title>
<script src="./jquery-1.11.0.min.js"></script>
<script>
function filterList(countryList) {
var selected = countryList.find(":selected").text();
if (selected == "US") {
showOption($("#city .US"));
hideOption($("#city .UK, .IE"));
}
else if (selected == "UK") {
showOption($("#city .UK"));
hideOption($("#city .US, .IE"));
}
else {
showOption($("#city .IE"));
hideOption($("#city .UK, .US"));
}
$("#city").find("option:not(:disabled):first").prop('selected', true);
}
function hideOption(option) {
option.attr("disabled", 'disabled');
option.hide();
}
function showOption(option) {
option.removeAttr('disabled');
option.show();
}
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function () {
filterList($(this));
});
});
</script>
<script>
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function(){
filterList($(this));
});
});
</script>
</head>
<body>
<div>
<h1>Please select your home city</h1>
</div>
<form name="dropdown" id="dropdown">
<div>
<select class="country" id="country" name="country">
<option value="United States">US</option>
<option value="United Kingdom">UK</option>
<option value="Ireland">IE</option>
</select>
</div>
<div>
<select class="city" id="city" name="city">
<!-- US options Below -->
<option value="http://www.google.ie" class="US">Chicago</option>
<option value="http://www.google.com" class="US">New York</option>
<option value="http://www.stackoverflow.com" class="US">Miami</option>
<!-- UK options Below -->
<option value="http://www.linkedin.com" class="UK">London</option>
<!-- Ireland options Below -->
<option value="http://www.ebay.com" class="IE">Ireland</option>
</select>
</div>
<div>
<input type="checkbox" name="checkbox" value="checkbox" />Remember my
selection<br />
</div>
<div>
<input type="button" value="Set as My Home" onclick=
"goToNewPage(document.dropdown.city)" />
</div>
</form>
</body>
</html>

Not all browsers support hiding option elements, IE for instance does not support hiding an option in any way.
The "greyed out" you're seeing is what happens when you disable an option, and you're not only hiding them, but disabling them as well.
As a sidenote, disabled in this context is a property, and you should be using
option.prop('disabled', true);
The cross browser way to filter options inside a select is to remove and insert the elements, not hide and show them.

Show divs based on dropdown - Script not working

I'm trying to show div's based on dropdown selection using the following script.
It works perfectly on a simple page without any thing in it; but when I put it in the page that I'm developing, it messes up the entire page, making it black and at the end of the URL I get this ...../myPage.html#someIdInThePage .
JS:
<script type="text/javascript">
$(document).ready(function () {
function showTheTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change(function () {
showTheTab($(this).val());
});
showTheTab($('#dropdown').val());
});
</script>
HTML:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" selected="selected">Pubs</option>
<option value="Councils">Councils</option>
<option value="Property">Property</option>
<option value="Various">Various</option>
<option value="Universitys">Universitys</option>
</select>
</p>
</form>
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>

This line: $('div').not(name).hide(); will hide every div on your page apart from the selected div. You're going to need a more specific selector to do the hiding
Example
Javascript:
$(document).ready(function () {
function showTheTab( name )
{
name = '#' + name;
$('div.Tabs > div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTheTab( $( this ).val() );
});
showTheTab( $('#dropdown').val() );
});
Html:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" selected="selected">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
<div class="Tabs">
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>
</div>

Append select data to URL using jQuery

I am having problems trying to add a parameter to a URL using jQuery based off of the value of a Select element. Here is my code so far:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" class="hidden"/>
</fieldset>
</form>
For some reason no matter which option I select, the URL will become process.php?state=Select. What I need it to do is become process.php?state=TX or whatever option the user selects.
Any help is greatly appreciated!

You need to update the value of the hidden input:
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
example here: http://jsfiddle.net/wKvLm/1/show/
Also... with your current code there is no need to create that input via JS. you could defined it within your HTML like this:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="hidden" name="state" value="Select"/>
<input type="submit" class="hidden"/>
</fieldset>
</form>​
working example here: http://jsfiddle.net/wKvLm/2/show/

This is occurring because it gets the value on page load.
Try:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
if ($("#sel-1").val() != "Select") {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
}
});
});
</script>

try this.
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>

<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>
You should set variable data in the on change event.
What we are doing here is adding the a new input hidden field with the drop the value when the drop-down is changed. Then appending the input field and submit the form.

A simple way will be to use jQuery's serialize method:
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
</fieldset>
</form>