Use javascript to convert selectbox to input - javascript

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);
}
}

Related

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>

Filter three drop down and upload data to server

By using this code I am creating two drop down and one the basis of first ,trying to filter second ,
If I select Software issue in first drop down, in second drop down only two data I want, master data and App crash. same ins hardware only 2 printer and machine.
once select printer in second one then only one data print not coming in third drop down.
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
<option value="Master data">Master data</option>
<option value="crash">App Crash</option>
<option value="Printer">Printer</option>
<option value="Machine">Machine</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
<option value="data ussue">Data Isse</option>
<option value="App crash">App crash</option>
<option value="print not coming">Print not coming</option>
<option value="Machine not getting on">Machine not getting on</option>
</select>
<br>
</td>
</tr>
Below is my js code.. , but it's not vorking
<script>
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
</script>

You can dynamically add and remove options from other selects using jQuery easily. Just to give you an idea here is an example;
$(function() {
$('#store_issue').on('change', function() {
$('#store_issue_type').empty();
$('#store_issue_details').empty();
switch($(this).val()) {
case "Software Issue":
$('#store_issue_type')
.append($('<option value="Master data">Master data</option>'))
.append($('<option value="crash">App Crash</option>'));
break;
case "Hardware Issue":
$('#store_issue_type')
.append($('<option value="Printer">Printer</option>'))
.append($('<option value="Machine">Machine</option>'));
}
});
$('#store_issue_type').on('change', function() {
$('#store_issue_details').empty();
switch($(this).val()) {
case "Master data":
$('#store_issue_details')
.append($('<option data-sel="Master data" value="data ussue">Data Isse</option>'));
break;
case "crash":
$('#store_issue_details')
.append($('<option data-sel="crash" value="App crash">App crash</option>'));
break;
case "Printer":
$('#store_issue_details')
.append($('<option data-sel="Printer" value="print not coming">Print not coming</option>'));
break;
case "Machine":
$('#store_issue_details')
.append($('<option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>'));
break;
}
});
});
select {
min-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
</select>
<br>
</td>
</tr>

Try to disable and enable options based on first dropdown selection. Check below snippet for reference. I just sampled with only two selects.
$('#select2 option').prop('disabled', true);
$('#select2').find('.'+ $('#select1').val()).prop('disabled', false);
$('#select1').change(function() {
$('#select2 option').prop('disabled', true);
$('#select2').find('.' + $(this).val()).prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="select2">
<option class="option1">Option 1</option>
<option class="option1">Option 1</option>
<option class="option1">Option 1</option>
<option class="option2">Option 2</option>
<option class="option2">Option 2</option>
<option class="option3">Option 3</option>
</select>

Try something like this:
$("#store_issue").change(function() {
var v = $(this).val().replace(" Issue", "")
$("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
$("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})
$("#store_issue_type").change(function() {
var v = $(this).val()
$("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
$("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})
Demo
$("#store_issue").change(function() {
var v = $(this).val().replace(" Issue", "")
$("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
$("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})
$("#store_issue_type").change(function() {
var v = $(this).val()
$("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
$("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
<option data-sel="Software" value="Master data">Master data</option>
<option data-sel="Software" value="crash">App Crash</option>
<option data-sel="Hardware" value="Printer">Printer</option>
<option data-sel="Hardware" value="Machine">Machine</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
<option data-sel="Master data" value="data ussue">Data Isse</option>
<option data-sel="crash" value="App crash">App crash</option>
<option data-sel="Printer" value="print not coming">Print not coming</option>
<option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>
</select>
<br>
</td>
</tr>
</table>

dropdown value is not inserting as actual

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>

Add input boxes according to select value of Drop Down

I have a selectlist where you can choose a number 1 to 12. Depending on the choosen number I want the same number of input boxes to appear ready to use for $_POST. I can't get the onchange event to trigger any relevant Java?
Edit: I'm realy just fumbling with anything I get at this point:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.min.js"></script>
<script>
function getNPlayers(element) {
var element = document.createElement('input');
element.appendChild(document.createTextNode
('some text for testing'));
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<table>
<tr>
<td><select id="NPlayers" sel.onchange="getNPlayers(this)">
<option value="" disabled="disabled" selected="selected">Number of players</option>
<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">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
<tr id="other_fields" style="display:none">
<td>
Players:<br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
</td>
</tr>
</tr>
</tr>
</table>
</body>
</html>

<html>
<head>
<title>Dynamic Textbox</title>
<script>
function generate(total,id){
var drpDown = document.getElementById(id);
for(i=0;i<total;i++){
var child = document.createElement("input");
child.id = "test"+i;
child.name = "test"+i;
drpDown.parentNode.insertBefore(child,drpDown);
}
}
</script>
</head>
<body>
<select id='test' onchange='generate(this.value,"test")'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</body>
</html>

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