We Keep Coding

Hiding a search container through escape button

I did this function to hide search container by escaping button but there is a problem.
.spr-container .sprsearch-form and ico search is hiding automatically after pressing the escape button.
How to make it still active without hiding again?
CODE :
$(document).keyup(function(event) {
if (event.keyCode == 27) {
$('#sp_search_pro_1').slideToggle('fast');
$('#spr-container').slideToggle();
$('#sp_searchpro').slideToggle();
$('#top1e_content_result').slideToggle();
$('#suggest-list').slideToggle();
if($('.spr-container .sprsearch-form').hasClass('active_form')) {
$('.spr-container .sprsearch-form').removeClass('active_form');
}
}
else {
$('.spr-container .sprsearch-form').addClass('active_form');
}
if ($('.icon-search').hasClass('active')) {
$('.icon-search').removeClass('active');
}
else {
$('.icon-search').addClass('active');
}
});

In your if conditions your removing classes. Only. Using hide show respectively withing the conditions
Where the is add class. Chain hide or show methods
$('.spr-container .sprsearch-form').addClass('active_form').show();
Where there is remove class
.hide()
assuming you don't have a display none on elements without a class

I solved it with another way to make it direct for hide the search button.
$(document).keyup(function(event) {
if (event.keyCode == 27) {
if($('.spr-container .sprsearch-form').hasClass('active_form')){
$('.spr-container .sprsearch-form').removeClass('active_form');
}
if($('.icon-search').hasClass('active')){
$('.icon-search').removeClass('active');
}
});

Radio button values not saved when form reloads jQuery

I'm working on a way to show and hide a form with some help of jQuery and radio buttons. The show and hide part is working. In my form there is a question if i will attend the party. When clicked on the radio button yes, i can see all the personal detail fields i have to fill in ( Name, Address etc...), when i click no, all these fields are hidden.
Now when the form gets reloaded, it seems my jQuery doesn't save the value of the radio button and the personal fields will be shown, regardless yes or no. What can i change in the code so when the form gets reloaded, i keep the radio button option i selected?
I have created a fiddle to simulate the problem: https://jsfiddle.net/eo9ydcbn/2/
accepted = $('input[name*="accepted"]');
accepted.change( function() {
var input_accepted = $('input[name*="accepted"]:checked').val();
console.log(input_accepted);
if ( input_accepted == '0' ) {
$('#registerForm').collapse('hide');
}
else
{
$('#registerForm').collapse('show');
}
}).trigger('change');
All the help is greatly appreciated!

this fiddle will help you, you will see hoe to make a change based on radio: https://jsfiddle.net/maky/pahrthy0/
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
}
if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
}
if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
}
});
});

I figured it out,
Instead of using .collapse to show and hide the form, i used .show and .hide.
Now it keeps my radio button settings
accepted = $('input[name*="accepted"]');
accepted.change( function() {
var input_accepted = $('input[name*="accepted"]:checked').val();
console.log(input_accepted);
if ( input_accepted == '0' ) {
$('#registerForm').hide('slow');
}
else
{
$('#registerForm').show('slow');
}
}).trigger('change');

find select option with selected property using javascript

I have a view that loads select elements dynamically into the page on certain button clicks. Each of these selects have the same id value followed with an index value based on how many times the button is clicked. so the id would be like
id="my_id_" + numOfClicks;
I have also given all these selectors the same class value
class="selects"
What is the best way to have an event handler for when the selected option changes in any of the drop downs. right now I have the following:
$('.selects').change(function() {
if($('this option:selected').val() == 0) {
}
else {
}
});
So what I'm trying to do is first get the right select element using "this" then figure out which of the options are selected. Is there a better/more efficient way to do this?

As you say these get added at runtime, you'll want a delegated event handler. Within the handler, as the comments have pointed out, it's just $(this).val() to get the selected value of that select box. So:
$("selector for some container they're in").on("change", ".selects", function() {
if($(this).val() == 0) {
}
else {
}
});
For instance, if they're all inside an element with the class container, then:
$(".container").on("change", ".selects", function() {
if($(this).val() == 0) {
}
else {
}
});
If there's no other suitable container, you can just use $(document).on(..., but usually it's better to handle things a bit closer to where they are than that.
Side note: Values are always strings, but == will coerce, so "0" == 0 is true. Still, it's useful to remember that they're strings.

Assuming html input.selects:
$('body').on('change', '.selects', function() {
if($(this).val() == '0') {
}
else {
}
});
http://jsfiddle.net/r4pxx0yy/1/
No quote around this.

How to control check element from jquery dropdown button

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?

Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

jQuery - Clear form field with .change event

I am using the following jQuery code to switch div displays based on a change event tied to 3 radio buttons:
(function ($) {
Drupal.behaviors.change_form_fields = {
attach: function(context, settings) {
$('div.form-item-payment-method input').each(function() {
if (this.value != 'existing-bill') {
$('div#' + this.value).css('display', 'none');
}
});
$('div.form-item-payment-method input').change(function() {
show_class = this.value;
$('div.form-item-payment-method input').each(function() {
if (this.value != show_class) {
$('input#edit-' + this.value).val('');
$('div#' + this.value).css('display', 'none');
} else {
$('div#' + this.value).css('display', 'block');
}
});
});
}
}
}(jQuery));
This works fine and dandy, but I want to add some more to it.
If a user selects a radio button, I want to blank/clear out the form fields in the other groups. Like the onload (.each), they have divs around the display content.
I tried using .attr and .val, but the form fields would not clear when selecting another radio button. What am I missing? jQuery 1.4x+

val('') should do the trick, so there must be some other issue with either the selector, or the code not being run.

Use the radio buttons change event that should help you.
$("input[type=radio][name=groupname]").change(function(){
//Code the clear the form fields or other logic here.
});