I am having trouble applying the slidedown effect from jquery to display hidden div of form fields. I am trying to display each set of form fields if a specific value is selected from the select dropdown.
Script:
$(document).ready(function(){
$("#role").change(function(){
if ($("#role").val() == "student" ){
$(".hide1").slideDown("fast"); //Slide Down Effect
} else {
$(".hide1").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "faculty" ) {
$(".hide2").slideDown("fast"); //Slide Down Effect
} else {
$(".hide2").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "alumni" ) {
$(".hide3").slideDown("fast"); //Slide Down Effect
} else {
$(".hide3").slideUp("fast"); //Slide Up Effect
}});
});
HTML:
<form id="myform" class="form-control">
<select name = "role" class = "btn btn-primary" id ="role">:
<option>Role</option>
<option value = "student"> Student </option>
<option value = "faculty"> Faculty/Staff </option>
<option value = "alumni"> Alumni </option>
</select>
<br/><br/><br/><br/><br/><br/>
<div class="hide" id ="hide1">
<label for="address">Campus Address:</label>
<input type="text" id = "campadd" name="campadd" class= "form-control"/>
<label for="Major">Major:</label>
<input type="text" id = "major" name="major" class= "form-control"/>
</div>
<div class="hide" id = "hide2">
<label for="department">Department:</label>
<input type="text" id = "dept" name="dept" class= "form-control"/>
<label for="location">Location:</label>
<input type="text" id = "locations" name="location" class= "form-control"/>
</div>
<div class="hide" id ="hide3">
<label for="graduationdate">Graduation Year:</label>
<input type="text" id = "gradyear" name="gradyear" class= "form-control"/>
<label for="Major">Degree:</label>
<input type="text" id = "degree" name="degree" class= "form-control"/>
</div>
<br/>
</form>
You are using class selector instead of id selector in the slide up/down command
$(".hide2").slideDown("fast");
instead of
$("#hide2").slideDown("fast");
it can be shorten as
$(document).ready(function () {
var map = {
student : '#hide1',
faculty : '#hide2',
alumni : '#hide3',
}
$("#role").change(function () {
var target = $(map[this.value]);
$('.hide').not(target).stop(true, true).slideUp("fast");
target.stop(true, true).slideDown("fast");
});
});
Demo: Fiddle
Another way to look at this is: Fiddle
Related
My goal is to have a form on a woocommerce product page that when a certain attribute is checked then more options will show up.
More specifically. There is a question:
"How many additional dogs are you purchasing for?" and the if "one" is checked a text field with the label: "Second Dog's Name:" will appear. And if "two" is selected than "Second Dog's Name:" AND "Third Dog's Name:" will appear.
This is the code that I am working with and cannot really change the html structure because it is built with a wordpress plugin for extra product options in woocommerce.
I am able to get this close where when the fourth option is selected it does what I want and shows all three, but the first three options do nothing. But when I was writing each code, they would work until I wrote the next one.
$('.form-control').on('change', function () {
if(this.value === "option-1"){
$(".form-control-2_parent").show();
} else {
$(".form-control-2_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-2"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-3"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
$(".form-control-4_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
$(".form-control-4_parent").hide();
}
});
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="option-1">One Additional Dog</option>
<option value="option-2">Two Additional Dogs</option>
<option value="option-3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
I know what I am missing is probably very basic, but I am very new to writing javascript/jquery functions and complex conditional statements like this one.
Thanks in advance for any help you can give me!
Here's the solution:
// First store all out option's Elements on a list
var options = [
$(".form-control-2_parent"),
$(".form-control-3_parent"),
$(".form-control-4_parent")
]
// Create a function that hides all our options
function resetAll(){
options.forEach(function(option){
option.hide();
});
}
$('.form-control').on('change',
function (event)
{
// Get the option that was clicked
var target = $(event.currentTarget);
if(target.val())
{
// First Hide all our options, this will hide any open ones
resetAll();
// Just create a loop that shows the number of options based on the selected option
var i = 0;
while(i < target.val()){
options[i].show();
i++;
}
}
}
);
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="1">One Additional Dog</option>
<option value="2">Two Additional Dogs</option>
<option value="3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
I have this code :
<div class="st-form-line">
<span class="st-labeltext">Countries</span>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1"/> Selected</label>
<div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
<div style="padding:5px"></div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Excluded Countries</b></p>
<select size="10" name="excluded2" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])" multiple >
<?php foreach($arrayCountries as $country) {?>
<option value="<?= $country ?>" ><?= $country ?></option>
<?php } ?>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])">
</div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Selected Countries</b></p>
<select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])" multiple >
</select>
</div>
</div>
<div class="clear"></div>
</div>
This code look like this:
after i choose some countries from left side is adding me to right side, ok, that's good, but my problem is if is not selected as in this photo
is not adding in my database, and in this screnshoot it added only Canada and Germany that is selected and normally i want to add all countries that is added in right side.
This is js code:
<script type="text/javascript">
$(document).ready(function () {
if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
$('#clist_div').show('slow');
}
$('#members_create_campaign_form_countrySelectionType_0').click(function () {
$('#clist_div').hide('slow');
});
$('#members_create_campaign_form_countrySelectionType_1').click(function () {
$('#clist_div').show('slow');
});
function selectDiff(s1Id, s2Id) {
var selected = $('#' + s2Id + ' option').map(function(){
return this.value;
}).get()
var excluded = $('#' + s1Id + ' option').each(function() {
if (selected.indexOf(this.value) != -1) {
selected.splice(selected.indexOf(this.value), 1);
$(this).remove();
}
}).get()
};
selectDiff('clist_div', 'members_create_campaign_form_countries');
});
1st : you need to select the all option in selected countries on submit
2nd : simple add selected attribute in all option in selected countries
Note : consequently if your adding to selected countries and removing from selected countries means . option loose the selected attribute so you need to add the selected attribute on submit
$(document).on('submit','#submit_button',function(){
$('#members_create_campaign_form_countries option').prop('selected',true);
});
You can take the selected countries as array and keep pushing selected countries in to that.
For example:
var selected_countries=[];
//on select country
selected_countries.push('country selected');
use selected_countries array add to DB.
I am trying to change css of two divs on a change in a select tag when specific value is selected so can you please take a look over my code that what am I doing wrong?
$(document).ready(function() {
$('#ads_site').change(function() {
if ($(this).val() == 'boss.az') {
$("#boss.az").css("display", "block");
}
elseif($(this).val() == 'jobsearch.az') {
$("#jobsearch.az").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="process.php">
<select name="ads_site" id="ads_site">
<option value="boss.az">boss.az</option>
<option value="jobsearch.az">jobsearch.az</option>
</select>
<div id="boss.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_page" name="from_page" placeholder="From Page No">
<input type="text" class="to_page" name="to_page" placeholder="To Page No">
</div>
<div id="jobsearch.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_ad" name="from_page" placeholder="From Ad No">
<input type="text" class="to_ad" name="to_page" placeholder="To Ad No">
</div>
<input type="submit" name="submit" class="login login-submit" value="Submit">
</form>
There are 2 problems:
There is no elseif in JavaScript, you should use else if instead.
Since your IDs contain . you should escape them, otherwise jQuery tries to select an element that has boss ID and az class name.
$(document).ready(function () {
$('#ads_site').change(function () {
if ( this.value === 'boss.az' ) {
$("#boss\\.az").show();
// in case that you want to hide the other element
// $("#jobsearch\\.az").hide();
}
else if ( this.value === 'jobsearch.az' ) {
$("#jobsearch\\.az").show();
}
});
});
jQuery(function() {
var currentCount = 0;
jQuery('#addMoreEmail').click(function() {
currentCount = cloning('#MoreEmailDetails', '#MoreEmails', currentCount);
return false;
});
function cloning(from, to, counter) {
var clone = $(from).clone();
//console.log(clone);
counter++;
// Replace the input attributes:
clone.find(':input').each(function() {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val();
});
// Replace the label for attribute:
clone.find('label').each(function() {
var newFor = jQuery(this).attr('for').replace(0, counter);
jQuery(this).attr('for', newFor);
});
// Replace the text between html tags:
clone = clone.html().replace(1, counter);
jQuery(to).before(clone);
return counter;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MoreEmailDetails">
<div class="form-group users">
<input type="text" required="required" id="LeadEmailDetail0FirstName" value="" name="data[LeadEmailDetail][0][first_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<input type="text" id="LeadEmailDetail0LastName" value="" name="data[LeadEmailDetail][0][last_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<select id="LeadEmailDetail0CountryId" class="select-replace select2-offscreen" name="data[LeadEmailDetail][0][country_id]" tabindex="-1" title="Country">
<option value="">Choose a country</option>
<option value="2">SOUTHEASTERN EUROPE</option>
</select>
<label for="LeadEmailDetail0CountryId">Country</label>
<input type="checkbox" id="LeadEmailDetail0PrimaryEmail" value="1" name="data[LeadEmailDetail][0][primary_email]">
<label for="LeadEmailDetail0PrimaryEmail">Primary Email</label>
</div ">
</div">
<div id="MoreEmails"></div>
<input type="submit" value="Add More" id="addMoreEmail">
In above code input type text and checkbox working fine (adding dynamic fields after click add more) but i m getting below error in case select option
TypeError: jQuery(...).attr(...) is undefined
You need to add a null check for jQuery(this).attr('name')) . JSFIDDLE
Following is the modified JS code block.
clone.find(':input').each(function() {
if(jQuery(this).attr('name')) {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val(); }
});
Basically I created a jsp page . Here is the demo. When there was only 1 identifier type and identifier number, I can easily enable or disable the input field. But i happen to mess up with multiple field. How can i change classname of input type checkbox so that when i check individual identifier number, input field will be enabled/disabled?
My Code Here
JS
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$('<div/>', {
'class' : 'extraPerson'+counter, 'id': 'extraPerson'+counter,html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
counter++;
});
$('#removeRow').click(function () {
if(counter==0){
alert("No more textbox to remove");
return false;
}
counter--;
$("#extraPerson"+counter).remove();
//$("#Identification-Type"+counter).remove();
//$("#Identification-Number"+counter).remove();
});
function GetHtml()
{
// var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[id=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[name=Identification-Type]')[0].name="Identification-Type" + counter;
// $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter;
return $html.html();
}
HTML
<form name="pancettaForm" method="post"
action="demor" id="pancettaForm">
<ul>
<li><label for="PartyChoose">Choose Appropriate Party:</label></li>
<br>
<input id="person" name="PartyChoose" type="radio"
value="update-person" class="required" /> Person
<br />
<input id="organization" name="PartyChoose" type="radio"
value="update-organization" class="required" /> Organization
<br />
<li id="Family-Name" style="display: none;">
<input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
<label for="Family-Name"><em>*</em>Family Name:</label> <input type="text" name="Family-Name" class="required"></li>
<li id="Organization-Name" style="display: none;">
<input type="checkbox" class="Organization-Name" value="Organization-name" name="Organization-name">
<label for="Organization-Name"><em>*</em>Organization Name:</label> <input type="text" name="Organization-Name" class="required"></li>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<li id="Identification-Type" style="display: none;">Identification Type:
<select name="Identification-Type" class="Identification-Type"><label for="Identification-Type">Identification Type:</label>
<option value="0">--Select--</option>
</select>
<li id="Identification-Number" style="display: none;"><input type="checkbox" class="Identification-Number" value="Identification-Number"
name="Identification-number" id="Identification-Number"><label for="Identification-Number"><em>*</em>Identification Number:</label>
<input type="text" name="Identification-Number" >
</li></li>
</div>
<a href="#" id="addRow" style="display: none;"><i class="icon-plus-sign icon-white">
Add Identifier
Remove IdentifierAdmin System Type:
Admin Type:--Select--
*Admin System Value:
To change an attribute of a jQuery object :
$('.selector').attr('name', value);
So, in your case :
$html.find('[name=Identification-Number]').attr('name', 'Identification-Number' + counter);
You will have another issue in the identification number's checkbox event, change this :
$('.Identification-Number').click(function() {
if ($('.Identification-Number').is(':checked')) {
// ...
}
// ...
});
to this :
$('#pancettaForm').on('change', '.Identification-Number', function () {
var $this = $(this);
var $input = $this.siblings('input[type=text]');
if ($this.is(':checked')) {
$input.val('').attr('disabled', false);
}
else {
$input.attr('disabled', true);
}
});
You won't need to change the name attribute or something else with this code, because it looks for input[type=text] on the same level.
See http://api.jquery.com/siblings/ for more infos.
jsfiddle : http://jsfiddle.net/FyRy8/2/