I'm working on a new website based on CodeIgniter. I'm trying to hide some elements to my form depending on an input value, but the field doesn't hide but stays disabled.
Here's the code I have :
HTML :
<div class="clearfix">
<label for="form-timezone" class="form-label">Filters<small>Options</small></label>
<div class="form-input">
<?php
echo form_dropdown('filter', $filters,'', 'id="form-timezone"');
echo form_dropdown('city', $cities, '', 'id="city"');
echo form_dropdown('country', $countries, '', 'id="country"');
?>
</div>
</div>
Which basically gives something like :
<div class="clearfix">
<div class="form-input">
<select name="filter" id="form-timezone">
<option value="city">City</option>
<option value="country">Country</option>
</select>
<select name="cities" id="city">
<option value="Paris">Paris</option>
<option value="London">London</option>
</select>
<select name="countries" id="country">
<option value="fr">France</option>
<option value="en">England</option>
</select>
</div>
</div>
JS :
$(function() {
$("#city").hide();
$("#country").hide();
$("#form-timezone").change(function() {
if ( $("#form-timezone").val() == "city"){
$("#city").show();
$("#country").hide();
}
else if ( $("#form-timezone").val() == "country"){
$("#city").hide();
$("#country").show();
}
});
});
I tried to add an <input> field to my html, and to hide it in the js, and it worked well. I don't know why, but it seems that only the form_dropdown doesn't hide...
Do someone has an idea of what I'm doing wrong please ?
Thanks.
I don't know what you mean by not working. But your code can be a lot simpler with no if statements.
$("#form-timezone").change(function() {
var el = $('#' + $(this).val()); // <-- store matched element
el.show(); // <-- show matched element
$("#country,#city").not(el).hide(); // <-- hide unmatched element
});
And they work fine in this fiddle (they hide and not disable) - tested in Firefox/Chrome/IE9
http://jsfiddle.net/5LNWr/1/
It works for me in this fiddle.
The Javascript code you posted was missing a closing }); after the DOM ready handler. I've assumed the output is a <select> element for each PHP echo statement.
You mention that the form field "stays disabled." Does this mean they're disabled to begin with? Disabled form elements don't capture events in all browsers (Firefox).
If that isn't the case, can you provide a jsfiddle?
<div class="clearfix">
<div class="form-input">
<select name="filter" id="form-timezone">
<option value="city">City</option>
<option value="country">Country</option>
</select>
<!-- Here a select foreach city and country -->
</div>
</div>
See how there is no id's for City and Country? You cannot select on ID's here.
$("#city").show();
$("#country").hide();
Won't work. Maybe try
var $firstOption= $(“#form-timezone option:first”)
Related
Just having a little trouble with part of my code.
Basically new elements are added into the page through .html() and ajax response. An example of added elements are commented in the code. Because the codes were added into the page through .html the form wasn't submitting the added fields. So I used .append($('.newfields') which works perfectly on the checkbox but fails on the select box which is the purpose of this question.
Any way to include the new select boxes on form submit?
Thank you all in advance for you help!
$('.button').click(function(){
$('#domaincheckform').append($('.newfields'));
$( "#domaincheckform" ).submit();
});
<form action="cart.php" id="domaincheckform" method="post">
<select form="domaincheckform" name="termselect[]">
<option value="1">1 year</option>
<option value="2">2 year</option>
</select>
<input type="checkbox" name="did[]" value="example1">
<!--EXAMPLE ADDED FIELD-->
<select form="domaincheckform" class="newfields" name="termselect[]">
<option value="1">1 year</option>
<option value="2">2 year</option>
</select>
<input type="checkbox" class="newfields" name="did[]" value="example2">
<!--END OF EXAMPLE ADDED FIELD-->
<span class="button">Button</span>
</form>
You need to wrap your select inside a div
try this
<form action="cart.php" id="domaincheckform" method="post">
<select form="domaincheckform" name="termselect[]">
<option value="1">1 year</option>
<option value="2">2 year</option>
</select>
<input type="checkbox" name="did[]" value="example1">
<!--EXAMPLE ADDED FIELD-->
<div class="append_content"><select form="domaincheckform" class="newfields" name="termselect[]">
<option value="1">1 year</option>
<option value="2">2 year</option>
</select> </div>
<input type="checkbox" class="newfields" name="did[]" value="example2">
<!--END OF EXAMPLE ADDED FIELD-->
<span class="button">Button</span>
</form>
Also make changes in your js like this
<script>
$(document).ready(function() {
$('.button').click(function(){
$('#domaincheckform').append($('.append_content').html());
$( "#domaincheckform" ).submit();
});
});
</script>
now the select is inside a div append_content its easy to fetch its content as select has multiple html content so it will return object if you use only selector name $(".newfields")
$(selector).click(function(){}) sometimes fails to work. Try using $(selector).on("click", function(){})
It worked here: https://jsbin.com/vemuxukehi/edit?html,js,output
Heres is a simple working example that adds the and displays it in the submitted form data
https://jsfiddle.net/uapejgu5/
$(function () {
$("#submit").click(function () {
$("#result").html($('#myform').serialize())
return false
})
$("#add").click(function () {
var select = $("<select>", {
name: "newSelect"
})
$(select).append($("<option>", {
text: "myNewOption",
value: "myNewValue"
}))
$("#myform").append(select)
})
})
Check out this fiddle:
https://jsfiddle.net/bbdkr9g5/1/
Basically what you wrote, plus some code to print out the form result in the console. And you had the same name attributes on both your static and your dynamically-inserted elements, which is probably not what you wanted.
You should clone the elements and remove the newfields class before adding them to the form.
$('.button').click(function(){
$('#domaincheckform').append($('.newfields').clone().removeClass('newfields'));
$('#domaincheckform').submit();
});
Here is a JSFiddle example that skips the actual submit: JSFiddle
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
So I'm trying to make an interactive form where the value of one dropdown affects the content of another drop down. I have seen some similar question on SO, and I decided to take the best from all answers. Anyway I'm stuck at the last part and can't seem to figure out why it wont work.
The form:
<div class="form-group">
<label class="col-lg-2 control-label">Dienst</label>
<div class="col-lg-2">
<select id="dienst" name="dienst" class="form-control">
<option value"" disable selected> </option>
<option value="Psychiatrie">Psychiatrie</option>
<option value="Oncologie">Oncologie</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Ziekte</label>
<div class="col-lg-2">
<select name="ziekte" class="form-control">
<option value"" disable selected> </option>
<option class="Psychiatrie_select" value"" >Jong Dementie</option>
<option class="Psychiatrie_select" value"" >Neuropsychiatrische stoornissen</option>
<option class="Oncologie_select" value"" >Other</option>
</select>
</div>
</div>
The JS code
$('select#dienst').on('change', function() {
event.preventDefault();
var dienst = $('[name="dienst"]').val();
if(dienst == "Psychiatrie"){
document.getElementsByClassName(Psychiatrie_select).style.display = 'block';
}
});
The logic behind it:
I first get the value of the first drop down list ( id = dienst ) and based on that I want to change the display value of the options of the second drop down ( where class is Psychiatrie_select )
I have also debugged by console.log(dienst) and that shows that the selection of the first drop down menu is stored in dienst. What could be wrong because my css display attribute doesn't seem to change.
I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)
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.