Javascript jQuery Hide Form Items Based on Select Item - javascript

I am trying to make a form in which when someone selects "Other" as their title, they get a box appear to input the title. The first part of my script works in order to make the div hidden to begin with but I can't quite get the second part to work in which selecting "Other" makes a text box appear.
Any help would be appreciated.
Here is my HTML:
<div>
<label for="title" class="label">Title</label>
<select name="title" id="title">
<option></option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss.</option>
<option value="ms">Ms.</option>
<option value="dr">Dr.</option>
<option value="lady">Lady.</option>
<option value="rev">Rev.</option>
<option value="sir">Sir.</option>
<option value="other">Other</option>
</select>
<input name="other_title" style="margin-left:10px;" type="text" id="other_title" size="10">
</div>
Here is my Javascript/jQuery:
<script>
jQuery(function( $ ) {
$('#other_title').hide('fast');
$(function() {
if ($('#title option:selected').text() == 'other') {
$('#other_title').show('fast');
}
}); // end function
});
</script>

Would this be of any help?
$('#title').on('change', function() {
if ($(this).val() == 'other') $('#other_title').show('fast');
else $('#other_title').hide('fast'); // This too?
});
Edit: Fixed syntax error. :p

Try using change event and replacing
if ($('#title option:selected').text() == 'other')
with
if ($('#title>option:selected').text() == 'other')
You can refer the plunkr for reference:
https://plnkr.co/edit/R2w25NEwUbiw00r2lEs3

Related

Change ReadOnly Input Value on <select> option change

I want to display the value in a "select > option" in an based on the location selected from my tag.
Here is the html:
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
And here is the javascript:
$(document).ready(function() {
$("#stateCoord option").filter(function() {
return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);
$("#stateCoord").live("change", function() {
$("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});
I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.
If I assume correctly, you want this:
1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.
2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() (deprecated) part was trying to do.
$(document).ready(function()
{
$("#stateCoord").val("").change();
$("#stateCoord").change(function()
{
$("#stateCoordInfo").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord">
<option value="" selected>SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">
$(document).ready(function() {
$("body").on("change","#stateCoord",function() {
$("#stateCoordInfo").val($(this).find("option:selected").val());
});
$("#stateCoord").trigger("change");
});
From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.
To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.
$(document).ready(function() {
$('#stateCoord').change(function(e) {
$('#stateCoordInfo').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
I am not sure, if this is what you need, but I think it should be: JSfiddle
Here is the JS code:
$(document).ready(function() {
$("#stateCoord").change(function() {
var value = $("#stateCoord option:selected").text();
$("#stateCoordInfo").val(value);
});
});

Hide submit button if selected option value is null

I have the following form:
var x = document.getElementById("submit-button");
if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option disabled selected>Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.
Any help will be appreciated.
You are in the right way. But missing some points with events:
1 - The whole code must be executed when DOM is ready (document loaded)
2 - You must observe the select change event to check for changes
3 - You can use jQuery .hide() and .show() do control the element's visibility
// Executed when DOM is loaded
$(document).ready(function() {
// Executed when select is changed
$("select").on('change',function() {
var x = this.selectedIndex;
if (x == "") {
$("#submit-button").hide();
} else {
$("#submit-button").show();
}
});
// It must not be visible at first time
$("#submit-button").css("display","none");
});
Look this working fiddle
The shortest way would be
$(function(){
$("select").on("change", function(){
$("#submit-button").toggle(!!this.value);
}).change();
});
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.
I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.
$("#submit-button").hide();
$("select").on("change", function() {
if (this.value)
$("#submit-button").show();
else
$("#submit-button").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You should add a listener to your select like this:
$('form select').on('change', function(){
if($(this).val() == null){
$("#submit-button").hide();
}else{
$("#submit-button").show();
}
}).change();
It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.
Hi there Kindly try the following solution and tell me if you wanted something like this :
$(document).ready(function(){
if($('select').val() == null){
$('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});

Change style of select box when Other select box change in html

I am trying to change the CSS property of select box when other select box is change.
When Id=project-type , is changes its value than bgt-hourly and bgt-fixed select box show show accordingly.
if hourly selected than bgt-hourly should show and when it select Fixed than bgt-fixed select options should show.
i tried many time with different codes from stack-overflow but it didn't help me well.
if any one can solve this than I appreciate his/her help.
thanks
I have following Code:
HTML:
<span class="service-tab">
<span class="sub-cat span6">
<label for="project-type">Project Type:</label>
<select class="project-type " id="project-type" >
<option value="hourly">Hourly</option>
<option value="fixed">Fixed</option>
</select>
</span>
<span class="sub-cat span6 " id="bgt-fixed">
<label for="budget">Budget:</label>
<select class="budget " id="budget" required >
<option value="250">$0 - $250</option>
<option value="750">$250 - $750</option>
<option value="5000">$750 - $5000</option>
<option value="5000">$1500 - $5000</option>
<option value="5000">$3000 - $5000</option>
<option value="10000">$5000 - $10000</option>
<option value="10001">$10000 and Above</option>
</select>
</span>
<span class="sub-cat span6" id="bgt-hourly">
<label for="budget-hourly">Budget:</label>
<select class="budget-hourly" id="budget-hourly" required>
<option value="10">$0 - $10</option>
<option value="20">$10 - $20</option>
<option value="50">$20 - $50</option>
<option value="100">$50 - $100</option>
<option value="200">$100 - $200</option>
</select>
</span>
</span>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
}
});
if($(this).val() == "hourly")
{
alert('value 1 (wich refers to Chef) got selected');
}
});
});
Error: you have placed if($(this).val() == "hourly") outside change function.
Try:
$(document).ready(function () {
$("#project-type").change(function () {
if ($('#project-type').val() == "fixed") {
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
} else if ($(this).val() == "hourly") {
alert('value 1 (wich refers to Chef) got selected');
}
});
});
DEMO
Try this:
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
$('#bgt-hourly').hide();
$('#project-time').hide();
$('#project-hours').hide();
}
else if($(this).val() == "hourly")
{
$('#bgt-hourly').show();
$('#bgt-fixed').hide();
$('#project-time').show();
$('#project-hours').show();
}
});
});
must not set class or id same for best code practises
$("#project-type").change(function(){}
this should be
$(".project-type").change(function(){}
and
<select class="project-type" id="projects" >
eliminate extra spaces
$(".project-type").change(function(){...}

How to hide and show a div when click on text box using jQuery

How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
Here: http://jsfiddle.net/Kq9pX/
JS
Do it on load: Wrap around document.ready function.
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
<option value="All">All</option>
Must be cleared:
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
Use jQuery:
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.

jQuery: Show/Hide Elements based on Selected Option from Dropdown

UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.

Categories