I am trying to choose yes value in this dropdown, so I can show another input field to add discount.
I am trying but nothing is showing. Can you please help me?
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
Your condition statement has issues. Use document.getElementById('is_offer').value === 'yes' (triple-equals)
function myFunction()
{
if (document.getElementById('is_offer').value === 'yes')
{
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div></div></div>';
}
}
and change onclick with onChange.
Use .innerHTML to set the div not innerText. innerText assumes all your html data is text and adds it like a text. ,For the yes condition, = is used for assignment but we have to compare so == is used. And call the function on onchange event not on click of the select tag
function myFunction()
{
if( document.getElementById('is_offer').value=='yes')
{
document.getElementById('offer').innerHTML='<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
else
document.getElementById('offer').innerHTML=''
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onChange="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
You had 3 issues should be changed.
If you want to listen the change of input, you shoule use onchange instead of onclick.
In if condition you use assigning variables instead of comparison (use == or ===).
It seems you would like to change HTML content. So you should use innerHTML instead of innerText.
After fixing all of them we have code like this:
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value === 'yes') {
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>
Prefer to use the onchange event on the select tag. Also, you should use === to compare the value with yes or no, not just = whish is an assignment.
By using a template and cloning it, you don't have to mix your JavaScript with HTML code, you just have to fetch the template, clone it and append it to your div.
Do not query the document to find your select in your handler, you have access to it via the event.target object, which you get access to as argument to your handler.
Also, don't forget to erase the discount when you select no.
function onSelect(event) {
const offer = document.getElementById('offer');
offer.innerHTML = '';
if (event.target.value === 'yes') {
const tpl = document.getElementById('discount-tpl');
const clone = document.importNode(tpl.content, true);
offer.appendChild(clone);
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="onSelect(event)" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<template id="discount-tpl">
<div class="form-group m-form__group row">
<label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label>
<div class="col-xl-9 col-lg-9">
<div id="asd"></div>
</div>
</div>
</template>
Related
First of all this question might be noob because i only have basic in JS.
The question is, i already create Category data in Thrust's page which only have 4IR and DEB. Which mean in Thrust DB, it have category_id.
So in this page, when i select Thrust, it should show Category that link with Thrust.
But for this case, when i select Thrust, the Category does not appear. Am i doing something wrong here? Im so lost right now
$("#pilih1").change(function() {
var thrus_id = $(this).val();
var thrusts = #json($thrusts->toArray());
$("#pilih2").html(``);
thrusts.forEach(thrust => {
console.log(thrusts);
if (thrust.thrus_id == thrus_id) {
$("#pilih2").append(`
<option value="` + thrust.id + `">` + thrust.category + `</option>
`);
}
});
});
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="namaStrategy">Strategy Name</label>
<div class="col-sm-10" style="width:30%">
<input class="form-control" type="text" name="namaStrategy" />
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="thrus_id">Thrust</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="thrus_id" id="pilih1">
<option selected disabled hidden>PLEASE CHOOSE</option>
#foreach ($thrusts as $thrust)
<option value="{{ $thrust->id }}">{{ $thrust->namaThrust }}</option>
#endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="">Category</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="category" id="pilih2">
<option selected disabled hidden>PLEASE CHOOSE</option>
<option value="DEB">DEB</option>
<option value="4IR">4IR</option>
</select>
</div>
</div>
I want the value in the input text to be null after the hide process
This is my view :
<div class="form-group row">
<label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
<div class="col-sm-8">
<select id="status" name="status" class="form-control form-control-sm" required>
<option value="" selected>Pilih Status Karyawan</option>
<option value="Kontrak">Kontrak</option>
<option value="Tetap">Tetap</option>
</select>
</div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
<label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
<div class="col-sm-8 input-group">
<input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
</div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak" style="display:none">
<label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
<div class="col-sm-8 input-group">
<input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
</div>
</div>
And than, this is my script:
<script>
$(function () {
$("#status").change(function() {
var val = $(this).val();
if(val === "Kontrak") {
$("#tgl_berakhir_kontrak").show();
$("#tgl_pengangkatan").hide();
$("#tgl_pengangkatan").val('');
}
else if (val === "Tetap") {
$("#tgl_pengangkatan").show();
$("#tgl_berakhir_kontrak").hide();
$("#tgl_berakhir_kontrak").val('');
}
});
});
I want to make it like that to minimize errors in the input process, thanks.
The element you are trying to change should be called with its name, not the id. Try changing it as:
$('[name="tgl_berakhir_kontrak"]').val('');
By the way, it's not a good practice to give identical name and id to separate elements on the same page.
I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
I want to hide this one,
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
and then when I selected yes on the first dropdown, it will show the second dropdown. how can I do this ?
what i did is
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
<div class="solop box-body" style="display:none" id = "Yes">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
then my javascript is
$(function() {
$('#LEAVE_ENTITLED').change(function(){
$('.solop').hide();
$('#' + $(this).val()).show();
});
});
By default, hide the second drop down on page load.
Then check the first drop down value to be 'Yes' and remove hide class for second drop down.
$('#LEAVE_ENTITLED').on('change', function() {
var $this = $(this),
$dropdown2 = $('#ddlSecond');
if ($this.val() == 'Yes') {
$dropdown2.removeClass('hide');
} else {
$dropdown2.addClass('hide');
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name="LEAVE_ENTITLED" id="LEAVE_ENTITLED">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
<div class="box-body hide" id="ddlSecond">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?
<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name="SOLO_P">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
I've 3 list box like this one with a different id and name:
<div class="col-md-4 column">
<div class="form-group">
<input type="hidden" name="identityCardList[0].identityCardId">
<label for="identityCardType1" class="col-sm-3 control-label">Type</label>
<div class="col-sm-9">
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
</div>
</div>
<div class="form-group">
<label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>
<div class="col-sm-9">
<div class="input-group date" id="expirationDateCardPicker1">
<input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
</div>
</div>
</div>
</div>
<div class="col-md-4 column">
...
</div>
<div class="col-md-4 column">
...
</div>
In the list box, I've this kind of value:
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
<option value=""></option>
<option value="1" data-card-expiration="false">Certificat de naissance</option>
<option value="2" data-card-expiration="false">N.A.S</option>
<option value="3" data-card-expiration="true">N.A.M</option>
</select>
When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.
This is my generic attempt:
$("select[id^='identityCardType']").on('change', 'select', function (e){
debugger;
if($(e.target).data("data-card-expiration")){
//disabled the nearest component expirationDateCard after this select
}
});
Why does the change event never occur?
You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.
$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select'
});
Try this easy code
$("select#identityCardType1").on('change', function (e){
if($(this).data("cardexpiration")){
//disabled the nearest component expirationDateCard after this select
}
});
I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>
You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle
Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});
You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>
using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>