Generate input box based on dropdown selection - javascript

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:
if i select school from dropdown:
<label>Enter School name:</label>
<input name="name">
if i select individual from dropdown:
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
$('#elementreg').change(function() {
$('#input-holder').empty();
if ($(this).val() == "individual") {
$('#input-holder').append('<input type="text" name="input" value="test" >');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Your code works, but why not show/hide? It is much faster than manipulating the DOM each time
$("#elementreg").on("change", function() {
var val = $(this).val();
$(".types").hide().find('input:text').val(''); // hide and empty
if (val) $("#" + val).show();
});
.types {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
<div class="types" id="individual">
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
</div>
<div class="types" id="school">
<input .... />
</div>
Your version:
$("#elementreg").on("change", function() {
var val = $(this).val(), $div = $("#input-holder"),fields=" ";
switch (val) {
case "individual":
fields='<label>Your name: </label><input type="text" /><input type="text"/>';
break;
case "school":
fields='<label>School: </label><input type="text" />';
break;
}
$div.html(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"> </div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Related

jquery add values dropdown using data attribute

I have a simple HTML form:
<div class="form-group">
<label class="control-label col-md-2">Monday<span class="required"> * </span></label>
<div class="col-md-5">
<select name="monday_main" id="monday_main_list" class="form-control">
<option value=""></option>
<option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option>
<option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option>
</select>
</div>
<div class="col-md-5">
<select name="monday_side" id="monday_side_list" class="form-control">
<option value=""></option>
<option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option>
<option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option>
</select>
</div>
</div>
<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice">
<input type="number" placeholder="" value="" name="amountKm" id="amountKm">
<input type="number" placeholder="" value="" name="amountCall" id="amountCall">
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff">
What I need to achieve is to calculate values for each data attribute separately (e.g. separate value for data-staff, data-price, data-km and data-call) on changing options and then displaying values in 4 separate input fields.
I am not sure even if it is possible, but if so I would be very grateful if someone could help me
// good idea to cache elements you'll be re-using
var dropdowns = $('select'),
inputPrice = $('#amountPrice'),
inputKm = $('#amountKm'),
inputCall = $('#amountCall'),
inputStaff = $('#amountStaff');
// attach 'onchange' event handler to all dropdowns
dropdowns.change(function () {
var amountPrice = 0,
amountKm = 0,
amountCall = 0,
amountStaff = 0;
// for each dropdown, tally amounts
dropdowns.each(function () {
// get selected option
var option = $('option:selected', this);
amountPrice += parseInt(option.data('price'), 10);
amountKm += parseInt(option.data('km'), 10);
amountCall += parseInt(option.data('call'), 10);
amountStaff += parseInt(option.data('staff'), 10);
});
// set inputs
inputPrice.val(amountPrice);
inputKm.val(amountKm);
inputCall.val(amountCall);
inputStaff.val(amountStaff);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label col-md-2">Monday<span class="required"> * </span></label>
<div class="col-md-5">
<select name="monday_main" id="monday_main_list" class="form-control">
<option value=""></option>
<option value="Carlow" data-staff="1" data-price="100" data-km="100" data-call="200" >Carlow</option>
<option value="Cavan" data-staff="1" data-price="100" data-km="100" data-call="200" >Cavan</option>
</select>
</div>
<div class="col-md-5">
<select name="monday_side" id="monday_side_list" class="form-control">
<option value=""></option>
<option value="Dublin" data-staff="1" data-price="200" data-km="200" data-call="400" >Dublin</option>
<option value="Galway" data-staff="1" data-price="200" data-km="200" data-call="400" >Galway</option>
</select>
</div>
</div>
<input type="number" placeholder="" value="" name="amountPrice" id="amountPrice">
<input type="number" placeholder="" value="" name="amountKm" id="amountKm">
<input type="number" placeholder="" value="" name="amountCall" id="amountCall">
<input type="number" placeholder="" value="" name="amountStaff" id="amountStaff">
I am not sure if I follow your question but you can access to those data with a change listener.
$('#monday_main_list').on('change', function() {
if($(this).val()!=='') {
var selectedOption = $(this).find('option[value=' + this.value + ']').first();
if (selectedOption) {
var data = selectedOption.data();
console.log(data);
}
}
})

JQuery - random code generator on selecting data in select options without if condition

I'm writing the code for generating random code using jQuery. It was working fine. But I used if condition to achieve that. What I need is to write that function without if conditions... how can I get that ?
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
if(select_data == "Binary" )
{
select_data = "BY";
}
else if(select_data == "Alpha" )
{
select_data = "AA";
}
else if(select_data == "AlphaNumeric" )
{
select_data = "AN";
}
else if(select_data == "Numeric" )
{
select_data = "NC";
}
else
{
select_data ="";
}
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>
If you can change value of options, use it, else - use data api
function getcodes() {
$('.disabled').val($('.getvalue').val() + $('.control option:selected').data('val'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="" data-val="">select</option>
<option value="Binary" data-val="BY">Binary</option>
<option value="Alpha" data-val="AA">Alpha</option>
<option value="AlphaNumeric" data-val="AN">AlphaNumeric</option>
<option value="Numeric" data-val="NC">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>
Try with single line if condition
function getcodes() {
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
select_data = select_data == "Binary" ? "BY" : (select_data == "Alpha") ? "AA" : (select_data == "AlphaNumeric") ? "AN" : (select_data == "Numeric") ? "NC" : "";
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>
You should create an array for that!
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data_input = $('.control').val();
var array = ["BY","AA","AN","NC"];
var select_data = array[select_data_input];
$('.disabled').val(input_data + select_data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="0">Binary</option>
<option value="1">Alpha</option>
<option value="2">AlphaNumeric</option>
<option value="3">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>
please try this code.
function getcodes()
{
var input_data = $('.getvalue').val();
var select_data = $('.control option:selected').data('code');
(typeof select_data != "undefined") ? $('.disabled').val(input_data + select_data) : "";
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary" data-code="BY">Binary</option>
<option value="Alpha" data-code="AA">Alpha</option>
<option value="AlphaNumeric" data-code="AN">AlphaNumeric</option>
<option value="Numeric" data-code="NC">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>
You can use object. Like this.
var codesArray = {
"Binary": "BY",
"Alpha": "AA",
"AlphaNumeric": "AN",
"Numeric": "NC"
};
function getcodes() {
var input_data = $('.getvalue').val();
var select_data = $('.control').val();
$('.disabled').val(input_data + codesArray[select_data]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
<div class="get-values">
<input type="text" value="" class="getvalue">
<select class="control">
<option value="">select</option>
<option value="Binary">Binary</option>
<option value="Alpha">Alpha</option>
<option value="AlphaNumeric">AlphaNumeric</option>
<option value="Numeric">Numeric</option>
</select>
<input type="button" value="getcode" class="getcode" onclick="getcodes()">
<input type="text" value="" class="disabled" disabled>
</div>
</div>

First Dropdown selecting second and third dropdown

html-
<label >Parameter Name: </label>
<select id="name" name="name" required>
</select> </br> </br>
<label >Address: </label>
<select class= "address" type=text id="address" name="address" style="width:14em;" required>
</select> </br> </br>
<label >Data Size: </label> </br>
<select type=text id=sizeSelect name="size"style="width: 14em;" required>
</select> </br> </br>
js-
function processFile(e) {
var file = e.target.result,
results;
if (file && file.length) {
results = file.split(",");
$('select').children().remove();
for (var i = 1; i < results.length; i=i+8) {
if(typeof results[i] !== 'undefined') {
$("select[name='address']").each(function() {
$(this).append('<option val="i">' + results[i] + '</option>');
});
}
if(typeof results[i+6] !== 'undefined') {
$("select[name='name']").each(function() {
$(this).append('<option val="i">' + results[i+6] + '</option>');
});
}
if(typeof results[i+1] !== 'undefined') {
$("select[name='size']").each(function() {
$(this).append('<option val="i">' + results[i+1] + '</option>');
});
}
}
}
}
I want to somehow allow the interface so that when the client selects the address option with value 1 then the name and size of that value are selected automatically. Any ideas?
Using jQuery .val() you can get and set the values for select tags.
If the options of each select contains an attribute with a value of the next select option to be selected, you can reduce all to:
$(function () {
$('#address').on('change', function(e) {
var optionSelected = $(this).find('option:selected');
$('#name').val(optionSelected.attr('name'));
$('#sizeSelect').val(optionSelected.attr('sizeSelect'));
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form>
<label>Parameter Name: </label>
<select id="name" name="name" required>
<option></option>
<option value="1" >Name 1</option>
<option value="2">Name 2</option>
</select><br><br>
<label>Address: </label>
<select class="address" type=text id="address" name="address" style="width:14em;" required>
<option></option>
<option value="1" name="1" sizeSelect="1">Address 1</option>
<option value="2" name="2" sizeSelect="2">Address 2</option>
</select> <br><br>
<label>Data Size: </label> </br>
<select type=text id=sizeSelect name="size" style="width: 14em;" required>
<option></option>
<option value="1">Size 1</option>
<option value="2">Size 2</option>
</select> <br> <br>
</form>

Dropdown that has an option to input a field

I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>

jQuery select to make HTML DIV visable

The HTML:
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" class="1">Average Sold</option>
<option value="mma" class="1">Min|Max|Avg Sold</option>
<option value="oh" class="2">On Hand Qty</option>
<option value="mr" class="2">Money Report</option>
</select>
<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
The jQuery:
$(document).ready(function () {
$('#1').hide();
$('#sr').change(function () {
$('#'+$(this).val()).show();
});
});
I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.
As of right now the page loads with the DIV hidden but it never become visible.
Thanks in advance.
You need to look at the accepted option, you can not use the value like you are doing.
$(document).ready(function () {
$('.region').hide();
$('#sr').change(function () {
$(".region").hide();
var region = $(this).find("option:selected").data("region");
$('#'+region).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" data-region="1">Average Sold</option>
<option value="mma" data-region="1">Min|Max|Avg Sold</option>
<option value="oh" data-region="2">On Hand Qty</option>
<option value="mr" data-region="2">Money Report</option>
</select>
<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
<div id='2' class='region'>
2
</div>

Categories