I have put together the following code that will unhide <div>s if "Override" is selected from the dropdown. The problem I am having is that to select Override, then select another reason, then select override again for it to work as intended.
My goal is to have it unhidden when it gets selected for the first time.
HTML:
<body>
<div class="main">
<div class="row">
<!-- Begin left side data entry -->
<form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
<div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
<div class="row">
<div class="cell">1. Reason for Interuption </div>
<label>
<select class="cell" id="Q1" onChange="showQuest(this.value); store_value('Q1',this.value);">
<option value=""></option>
<option value="Call">Call</option>
<option value="Argument">Argument</option>
<option value="Sleep">Sleep</option>
<option value="Override">Override</option>
</select>
</label>
</div>
<div class="row" id="hidden8" style="display:none">
<div class="cell" id="Q8" >8. If Override, Override Approved by </div>
<div class="cell"><input type="text" id="A8" /></div>
</div>
</div>
</form>
</div>
</div>
</body>
JavaScript I have put together:
//function to unhide questions if Override is selected
function showQuest(sel)
{
if (sel == 'Override')
{
document.getElementById('Q1').addEventListener('change', function () {
var style = this.value == 'Override' ? 'block' : 'none';
document.getElementById('hidden8').style.display = style;
document.getElementById('hidden9').style.display = style;
});
}
}
I am not receiving any error messages when I load it into a browser and the code acts the same when I have it in JSFiddle.
Any help would be greatly appreciated.
The first time you call showQuest, you just add the event listener, and it is called the second time. Take the addEventListener outside the function:
//function to unhide questions if Override is selected
document.getElementById('Q1').addEventListener('change', function() {
var style = this.value == 'Override' ? 'block' : 'none';
document.getElementById('hidden8').style.display = style;
});
<div class="main">
<div class="row">
<!-- Begin left side data entry -->
<form>
<!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
<div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
<div class="row">
<div class="cell">1. Reason for Interuption </div>
<select class="cell" id="Q1">
<option value=""></option>
<option value="Call">Call</option>
<option value="Argument">Argument</option>
<option value="Sleep">Sleep</option>
<option value="Override">Override</option>
</select>
</div>
<div class="row" id="hidden8" style="display:none">
<div class="cell" id="Q8">8. If Override, Override Approved by </div>
<div class="cell"><input type="text" id="A8" /></div>
</div>
</div>
</form>
</div>
</div>
Related
I have a list of persons in a bootstrap table and to delete a single person i am using a form in bootstrap modal. For deleting user needs to select some information for which i have a select box. On select value,different divs are shown. IF user selects married, then div with married_approval class should be show and if user selects Others then div with other class should be shown else both div should be hidden. I have tried this and it works fine for 1st user but for rest of the users show/hide is not working. Please help.
HTML
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="email">Reason</label>
<div class="col-sm-8">
<select name="i_deletereason" id="i_deletereason" class="form-select select" onchange="checkselect(this);">
<option value="Deceased">Deceased</option>
<option value="Married">Married</option>
<option value="Others" >Others</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group other" style="display: none;">
<textarea id="i_deletereason_other" name="i_deletereason_other" class="form-control" placeholder="Please Specify others" ></textarea>
</div>
</div>
</div>
<div class="row">
<div class="married_approval" align="center" style="display: none;">
<div class="col-sm-12">
<label class="control-label"><b>Married in same cast or other cast ?</b></label>
</div>
<div class="col-sm-12" align="center">
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="same_cast">Same Cast</label>
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="other_cast">Other Cast</labe>
</div>
</div>
</div>
JS:
<script type="text/javascript">
function checkselect(delSelect){
var selected_var = $(delSelect).val();
var other_text=document.getElementsByClassName("other");
var is_married = document.getElementsByClassName("married_approval");
console.log('selected_var: '+selected_var);
//return false;
switch(selected_var){
case 'Married':
{
console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='block';
break;
}
case 'Others':
{
console.log('var: '+selected_var);
other_text[0].style.display='block';
is_married[0].style.display='none';
break;
}
default:
{console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='none';
}
}
}
</script>
I have 2 modal at same page using select2. I need to remove title on hover select2 in modal select form. I have tried
$('.select2-selection__rendered').hover(function () {
$(this).removeAttr('title');
});
to remove the hover, but it only works in 1 modal. In the other modal at the same page, it still show hover title.
Here's the script modal 1
<div class="form-group" id="form-class-1" style="margin-top: -10px">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="class">Class *</label>
<div class="row">
<div class="col">
<select id="class" class="form-control" name="class" style="width: 100%">
<option value="" selected disabled>-- Choose Class --</option>
<?php
foreach ($class $c)
{
echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the script modal 2
<div class="form-group" id="form-class-2" style="margin-top: -10px">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="class">Class*</label>
<div class="row">
<div class="col">
<select id="clas" class="form-control" name="clas" style="width: 100%">
<option value="" selected disabled>-- Choose Class --</option>
<?php
foreach ($class $c)
{
echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Every help is appreciated.
With your JS condition it only select the modal where it's hover because of $(this)
$('.select2-selection__rendered').hover(function () {
$(this).removeAttr('title');
});
you should change it to $( class of modal1 and modal2 ).removeAttr('title');
also why the two modal have the same id in the same page id="form-kelas1"?
id should be unique per page.
I am building a weight converter with the help of bootstrap 4 and vanilla javascript. For the moment I managed to only transform pounds into everything else, not being able to select what to specifically transform to, just outputting everything right off the bat.
I also want to be able too choose from the units I am changing from and into. So far i have the values needed to change from pounds to everything else listed, and the same for kg.
Is there a way to display just a specific unit? For example, pounds to kg?
Is there a way to make this work?
Below are my html and js codes. Everything that is commented out of the js file is what i tried but didnt work out, and what remains is the functioning code, although incomplete/not doing what i want it to do.
<div class="container">
<div class="row">
<!-- <div class="col-md-3"></div> -->
<div class="col-md-6 offset-md-3">
<h1 class="display-4 text-center mb-3">
Weight Converter
</h1>
<form>
<div class="form-group">
<label>From</label>
<select class="form-control" id="weightSelector" function="elementSelect">
<option value="selectOption" disabled selected hidden>--- Please select ---</option>
<option value="tonne">Tonne</option>
<option value="kilogram">Kilogram</option>
<option value="gram">Gram</option>
<option value="milligram">Milligram</option>
<option value="ounces">Ounces</option>
<option value="stone">Stone</option>
<option value="pound">Pound</option>
</select>
</div>
</form>
<form>
<div class="form-group">
<label>to</label>
<select class="form-control" id="weightSelector" >
<option value="resultOption" disabled selected hidden>--- Please select ---</option>
<option value="tonne">Tonne</option>
<option value="kilogram">Kilogram</option>
<option value="gram">Gram</option>
<option value="milligram">Milligram</option>
<option value="ounces">Ounces</option>
<option value="stone">Stone</option>
<option value="pound">Pound</option>
</select>
</div>
</form>
<form>
<div class="form-group">
<input type="number" class="form-control form-control-lg" placeholder="Enter your value" id="weightInput">
</div>
</form>
<div id="output">
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>grams</h4>
<div id="gramsOutput"></div>
</div>
</div>
<div class="card bg-success mb-2">
<div class="card-body">
<h4>kg</h4>
<div id="kgOutput"></div>
</div>
</div>
<div class="card bg-danger mb-2">
<div class="card-body">
<h4>Ounces</h4>
<div id="ozOutput"></div>
</div>
</div>
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>Tonne</h4>
<div id="tOutput"></div>
</div>
</div>
<div class="card bg-success mb-2">
<div class="card-body">
<h4>miligrams</h4>
<div id="mgOutput"></div>
</div>
</div>
<div class="card bg-danger mb-2">
<div class="card-body">
<h4>Stone</h4>
<div id="stOutput"></div>
</div>
</div>
<div class="card bg-primary mb-2">
<div class="card-body">
<h4>Pound</h4>
<div id="lbsOutput"></div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3"></div> -->
</div>
</div>
document.getElementById('output').style.visibility='hidden';
// if i dont add the select forms and the functions to change to a
specific unit, it works, so basically this chunk of text
/*function elementSelect(){
var ddl=document.getElementById('weightSelector');
var selectedValue=ddl.options[ddl.selectedIndex].value;//this gets the
element that is selected
if(selectedValue=="pound"){
pound();
}
elseif(selectedValue=="kilogram"){
kg();
}
};
document.getElementById('weightSelector').addEventListener('click',elementSelect());*/
/*function pound(){
document.getElementById('weightInput').addEventListener('input',function(e){
document.getElementById('output').style.visibility='visible';
let lbs=e.target.value;
document.getElementById('gramsOutput').innerHTML=lbs/0.0022046;
document.getElementById('kgOutput').innerHTML=lbs/2.2046;
document.getElementById('ozOutput').innerHTML=lbs*16;
document.getElementById('mgOutput').innerHTML=lbs*453592.37;
document.getElementById('stOutput').innerHTML=lbs/14;
document.getElementById('tOutput').innerHTML=lbs/2204.623;
document.getElementById('lbsOutput').innerHTML=lbs;
})
}
function kg(){
document.getElementById('weightInput').addEventListener('input',function(e){
document.getElementById('output').style.visibility='visible';
let kg=e.target.value;
document.getElementById('gramsOutput').innerHTML=kg*1000;
document.getElementById('kgOutput').innerHTML=kg;
document.getElementById('ozOutput').innerHTML=kg*35.274;
document.getElementById('mgOutput').innerHTML=kg*1e+6;
document.getElementById('stOutput').innerHTML=kg/6.35;
document.getElementById('tOutput').innerHTML=kg/1000;
document.getElementById('lbsOutput').innerHTML=kg*2.205;
})
}
*/
Using The id Attribute
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Difference Between Class and ID
An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements [...]
https://www.w3schools.com/hTML/html_id.asp
Because of this, documentGetElementById() will always only return the first element in a page with the id passed. Do not work around that, but fix it.
screenshot2
screenshot1
I have 4 fields in a form
Product Field.
Brand Field.
Services Field.
I want to show them all in the index, but when i go to the product url i want to show only product field and services field
I have tried .show and hide method but it's hiding the field for all url
I am trying this method to hide and Now it's hiding as per my request but compromising in the form field, and I don't want that there's an empty blank space.
The issue was different and it fixed now what I did was I created a different id and call the particular id, without compromising the margin and all and it's working like charm now.
<div style="display:none;" class="appointment" id="booking-form-modal" data-backdrop="static" data-keyboard="false">
<form method="POST" action="/submit-request" onsubmit="submitRequest();">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="productDropdown" class="form-control" name="product" required>
<option value="">Select Products</option>
#foreach($products as $product)
<option value="{{ $product['id']}}">{{ $product['name']}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="serviceDropdown" class="form-control" name="services" required>
<option value="">Select Services</option>
</select>
</div>
</div>
</div>
</form>
</div>
Script to redirect as per the request
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('brandDropdown').style.display = 'none';
}
});
</script>
How does your url look like and when do you call the provided snippet?
Could you also provide a more detailed example of your code?
I guess you want to hide the elements "onload"?
If so, then you need to wait until your elements are loaded.
window.addEventListener('load', function() {
if(/repair/.test(window.location.href))
{
document.getElementById('brandDropdown').closest('.row').style.display = 'none';
}
});
The solution was, I added another id so that it didn't compromise my form fields, kindly find the solution below.
<div id="branddrop-row" class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
And here is the script for hiding as per the request. I call the div id instead of select id so that it didn't compromise my form fields.
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('branddrop-row').style.display = 'none';
}
});
</script>
When i run the code outside the model it work perfectly.But when i put it inside the modal, I cant search the items.
<div class="modal-body">
<form class="form-horizontal">
<div class="panel panel-success">
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txt_ShapeNote" class="col-sm-3 control-label">Bootstrap Select2 :</label>
<div class="col-sm-8">
<select class="form-control" id="select2" style="width: 300px; width: 100px">
<option value="1">Cats</option>
<option value="2">Dogs</option>
<option value="3">Fish</option>
<option value="4">Reptiles</option>
<option value="5">Equine</option>
<option value="6">Aviary</option>
<option value="7">Insects</option>
</select>
</div>
</div>
</div>
Im using this script and css
<link href="~/Content/Select2/css/select2.css" rel="stylesheet" />
<script src="~/Content/Select2/js/select2.js"></script>
in javascript
$('#select2').select2();
If you have a script creating your select box, you have to run that script once your modal has loaded. Assuming this is Bootstrap 3:
$('#modal-body').on('shown.bs.modal', function() {
$('.form-control').select2();
});
This is assuming you are running Bootstrap 3. You can see more about the shown event here: Bootstrap modal show event