dropdown value is not inserting as actual - javascript

If I select Yes, insert into query is taking as 11 in database:
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="11">Yes</option>
<option value="22">No</option>
</select>
</td>


Change options value to desired, in your case "Yes" & "No", like this:
(jQuery added only to confirm correct value is being captured)
$("#Offers_in_Hand_Id").change(function() {
var value = $("#Offers_in_Hand_Id").val();
$("#test").html(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<span id="test"></span>

Related

Displaying items in the jquery append() upon a drop down selection

I have a drop-down menu in the jquery append() function which adds contents to the row of a table whenever I click a button I call "AddItem".
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
I want to display option "Triangle" in the second select option whenever a user clicks or selects the option "Window" in the first select drop-down.

Use on change: $('#item-deducted').on('change').
$('#tbody').append(`<tr id="R$">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
$('#item-deducted').on('change', function() {
if($(this).val() === 'Window'){
$('#shapeDeducted').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbody"></div>

JQuery / Javascript - Set multiple drop lists to match master drop list on link click

In the header of my web-page I have a drop list. The user can set a value here and then click "Set All".
<th>
<span ="MASTERAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
After clicking "Set All" all instances of the below should be set to match the above choice.
<td class="one td_left" nowrap="nowrap">
<span ="CATAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>
How can I achieve this? I have a bit of code that works when I use input boxes... but not drop lists... here is that bit of code. It relates to other input boxes but it works on them. I just can't adapt it for drop lists.
<script type="text/javascript">
var $=jQuery;
$(document).ready(function() {
var myInput = $('#MASTERDATE4');
$('.SetDate4').click(function() {
$('input.CATDISCSTART').val(myInput.val());
});
});
</script>

You are using many class names wrong, interchanging them with id. What is this <span ="CATAVAIL" >? and multiple elements were also having same id which you should not do and set the value of the input on change of select not on document.ready().
$(document).ready(function() {
var myInput;
$('#CATAVAIL').change(function() {
myInput = $(this).val();
});
$('.SetAvail').click(function() {
console.log(myInput)
$('#CATAVAIL2').val(myInput);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th>
<span>
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
<td class="one td_left" nowrap="nowrap">
<span>
<select id="CATAVAIL2" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>

Show/hide select options based on value of another select using javascript/jquery?

I want to select and get results but options should be invisible so when I select name they show up like that
# SELECT FROM
<select>
<option value="n">name/option>
<option value="a">age</option>
<option value="c">country</option>
</select>
# GET
<select>
<!-- # IF YOU SELECT NAME THESE SHOW UP -->
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select>
<!-- IF YOU SELECT AGE THESE SHOW UP -->
<option value="1">23</option>
<option value="2">24</option>
</select>
<select>
<!-- IF YOU SELECT COUNTRY THESE SHOW UP -->
<option value="1">uk</option>
<option value="2">usa</option>
</select>
but select tag should not be invisible. coz the HTML page cant be blank I want to make options only to be invisible

When main <select> is changed, get value of selected option and using it, select relevant select tag and show it.
$(".main").change(function(){
$("."+$(this).val()).show().siblings().not(".main").hide()
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
# SELECT FROM
<select class="main">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<br>
<select class="n">
# IF YOU SELECT NAME THESE SHOW UP
<option value="1">john</option>
<option value="2">dan</option>
</select>
<br>
<select class="a">
# IF YOU SELECT AGE THESE SHOW UP
<option value="1">23</option>
<option value="2">24</option>
</select>
<br>
<select class="c">
IF YOU SELECT COUNTRY THESE SHOW UP
<option value="1">uk</option>
<option value="2">usa</option>
</select>

HTML:
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="n">
<option value="1">john</option>
<option value="2">dan</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="a">
<option value="1">23</option>
<option value="2">24</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="c">
<option value="1">uk</option>
<option value="2">usa</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
</form>
JS:
$(function(){
var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});
});
DEMO:
Fiddler

Just give your select tags the appropriate ids and hide/show them in the change event of the first select.
You can hide the selects in your html by using the hidden attribute.
$('#dropdown').on('change',function(){
$('select:not(#dropdown)').hide(); //hides all selects except the one with id "dropdown"
$("#" + $(this).val()).show(); //shows the select where id = #dropdown's value ("n"/"a"/"c")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<select id="n">
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select id="a" hidden>
<option value="1">23</option>
<option value="2">24</option>
</select>
<select id="c" hidden>
<option value="1">uk</option>
<option value="2">usa</option>
</select>

Use javascript to convert selectbox to input

Situation I have a form where the user selects from a few options in a select box.
When the user select the option 'other' i want to select box to transform into an input box.
This is my code.
Head
<script>
function chargeother(select) {
if (select=="other") {
document.getElementById('chargeother').innerHTML= '<input type="text" name="type">';
}
}
</script>
Body
First Select Box
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this.value)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
Second Select Box
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this.value)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
I need this function twice on my page is it possible to add an 'id' into the onchange function call

You needed to specify a <table> and <tr> tag for <td> in the HTML, and use innerHTML on the element and make sure you comment out the double quotes for the attribute values
//CODE
<!DOCTYPE html>
<html>
<head>
<script>
function chargeother(ele){
switch(ele.parentNode.id){
case "inputtype":
if(ele.value === "other"){
document.getElementById("inputtype").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
case "inputhazard":
if(ele.value === "other"){
document.getElementById("inputhazard").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
</body>
</html>

Try this example without target id:
var chargeother = function(el) { // note, its html element
if ('other' !== el.value) return;
el.parentNode.innerHTML = "<input type='text' name='" + el.name + "'/>";
};
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)"><!-- not just value -->
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)"><!-- not just value -->
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>

You can achieve it like this:
function chargeother ( select ) {
if (select == "other")
{
var elem = document.getElementById(" selectId ");
elem.parentElement.removeChild (elem);
var inputElem= document.createElement ('input');
inputElem. type='text';
document.getElementById (" chargeother").appendChild(inputElem);
}
}

display selected value into textbox from 2 or 3 dropdownlist using javascript

i have 3 dropdownlist in my form.i want everytime user select from list it will display into textbox..so if user select from 3 dropdownlist it will display into 3 textbox..the problem is only 1 value will display into textbox and the other 2 not display..here my code
<script>
window.onload = function()
{
document.getElementsByName('mydropdown')[0].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>
this is my html
<td>
<select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td>
<select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td>
<label id="mylabel">
</label>
</td>

You can call a common function using "onchange" and update the value there. And since you set a value using innerHTML, it replaces the previous value. user += operator to append value to existing value.
HTML:
this is my html
<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select></td>
<td><label id="mylabel"></label></td>
Javascript:
Since there in no way to get multiple elements with same ID, we get elements with tag name label and check their ID's to select our desired labels.
function changeVal(value)
{
var rows = document.getElementsByTagName('label');
for(var i in rows)
{
if(rows[i].id == 'mylabel')
rows[i].innerHTML += value;
}
}
JS Fiddle:
http://jsfiddle.net/xensoft/fK5m3/3/

Categories