Ad
Remove Div When Option Value Unselected
whats wrong with this?
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue === nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
There is two options one named FLIGHT and The other is REGION
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Type:</strong>
{!! Form::select('type', \App\Destination::getEnum('type'),\App\Destination::getEnum('type'), array('onchange' => "admSelectCheck(this);", 'id' => "admOption")) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group" id="admDivCheck" style="display:none;">
<strong>Flights:</strong>
{!! Form::text('flights_data', null, array('class' => 'form-control')) !!}
</div>
</div>
when I select FLIGHT the input field Flights appears but when I select REGION the input field Flights still appearing. I want it to disappear after I select REGION.
please help.
Ad
Answer
You need to change this one because it always return true:
if(admOptionValue === nameSelect.value){
to this one:
if (admOptionValue === "FLIGHT") {
The problem was that nameSelect.value
is identical to document.getElementById("admOption").value
because the nameSelect variable actually points to the same element and this is done by calling the javascript function with the this
reference.
Sample:
function admSelectCheck(nameSelect) {
if (nameSelect) {
admOptionValue = document.getElementById("admOption").value;
if (admOptionValue === "FLIGHT") {
document.getElementById("admDivCheck").style.display = "block";
} else {
document.getElementById("admDivCheck").style.display = "none";
}
} else {
document.getElementById("admDivCheck").style.display = "none";
}
}
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Type:</strong>
<select id="admOption" onchange="admSelectCheck(this);">
<option>REGION</option>
<option>FLIGHT</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group" id="admDivCheck" style="display:none;">
<strong>Flights:</strong>
<input type="text" class="form-control" value="flights data" />
</div>
</div>
In your case, you have to add the flights' condition to the if statement to show the required text field if the FLIGHTS
option was selected.
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad