Display div when specific option selected [duplicate] - javascript

This question already has answers here:
Want to show/hide div based on dropdown box selection
(7 answers)
Closed 4 years ago.
I want to show a DIV when a specific OPTION Value is selected. i have a html element like this.
<select id="type">
<option value="Article on Company">Article on Company</option>
<option value="Article on Company">Article by Company</option>
<option value="Concept Paper">Concept Paper</option>
</select>
And here is the following content
<div class="subdiv">
<div class="form-group mb-20">
<label>Title</label>
<input class="form-control" name="title">
</div>
<div class="form-group mb-20">
<label>Description</label>
<input class="form-control" name="description">
</div>
<div>
I want to hide the class subdiv when page load. If a user select the option "Article on Company" or "Article by Company" i want to show input fields with name 'title, description'. If a user select the option with value "Concept Paper", then i want to show only input field with name description. Please help me.

You can hide/show element based on the selected option value. Try the following way:
$('#type').change(function(){
$('.subdiv').show();
if($(this).val() == 'Article on Company' || $(this).val() == 'Article by Company'){
$('[name=title], [name=description]').parent().show();
}
else if($(this).val() == 'Concept Paper'){
$('[name=description]').parent().show();
$('[name=title]').parent().hide();
}
else
$('.subdiv').hide();
});
.subdiv{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
<option value="Select">---Select-</option>
<option value="Article on Company">Article on Company</option>
<option value="Article by Company">Article by Company</option>
<option value="Concept Paper">Concept Paper</option>
</select>
<div class="subdiv">
<div class="form-group mb-20">
<label>Title</label>
<input class="form-control" name="title">
</div>
<div class="form-group mb-20">
<label>Description</label>
<input class="form-control" name="description">
</div>
<div>

Related

How can I check if the type DATE is filled?

I have some questions.
I need to do an appointment form, where I have a bunch of text fields, for the name, email, a DATE field and two dropdown menus. At the end of the form, I have a submit button, but I want it to work only if all of the fields above are filled and if the fields are not filled i have an alert message. I did the verification for the name and email to see if the textboxes are empty or not, but I can't do it for the dropdown menus and the date. The date should be picked by the customer and if it's not picked from the menu I have the placeholder "DD.MM/YYYY".
For the dropdown menus I also have placeholders, and I wanna check if the customer has picked one of the options, how can I check if the value of it is the placeholder name that i set?
This is the code to check if the name and email fields are filled and it works. But I can't find any code to work to check if date is empty or the dropdown menus option is the same placeholder.
<script language="JavaScript1.1" type="text/javascript">
function popupok() {
ok = false;
test1=false;
const textbox1 = document.getElementById("name");
const textbox2 = document.getElementById("email");
if(textbox1.value.length && textbox2.value.length > 0)
{
ok=true;
}
if(ok==true)
{
alert("appointment has been scheduled!")
}
else
{
alert("please fill the required fields!")
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="well-block">
<div class="well-title">
<h2>Programeaza-te acum!</h2>
</div>
<form required>
<!-- Form start -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="name">Nume</label>
<input id="name" name="name" type="text" placeholder="Nume complet" class="form-control input-md"required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input id="email" name="email" type="text" placeholder="E-Mail" class="form-control input-md" required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="date">Data programarii</label>
<br/>
<input type="date" id="date" name="date" required>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="time">Ora programarii</label>
<select id="time" name="time" class="form-control" required>
<option value="8:00">8:00</option>
<option value="9:00">9:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option></option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="appointmentfor">Serviciul dorit</label>
<select id="appointmentfor" name="appointmentfor" class="form-control" required>
<option value="Service#1">Coafor</option>
<option value="Service#2">Cosmetica</option>
<option value="Service#3">Manichiura</option>
</select>
</div>
</div>
<!-- Button -->
<div class="col-md-12">
<br/>
<div class="form-group">
<button id="singlebutton" name="singlebutton" type="submit" onclick="popupok()">Rezerva locul!</button>
</div>
</div>
</div>
</form>```
You can -- the date seems to be an empty string, so you can simply do:
if (date) {
// date isn't an empty string, null, or undefined.
}
const input = document.getElementById("input");
console.log(`${input.value} (has value: ${!!input.value})`)
input.addEventListener("change", () => {
console.log(`${input.value} (has value: ${!!input.value})`)
})
<input type="date" id="input">
use:
const DROPDOWN = document.querySelector('.dropdown');
if(DROPDOWN.value === '') {
// do something if empty
}
if(DROPDOWN.value === 'option value') {
// do something
}
//every option has a value. in html you should specify it in tag by value = 'something';
to check if dropdown is chosen or not. although I don't know what kind of dropdown it is.
for date just do the same thing but like
if(DATE.innerHTML === "DD.MM/YYYY") { //your placeholder
// do something
}
or
if(DATE.value === "DD.MM/YYYY") { //your placeholder
// do something
}
if the user hasn't changed the date it would be same as your placeholder.
You have already used the "required" attribute in your fields which is a HTML5 attribute that forces the form not to be submitted if the field is empty, so you dont need additional JS code.
In case of select dropdowns you are missing an empty entry. Just add a first option in the dropdown with empty value and it will work. Do it like this:
<select name='myselect' id='myselect' required>
<option value=''>Please select</option>
<option value='1'>First option</option>
<option value='2'>Second option</option>
</select>
Its important to have the first option with an empty value. The first option always gets selected by default and the empty value there will trigger the validation.

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

What gets submitted to the database is just the entry of "other" and not what i typed in manually?

When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
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");
}
}
</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 name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks

Change form fields based on dropdown values

I have an HTML for in which I have dropdown at the beginning, How do I change the form fields base on selection of dropdown value?
Here is the code.
Like if I select General Inquiry it should display first 2 form fields and the form fields in general div
If I select Credit Inquiry it should display first 2 form fields and the form fields in credit div
if I select payment Inquiry it should display first 2 form fields and the form fields in payment div
<form action="">
<select name="cases" id="cases">
<option value="general">General Inquiry</option>
<option value="credit">Credit Inquiry</option>
<option value="payment">Payment Issue</option>
</select><br>
<label for="email">Email Address <span>*</span></label>
<input type="text">
<label for="full name">Full Name <span>*</span></label>
<input type="text">
<div class="general" id="general">
<label for="documents">Wish to submit any requested documents?</label>
<input type="radio" name="radio">Yes
<input type="radio" name="radio">No <br><br>
<label for="select">How did you find out about us?<span>*</span></label><br>
<select name="case" id="case-type">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select><br>
</div>
<div class="credit" id="credit">
<label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
<input type="date">
<label for="Agency">Agency 3 <span>*</span></label>
<input type="text">
</div>
<div class="payment" id="payment">
<label for="Service Phone Number">Service Phone Number<span>*</span></label>
<input type="text">
<label for="select">Topic<span>*</span></label><br>
<select name="case" id="case-type">
<option value="topic1">Topic 1</option>
<option value="topic2">Topic 2</option>
<option value="topic3">Topic 3</option>
</select><br><br>
</div>
<br><br>
<button>Submit</button>
</form>
Late to the party here, but here is another way
// hide all the divs
$('div').hide()
// Show and hide selected div
$('#cases').change(function () {
var value = this.value;
$('div').hide()
$('#' + this.value).show();
});
Also created a demo
I wrote for case "general"..U can follow this for other cases
$("#cases").change(function () {
var case = $( "#cases option:selected" ).val();
if(case=="general")
{
//show 2 form fields here and show div
$("#general").show();
}
});
Just hide all divs an show the corresponding one on select change if this is what you mean
$('div').hide()
$('#cases').change(function(){
var v=this.value;
$('div').hide().filter(function(){return this.id==v}).show()
});

How to show an entire div on select

I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>

Categories

Resources