Develop Reference

How to hide HTML5 dividers when if at least 1 selected item has a custom attribute?

I have a form with multiple HTML checkboxes. I want to hide some dividers only if at least one checked checkbox have a custom HTML5 attribute called "terminator". Otherwise I would want to show the dividers.
I tried to accomplish this by using the change() event to check if one has the terminator attribute.
Here is what I have done.
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
//Hide all groups that have the class equal to className
if( $(this).is(':checked') ){
if( $(this).data('terminator') ){
hideControls($(this), existingElements, className);
}
} else {
showControls(existingElements, className);
}
}).change();
The function hideControls will hide the desire inputs. The function showControls will display the desired inputs if any are hidden.
My code kinda works, but has one problem that I can't figure out a solution to. The problem happens after checking a box that has the terminator attribute and checking a box that does NOT have the terminator attribute, and then "un-checking" a box that does NOT have the terminator attribute.
When first checking the box with the terminator attribute the dividers hide as expected.
Then when un-checking a box that does not have a terminator attribute it shows dividers that should be hidden with appear since I still have 1 checked box with the terminator attribute.
How can I fix this problem?
I created this jFiddle to show the code and the problem in action. You can re-create the problem by jumping into the "1:b) More Questions" section on the jFiddle, then check the "Red" box and then the "Green - Terminator" box, and finally unchecking the "Red" box. You will see how the dividers below will appear where they should be hidden since "Green - terminator" is still checked"

You should be checking for the "checked" status of the checkbox with data-terminator attribute set on each change.
Something like
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
//Hide all groups that have the class equal to className
if (isTerminatorChecked) {
hideControls($(this), existingElements, className);
} else {
showControls(existingElements, className);
}
});
Updated fiddle

To make sure that showControls will only get invoked when the checkbox with the data-terminator attribute gets unchecked,
change this :
...
} else {
showControls(existingElements, className);
}
to
...
} else if ($(this).is("[data-terminator]")) {
showControls(existingElements, className);
}
Updated jsFiddle: http://jsfiddle.net/8yf0v3xt/10/

the code below said 'If any input that have the type checkbox is changing'
$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}
when you uncheck the "red" checkbox this="red", and red is not checked so... it automatically go to the else statment which in to show divider

How do I check the value of a form input that is set by a javascript function?

This is on a product review page which we recently had a developer make some changes to. The ratings used to be styled radio buttons which were easily validated, but the developer changed them to look like this:
<li>10</li>
the function setvaluenew is written as:
function setvaluenew(newval)
{
if(newval=='6'){ percentage = '20%';}else if(newval=='7'){ percentage = '40%';}else if(newval=='8'){ percentage = '60%';}else if(newval=='9'){ percentage = '80%';}else{ percentage = '100%'; }
$jj("#secretrating").val(newval);
$jj("#current-rating").css('width',percentage);
$jj("#current-rating").css('margin',"0px")
}
and #secretrating is a hidden input field for the review form that has a default value of ""
They work but I am trying to restore the validation mechanism. Since they are no longer radio buttons, I'm trying to understand what this function does and how to retrieve the value to validate it.
I have tried to use this to check the value during validation:
var rated = 0;
var ratingValue = $('#secretrating');
...
if (ratingValue != "" )
rated = 1;
but it passes validation even if a rating is not chosen. I also tried $('#secretrating'.value) with the same result...rated ends up equal to 1

associate number field with hidden div

I have a set of number input fields, labeled small & medium.., and a set of div's with the label small and medium. In my actually project there will be more sizes than just small and medium. When you add a number to the small number input field a text input insertsAfter the div labeled small. When you subtract a number from the small number input field, the text input field that was recently added is removed.
If the small number field is 0, I want
<div class="name-number-field-container" data-size="Small">
to be hidden, if the small number field is greater than 0 I want the
<div class="name-number-field-container" data-size="Small">
to show. Same goes for medium.
http://jsfiddle.net/7PhJZ/63/
the hidden and shown is correct, but they are not associated to their proper size and product. all class="name-number-field-container" show
i tried this:
$('.product-quantity').on('change', function(){
var select = $(".name-number-field-container").closest('[id^="product"]').find('[data-size="' + this.name + '"]')
if($(this).val()>=1){
$(select).show();
} else {
$(select).hide();
}
});

Is this what you meant?
http://jsfiddle.net/9kXLC/4/
Replace your show/hide code with this:
$('.product-quantity').on('change', function () {
var select = ".name-number-field-container[data-size=" + $(this).attr('name') + ']'
if ($(this).val() >= 1) {
$(this).parents('div[id^=product-]').find(select).show();
} else {
$(this).parents('div[id^=product-]').find(select).hide();
}
});

http://jsfiddle.net/fenderistic/Q4bFB/
Basically you have a custom name for each product-quantity that correlates to a specific name-number-field-container's data-size. I had to add the data-output-id attribute to distinguish between the different divs. So you use that information to hide or show the correlating divs.
$('.product-quantity').on('change', function () {
if ($(this).val() >= 1) {
$(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").show();
} else {
$(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").hide();
}
});

I just added a class to your fiddle that explicitly set the width for the .name-field input class like this: .name-field {width:50px;} and got the results you were looking for.

How to perform jquery code depening on which option is chosen

I have a jsfiddle here
Please follow steps below in order to use the little application in the fiddle:
Click on "Open Grid" link and select a numbered button. A bunch of letter buttons will appear underneath. If you start selecting answer buttons then they turn green and in the "Number of answers" textbox above will start counting how many buttons you have turned on.
If you deselect all answer buttons however so that no answer buttons are turned on, then the text box above does not display 0 but instead display 1.
This is because of the code below:
var container = $btn.closest(".optionAndAnswer");
// here the zero gets assigned
var answertxt = $(".answertxt", container);
var numberison = $(".answerBtnsOn", container).length;
if (answertxt.val() == 1 && numberison == 0) {
numberison = 1;
}
answertxt.val(numberison);
I have include a comment in the jsfiddle in block capitals to state where this block of code is in the fiddle.
What I want to do is that if the option selected from the grid is either "True or False" or "Yes or No", then perform the code above where if no answer button is highlighted then the textbox value is 1. If it is any other option then if no answer buttons are selected then the textbox value should be 0.
How can this be achieved?

Fixed it, as you can see below, I'm checking if the selected type of input is true/false yes/no and by that I determine which code to run:
// ...
var maxRowValue = $('.gridTxt', container).val();
if (maxRowValue === 'True or False' || maxRowValue === 'Yes or No') {
if (answertxt.val() == 1 && numberison == 0) {
numberison = 1;
}
}
answertxt.val(numberison);

Code is taking effect when it shouldn't be

I have a function where if the user clicks on a button, it will display a value in the textbox and it will perform a trigger to another function after a '#btn' button is clicked:
function addwindow(numberAnswer, gridValues, btn) {
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
$('#btn'+gridValues).trigger('click');
}
Now what I want to do is that:
if the user clicked on the "Add" button, then display the number from the "Number of Answers" column into the textbox or in other words perform this from the addwindow() function:
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
If the user has clicked on a #btn+gridValues button, then display the number in the textbox of the number of buttons which are currently turned on or in other words perform this code:
if ($('#mainNumberAnswerTxt').data('data-ignore') != true) {
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
}
The problem is that step 1 works fine, it does display the number from the "Number of Answers" column in the textbox after the user has clicked on the "Add" button.
The problem is step 2, it is not displaying the correct number on how many buttons are currently turned on after the user has clicked on the #btn+gridValues button.It just doesn't change the number in the textbox.
Does anyone know why this is happening and how thi can be fixed?
DEMO:
Here is a demo of the application. Please follow the steps below:
Step 1: On left hand side you will see a green plus button, click on it and it opens up a modal window.
Step 2: In modal window there is a search bar, type in "AAA" and submit search, you will see a bunch of rows appear.
Step 3: In the last row, you see under "Number of Answer" colum that it contains the number 4, click on the "Add" button within this row, the modal window will close.
You will see that the textbox displays the number 4 in the textbox which is fine as that was the number within the row under the "Number of Answers" column when you added the row.
But below is the problem:
Step 4: If you click on the "Open Grid" link and select button 3, you will see the letter buttons below change to A-C with only letter "B" turned on.
In the textbox it should display number 1 as only 1 button is turned on, but it doesn't display this number and that is the problem I am having.
How can this problem be fixed?

The problem comes from the fact taht you're setting the data-attribute to false on the $('#mainNumberAnswerTxt') but you're checking against the inputs (this in the click).
One solution would be to do the following test if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)
EDIT
To ensure that the ignore process execute only once (when the grid is reloaded after the modal), you'll have to change what's inside the block after the test:
if ($('#mainNumberAnswerTxt').data('ignore') != true) {
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
} else {
/*reset the ignore flag*/
$('#mainNumberAnswerTxt').data('ignore',false);
}
EDIT2
The main problem is that your reaffecting the $('#mainNumberAnswerTxt').val(numberAnswer) after setting it. Your trying to ignore it through the ignoreattribute.
What i would adivse, would be to remove every occurence to that attribute and to change the following function
function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
var myNumbers = {};
myNumbers["A-C"] = "3";
myNumbers["A-D"] = "4";
myNumbers["A-E"] = "5";
myNumbers["A-F"] = "6";
myNumbers["A-G"] = "7";
gridValues = myNumbers[gridValues];
$('#mainNumberAnswerTxt').show();
$('#mainNumberAnswerTxt').val(numberAnswer).data('ignore',true);
$('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
$('#btn'+gridValues).trigger('click');
$('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
$(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
}
$.modal.close();
return false;
}
to :
function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
var myNumbers = {};
myNumbers["A-C"] = "3";
myNumbers["A-D"] = "4";
myNumbers["A-E"] = "5";
myNumbers["A-F"] = "6";
myNumbers["A-G"] = "7";
gridValues = myNumbers[gridValues];
$('#mainNumberAnswerTxt').show();
$('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
$('#btn'+gridValues).trigger('click');
/* moved the following line below the click simulation,
hence its value will be changed regardless of what happened during the click simulation*/
$('#mainNumberAnswerTxt').val(numberAnswer);
$('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
$(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
}
$.modal.close();
return false;
}
In order to modify the value after the visual changes took place.

Use data instead of attr - attr takes a string, data takes JavaScript objects.