I'm trying to change a select list to a text input (an example is amazon cart) based on a value of 10. What I have works for 1 row but I want to add multiple rows. I need some help changing the jquery to only change 1 row at a time.
$(function() {
$('.dropdown-change').on('change', function() {
var dropdownValue = $(this).val();
if (dropdownValue == 10) {
$('.dropdown-control').hide();
$('.input-control').show();
} else {
$('.dropdown-control').show();
$('.input-control').hide();
}
return false;
});
});
.input-control {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row dropdown-row">
<div class="col-xs-2 col sm-2 col-md-2">
<label for="quantity">Qty</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<div class="dropdown-control">
<div class="col-xs-12 col-sm-12 col-md-6 no-pad-left">
<select name="quantity" class="form-control dropdown-change">
<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>
</select>
</div>
</div>
<div class="input-control">
<div class="col-md-6 no-pad-left">
<input type="text" value="10" size="10" name="quantity" id="quantity" class="form-control" />
</div>
<div class="col-md-6 no-pad-left">
<button class="btn btn-primary btn-xs">update</button>
</div>
</div>
</div>
</div>
I fixed this by changing my HTML around and using $(this).closest() and $(this).next()
Related
I had a select which, depending on the selected option, affected the options from two other selects (which also affected each other between themselves). So far, this was working fine. Here is the code I had:
HTML
<div id="sel" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo">
<option selected>Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
JS
$('.tipo').on("change", function() {
var val = $(this).val();
$(".num-a").html(options1[val]);
$(".num-n").html(options2[val]);
if (val == 1) {
$('.num-a').on("change", function() {
var vara = $(this).val();
$(".num-n").html(optionsIn[vara]);
});
$('.num-n').on("change", function() {
var varn = $(this).val();
$(".num-a").html(optionsIn[varn]);
});
}
if (val == 2) {
// same with different arrays
}
if (val == 3) {
// same with different arrays
}
if (val == 4) {
// same with different arrays
}
});
var options1 = [
array with options 1
];
var options2 = [
array with options 2
];
etc ...
I had to change it, so that instead of only one time, I will have this same code repeated X number of times (depending on an input set by the user), all of which will have the same three selects inside, which will have the same options. So it now looks something like this:
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
...
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
The problem is that with the code I have, whenever I set any of the .tipo options, it affects all of the X .num-a and .num-n selects (also changing any of the .num-a affects all of the .num-n and viceversa), when it should only affect the options of the corresponding nth selects.
I had to chang the first on("change") to $(document).on('change') for the selects to be recognized (found it on another user answer), so the first line of the script is now:
$(document).on('change','.tipo-habitacion-sel', function() {
I'm not very good with js, so this may be something obvious, but I tried several things and can't make it work.
As there mutiple selects in your html code so to refer only the required selects you can use .closest() this will get the closest div eg : sel-val and then use .find method to find select-box where you need append new options
Demo Code :
$(document).on('change', '.tipo', function() {
var val = $(this).val();
//get closest div with class sel-val
var selector = $(this).closest(".sel-val")
//then use find to get required select refernce
selector.find(".num-a").html("<option>0</option><option value='1' >1</option>");
selector.find(".num-n").html(" <option>0</option><option value='1' >1</option>");
//other codes.
});
$(document).on('change', '.num-a', function() {
var vara = $(this).val();
var selector = $(this).closest(".sel-val")
// $(".num-n").html(optionsIn[vara]);
selector.find(".num-n").html("<option>0</option><option value='2'>2</option>");
});
$(document).on('change', '.num-n', function() {
var varn = $(this).val();
var selector = $(this).closest(".sel-val")
//$(".num-a").html(optionsIn[varn]);
selector.find(".num-a").html("<option>0</option><option value='3'>3</option>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
<hr>
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
I have a form dropdown list and my goal is to able a user to select "Other" and what I want to happen is to make a form row appear below so the user can type in the "Other" option text. Here is my code below, I'm not sure if Bootstrap naturally has a built in hide/show function. I am using latest version if that helps. Many thanks in advance!
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value="AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
The form row below I want to appear when above "other" option is selected and of course disappear when another dropdown option is selected.
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
We can make use of bootstrap util class "d-block" and "d-none" to show/hide the containers.
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
Working demo
I have added both a JQuery option and a vanilla JS option. Both I also added an ID to the option tag with the value of "other". Simply added an id="other" attribute to that tag.
Using JQuery you can use .show() and .hide() to show/hide the input when the other option is selected.
var other = $("#other");
var otherInput = $(".otherInput");
otherInput.hide();
$('#mySelect').on('change', function() {
var value = $(this).val();
if(value === "other"){
otherInput.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value=" AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option id="other" value="other">Other</option>
</select>
</div>
</div>
<div class="form-row otherInput">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
Vanilla JS:
First set your other input div to hidden using js .style. Then create a onload function and add an event listener for change. Run a conditional on the value and change the style if the conditional is true.
otherInput.style.display = "none";
window.onload = function () {
var selectBox = document.getElementById("mySelect");
selectBox.addEventListener('change', changeFunc);
function changeFunc() {
if(this.value === "other"){
otherInput.style.display = "block";
}else{
otherInput.style.display = "none";
}
}
}
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select type="dropdown" name="cemetery" class="form-control" id="mySelect">
<option value="select" selected="selected">Select Cemetery</option>
<option value=" AK">Akatarawa</option>
<option value="TA">Taita</option>
<option value="WA">Wainuiomata</option>
<option value="WH">Whenua Tapu</option>
<option value="MA">Makara</option>
<option value="KA">Karori</option>
<option value="ST">St Johns</option>
<option value="AW">Awa Tapu</option>
<option value="PA">Paraparaumu</option>
<option id="other" value="other">Other</option>
</select>
</div>
</div>
<div id="otherInput" class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery">
</div>
</div>
$(document).ready(function(){
$("#selectFirst").on('change',function(){
var integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})
$("#selectSecond").on('change',function(){
var string=$(this).attr('selected','selected').val();
$("#text2").html(string);
})
$("#selectThird").on('change',function(){
var mix=$(this).attr('selected','selected').val();
$("#text3").html(mix);
})
$("#addBtn").click(function(){
var grandTotal= integer + string + mix;
$("#total").html(grandTotal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper p-5">
<div class="row">
<div class="col-md-8 center-block card p-3 mb-4">
<div class="row">
<div class="col-md-2">
<select class="custom-select form-control" id="selectFirst">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectSecond">
<option selected>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectThird">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="two">two</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-6">
<div class="card bg-primary text-white">
<div class="card-body">
<ul class="list-unstyled">
<li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
<li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
<li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
<li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
<input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- row-closed-->
</div>
Here in code snippet you can see my html and jquery I'm using. when I selected values from select option then they will append to the card having selected1 for select option first and selected2 for select option two and selected3 for the select option third and when I clicked the button total then I want the total of the all selected value but there is an error
integer is not defined
You variables integer, string, mix are not defined in the button handler context.
You defined them in the scope of each of the previous handlers individually but not in the button one. You can either have their scope be above the button handlers so they can be accessible or do something like this:
$("#addBtn").click(function(){
var integer=$('#selectFirst').val();
var string=$('#selectSecond').val();
var mix=$('#selectThird').val();
$("#total").html(integer + string + mix);
})
Try this. Problem with code was that you didn't declare the variables globally which was needed in your case.
$(document).ready(function(){
var integer = string = mix = '';
$("#selectFirst").on('change',function(){
integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})
$("#selectSecond").on('change',function(){
string=$(this).attr('selected','selected').val();
$("#text2").html(string);
})
$("#selectThird").on('change',function(){
mix=$(this).attr('selected','selected').val();
$("#text3").html(mix);
})
$("#addBtn").click(function(){
var grandTotal= integer + string + mix;
$("#total").html(grandTotal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper p-5">
<div class="row">
<div class="col-md-8 center-block card p-3 mb-4">
<div class="row">
<div class="col-md-2">
<select class="custom-select form-control" id="selectFirst">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectSecond">
<option selected>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div class="col-md-2">
<select class="custom-select form-control" id="selectThird">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="two">two</option>
<option value="3">3</option>
</select>
</div>
<div class="col-md-6">
<div class="card bg-primary text-white">
<div class="card-body">
<ul class="list-unstyled">
<li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
<li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
<li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
<li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
<input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- row-closed-->
</div>
define integer, string and mix outside the functions not inside thats why they are undefined they are in different scopes
var integer = "";
$("#selectFirst").on('change',function(){
integer=$(this).attr('selected','selected').val();
$("#text1").html(integer);
})
The problem I'm having right now is that the content I want to append now is too to just creating it inside the main JavaScript file.
Is there a way that I can put this content inside some other HTML file and then call it with AJAX in the JavaScript file and append this content maybe in a loop to append it the number of times chosen from a select input tag?
Here is the select input code:
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</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>
</select>
Here is the content I want to append:
<div class="row beneficiario-info">
<div class="col-md-6">
<div class="form-group w-75">
<label for="bene-nombreyapellido">Nombre y Apellido</label>
<input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
</div>
<!-- form group -->
<div class="form-group w-75">
<label for="bene-ci-numero">Cedula de identidad</label>
<div class="input-group">
<div class="input-group-prepend">
<select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
<option value="VE">V</option>
<option value="EX">E</option>
</select>
</div>
<!-- cedula tipo prepend -->
<input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
</div>
<!-- input group -->
</div>
<!-- form group -->
</div>
<!-- col -->
<div class="col-md-6">
<div class="form-group w-75">
<label for="parentezco">Parentezco</label>
<select name="parentezco" id="parentezco" class="custom-select">
<option value="">---------</option>
<option value="hijo">Hijo</option>
<option value="padre">Padre</option>
<option value="hermano">Hermano o Hermana</option>
<option value="conyugue">Conyugue</option>
</select>
</div>
<div class="form-group">
<label for="servicioadicional">Servicios Adicionales</label>
<select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
<option value="medico">Médico</option>
<option value="odontologico">Odontológico</option>
<option value="funerario">Funerario</option>
<option value="vial">Víal</option>
</select>
</div>
</div>
<!-- col -->
</div>
<!-- row beneficiario -->
Here is the JavaScript code:
var number = 0;
$('#ctd-beneficiarios').on('change', function() {
numero = $(this).val();
beneficiarios_wrapper.html('');
for (var i = 0; i < numero; i++) {
}
});
beneficiarios_wrapper is the div where I want to append the content to.
Rather than storing it in a separate file and retrieving it via AJAX, use a
hidden template like so:
$main = $('#main');
for(var i=0;i<5;i++){
var $template = $('.template').clone();
$template.removeClass('template');
$template.find('.mainText').text("Template "+i);
$main.append($template);
$template.show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="template" style="display:none;">
<span class ="mainText"></span>
</div>
</div>
Or, as J. Titus has suggested:
$main = $('#main');
for(var i=0;i<5;i++){
var template = document.getElementById('template').innerHTML;
var $template = $(template)
$template.find('.mainText').text('Template '+i)
$main.append($template);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="template" type="text/template">
<div>
<div class="test">
<span class="mainText">test</span>
</div>
</div>
</script>
<div id="main">
</div>
I want to get option like PCMB and PCMC in select option when I selected SCIENCE as a previous select tag and nothing when I selected Commerce.
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="Science">Science</option>
<option value="" id="Commerce">Commerce</option>
<option value="" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Branch<span class="astric">*</span></p>
<select class="Academic">
<option value="" id="Select">Select</option>
<option value="" id="PCMB">PCMB</option>
<option value="" id="PCMC">PCMC</option>
<option value="" id="PCMS">PCMS</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
You will have to make couple of changes to your code to achieve your desired result.
You should not include the second select box initially in DOM if you want to show it only after user select a specific value.
You will have to add values to your select Options
You Class or Id to your select boxes
Use Jquery .on('change') function to accomplish your desired result
Use the below code for further reference.
var selectLevelTwo = '<div class="col-md-4 col-sm-4 select-level-two"><p>Branch<span class="astric">*</span></p><select class="Academic"><option value="" id="Select">Select</option><option value="" id="PCMB">PCMB</option><option value="" id="PCMC">PCMC</option><option value="" id="PCMS">PCMS</option></select></div>';
$(document).on('change', '.select-level-one', function(){
var firstSelectValue = $('.select-level-one option:selected').val();
if(firstSelectValue == 'science'){
$(this).parent().after(selectLevelTwo);
} else {
$('.select-level-two').fadeOut('fast');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic select-level-one">
<option value="">Select</option>
<option value="science" id="Science">Science</option>
<option value="commerce" id="Commerce">Commerce</option>
<option value="arts" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
Hope this help