Develop Reference

How to make "select option" select option for quantity using jQuery

I have a select option for a quantity that I want to make it hide and show depending on the value. Quantities are from 1 to 4, when the option value is "more" the select element will hide then the input name="quantity-input" will show up so you can type manually quantity you like from 1 to 50.
<input type="number" name="quantity-input" id="qty-input" hidden>
<select name="quantity-select" id="qty-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>

i'm using jquery to make selectors easier. let me know at the comment section if something doesn't work as you want.
$('.QuantSelect_').change(function(){
const QuantSelect_ = $(this);
const QuanMoreIn_ = QuantSelect_.parent().find('.QuanMoreIn_').eq(0);
const switchInput = QuantSelect_.parent().find('.switchInput_').eq(0);
let selected_ = QuantSelect_.val();
if( selected_ === 'more' ){
QuantSelect_.hide();
QuanMoreIn_.show().focus();
switchInput.show().click(function(){
QuantSelect_.toggle(); QuanMoreIn_.toggle();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="QuanForm">
<input class="QuanMoreIn_" type="number" name="quantity-input" placeholder="Enter the specific Number" style="display:none;" />
<select class="QuantSelect_" name="quantity-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
<button class="switchInput_" style="display:none;">switch</button>
</div>

You need an event-listener on select field which will mark the field hidden/disabled when More option is selected and make your input field visible.
document.getElementById('qty-select').addEventListener('change', event => {
const currentValue = event.currentTarget.value;
if (currentValue == 'more') {
event.currentTarget.setAttribute('disabled', true);
document.getElementById('qty-input').removeAttribute('hidden');
}
});

Please update html like below.
<input type="number" name="quantity-input" id="qty-input" hidden min="1" max="50">
<select name="quantity-select" id="qty-select" onclick="hideMe();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
And add javascript function.
function hideMe() {
var selectBox = document.getElementById("qty-select");
if(selectBox.options[selectBox.selectedIndex].value == "more") {
document.getElementById("qty-select").style.display="none";
document.getElementById("qty-input").removeAttribute('hidden');
}
}

Change url in inframe tags

I have a problem like the following. I embed a chart in my site with inframre tags with . My website has a option tag. How can I change url 1 in an iframe to url2 when choosing option 2, url3 when choosing option 3. A solution would be very grateful.
Example :
<iframe src="url1"></iframe>
<select id "select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I found a very simple solution. This is my solution.
<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
var tuyencap = document.getElementById("tuyencap").value;
alert(tuyencap)
if (tuyencap ==1){
document.getElementById('urlFrame').src="url1";
}
else if (tuyencap ==2){
document.getElementById('urlFrame').src="url2";
}
else if (tuyencap ==3){
document.getElementById('urlFrame').src="url3";
}
else if (tuyencap ==4){
document.getElementById('urlFrame').src="url4";
}
}
</script>

use onchange for your select element
<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Javascript:
function changeValue(element){
var value = element.value;
document.getElementById('urlFrame').src = value;
}
Note
The value of your options should be the URL you intend to use so instead of:
<option value="1">1</option>
I expect you should have something like:
<option value="http://google.com">1</option>
EDIT 1
You can use the innerHTML also but I don't think it's good user experience
<option value="1">http://google.com</option>
__
var value = element.innerHTML;
document.getElementById('urlFrame').src = value;
EDIT 2
Like #LelioFaieta suggested you can use the data.* attribute:
<option data-url="http://google.com" value="1">1</option>
Javascript:
function changeValue(element){
var urlSelect = element.dataset.url;
document.getElementById('urlFrame').src = urlSelect;
}

You can do with data attribute if you need.
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
<option value="1" data-url="url1">1</option>
<option value="2" data-url="url2">2</option>
<option value="3" data-url="url3">3</option>
<option value="4" data-url="url4">4</option>
</select>
function changeValue(){
var x = document.getElementById("select");
var myoption = x.options[x.selectedIndex];
var urlSelect = myoption.dataset.addr;
alert('urlSelect = '+urlSelect);
document.getElementById('urlFrame').src = urlSelect;
}
The dataset attribute is the attribute that read all the data attributes from your option tag.

Hi please check the code below,it's working absolutely fine. You just need to change path as per your requrement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<iframe height="800px" width="800px"
src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg"
id="imageToSwap" class="profile"></iframe>
<select onchange="$('#imageToSwap').attr('src',
this.options[this.selectedIndex].value);">
<option value="http://cdns2.freepik.com/free-photo/facebook-
logo_318-49940.jpg" selected>Facebook</option>
<option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
40459.jpg">Twitter</option>
</select>

Select2 change attr in second select

How I can change an attribute of an <option> in my second <select> when the same value was selected in the first <select>?
More specifically: When I select an option in my first <select>, then the same option in the second <select> should be disabled.
$("body").on("select2:select", "#first", function(e) {
var cur_id = e.params.data.id;
$("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
$("#second").trigger('refresh');
$("#first").trigger('refresh');
});
$("body").on("select2:select", "#second", function(e) {
var cur_id = e.params.data.id;
$("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
$("#second").trigger('refresh');
$("#first").trigger('refresh');
});
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>

Here is a consise way to do it.
$("select#first").on("change", function() {
$("select#second option").each(function() {
if ($("select#first option:selected").val() === $(this).val()) $(this).prop("disabled", true);
else $(this).prop("disabled", false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1" disabled="disabled">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
You might want to automatically select (kick to) another option too in your 2nd select when a user selects the option that is selected in the 2nd select. If that makes sense :-)

For select2 version >= 4.0.0
Solution:
$("select").val("1").trigger("change");

$("body").on("change", "#first", function(e) {//use change event
var cur_id = $('option:selected',this).val();//get value of selected option
console.log(cur_id);
$(this).siblings("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});
$("body").on("change", "#second", function(e) {//use change event
var cur_id = $('option:selected',this).val();//get value of selected option
console.log(cur_id);
$(this).siblings("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>

Add input fields in form when dropdown option selected

How to add fields in form dynamically
so my form looks like :
<form action="/reservation-add" method="post">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>
If selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.

Use this way:
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
Have another div, with the ID "inputArea":
<div id="inputArea"></div>
Snippet
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
<option>Select...</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>
</select>
<div id="inputArea"></div>

<form action="/reservation-add" method="post" id="appendform">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>
Jquery Code
$(document).ready(function ()
{
$('#dropdownlist').on('change',function ()
{
var howmuch = $(this).val();
var appendhtml = '';
for (i = 0; i < howmuch; i++)
{
appendhtml+= "<input name="+i+" value="">";
}
$('.appendform').append(appendhtml);
});
});

$("#dropdownlist").on("change",function(e){
for(i=0; i < $(this).val() ;i++){
$("form").append($("<input type='text'/>"));
}
})

try this
<script>
function fireChange(val) {
var form = document.forms[0];
if(val) {
for (var i = 0; i < val; i++) {
var in = document.createElement('input');
form.appendChild(in);
}
}
}
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>

Step 1--- Add id to form
Step 2---Use jquery onchange method, code shown below
<form action="/reservation-add" method="post" id="myForm">
<select id="dropdownlist">
<option value="1"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
$('#dropdownlist').on("change",function() {
for(var i=0;i<this.value;i++)
{
$("#myForm").append("<input type='text' name='myname[]'/>
<br>");
}
});

To get around the problem of adding yet more input fields after the initial drop down selection (if the user changes their mind after the initial selection), which is the case with all the answers on this page.
See the solution below:
$("#dropdownlist").change(function () {
$("#inputArea > :input").remove();
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});

By pure JavaScript, you can do it like this;
<script>
document.getElementById("dropdown").onchange = function() {
document.querySelector("#inputarea").innerHTML = '';
for(var i = 0; i < document.getElementById("dropdown").value; i++) {
var input = document.createElement("input");
input.name = 'input_name';
input.type = 'text';
document.getElementById("inputarea").append(input);
}
}
</script>
And here is the html;
<body>
<form>
<select id="dropdown">
<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>
</select>
</form>
<div id="inputarea"></div>
</body>

Setting value to a form field with JavaScript

I have a web form with several fields. Three of them are ano_evento, mes_evento and dia_evento (year, month and day). I want to get the values from these fields, convert it to a date format and show the formatted date in another field called fecha_evento. The user sets a value for ano_evento (e.g. 2014), a value for mes_evento (e.g. 11) and a value for dia_evento (e.g. 25). The value for fecha_evento should then be 2014-11-25.
All three fields have an onchange method in it:
For ano_evento:
<select name="ano_evento" id ="ano_evento" onchange="cambiar_fecha()">
For mes_evento:
<select name="mes_evento" id ="mes_evento" onchange="cambiar_fecha()">
For dia_evento:
<select name="dia_evento" id="dia_evento" onchange ="cambiar_fecha()">
The field for fecha_evento:
<input type="text" name="fecha_evento" id="fecha_evento" value="0" size="32" />
And this is the script:
<script>
function cambiar_fecha(){
alert (document.getElementById("fecha_evento").value);
var ano = document.getElementById("ano_evento").value;
var mes = document.getElementById("mes_evento").value; //
var dia = document.getElementById("dia_evento").value;
document.getElementById("fecha_evento").value = ano+"-"+mes+"-"+dia;
}
</script>
When the user changes any of the three fields values, the alert inside the script is shown, but the value from the field fecha_evento doesn't change.
Any help is welcome

how are you?
Try this code:
<select name="ano_evento" id="ano_evento">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="mes_evento" id="mes_evento">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="dia_evento" id="dia_evento">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="fecha_evento" id="fecha_evento">
<script>
var ano = document.getElementById("ano_evento");
var mes = document.getElementById("mes_evento");
var dia = document.getElementById("dia_evento");
var fecha = document.getElementById("fecha_evento");
function cambiar_fecha() {
alert(fecha.value);
fecha.value = ano.value + "-" + mes.value + "-" + dia.value;
alert(fecha.value);
}
ano.onchange = cambiar_fecha;
mes.onchange = cambiar_fecha;
dia.onchange = cambiar_fecha;
</script>
Recommendations:
- Save the elements in variables to optimize execution avoiding constantly DOM access.
- Set events handler from JS.
- Use browser console to see if there are JS errors.
Regards.

Instead of the inline javascript, I would just go with a querySelectorAll
DEMO
HTML:
<select name="ano_evento" id ="ano_evento" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="mes_evento" id ="mes_evento" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="dia_evento" id="dia_evento" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" name="fecha_evento" id="fecha_evento" value="0" size="32" />
Javascript:
var a = document.querySelectorAll('select');
console.log(a);
for(var i = 0; i<a.length;i++) {
a[i].addEventListener('change',cambiar_fecha);
}
function cambiar_fecha(){
alert (document.getElementById("fecha_evento").value);
var ano = document.getElementById("ano_evento").value;
var mes = document.getElementById("mes_evento").value; //
var dia = document.getElementById("dia_evento").value;
document.getElementById("fecha_evento").value = ano+"-"+mes+"-"+dia;
}