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);
Related
I have a form with numeric fields, text fields and drop down lists. I have implemented functionality were if a field is changed from original value then button is enabled for submit. If field is changed back to it original value button should(is) disabled.
PROBLEM: Current issue at the moment is
- if I change two different fields, then button is enabled as expected. But then if I revert only one of these edited fields back to its original value, submit button is disabled. Expected behavior is "as long as there's a changed field that is valid, then button should remain enabled for submit".
Conditions for button state
for all fields - if original value is changed and is not empty - enable button
for numeric fields - if entered/changed value is a valid number - enable button
*so if any of these conditions are not met, then button should stay disabled
Current Code
Current implementation and why it was implemented this way
$("input[name='q_description'],[name='q_sellprice'],[name='profit'],[name='grossProfit'],[name='markUp']").change(function () {
var originalValue = ($(this)[0].defaultValue);
var currentValue = $(this).val();
var changed = false;
var button = $('#submit-data');
//numeric fields
var sellprice = parseFloat($('#q_sellprice').val());
var profit = parseFloat($('#profit').val()); var grossProfit = parseFloat($('#grossProfit').val());
var markUp = parseFloat($('#markUp').val());
//text fields
var description = document.getElementById("q_description").value;
//alert("Numeric values:" + getFieldValues );
//$('input, select').bind('keyup change blur', function () {
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
$(this).css("background", "#fd6363");
document.getElementById("submit-data").disabled = true;
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
$(this).css("background", "#FFE075");
document.getElementById("submit-data").disabled = false;
}
else if (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
$(this).css("background", "#FFFFFF")
document.getElementById("submit-data").disabled = true;
}
else {
//to do
}
//});
});
On the first line, I dont have it this way
$("input[type=text]").change(function () {
because there is some fields on the form/page that I wanted to ignore for affecting the state of the submit button. That is why I have specified those particular fields on the .change
Also to check isNaN for the numeric fields. I probably can identify id the required fields by class names and add them to an array and just check that instead of the numerous declarations
var numericFields = document.getElementsByClassName("numeric_fields");
var getFieldValues = new Array();
for (i in numericFields) {
var singleValue = numericFields[i].value;
if (singleValue !== "" && singleValue !== undefined ) {
getFieldValues.push(singleValue);
}
}
but I had an issue, where the invalid check if statement part of the code wasn't getting hit with that implementation.
Anyways the main issue that I would like to solve at the moment, is to stop the button getting disabled when I revert one field back to its original value when multiple fields have been changed/edited to (from original) other valid states.
UPDATE
Further checks to clarify issue. I added an alert message message to see/check which if/else statement is getting hit each time any field is changed
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
alert("1") //disable button
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
alert("2") //enable button
}
else (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
alert("3") //default -> disable button
}
Now if a previously edited field is reverted back to its original value, while another has been changed, its hitting the last else statement alert("3), meaning the check is done per individual field that is currently being edited and not all the specified fields that I have specified from the form.
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
please see this :
http://ghiden.github.io/angucomplete-alt/
I am using the example 1.
how display Dropdown When I click on the input ?
please see :
When I press "u" key. Dropdown are shown. but i need When I click on the input Dropdown are shown.
You need to patch angucomplete-alt's onFocusHandler like this:
scope.onFocusHandler = function() {
if (scope.focusIn) scope.focusIn()
if (scope.minlength == 0) scope.showDropdown = true
}
In a form I have 4 radio buttons, under the label Q3. Also i have a text field labeled lictype Each radio button has its own respective Button Radio Choice Value
radio1 = Pre
radio2 = Pro
radio3 = Ult
radio4 = Uns
When a radio button is checked. I want the value of that button to be displayed in the lictype text field.
Here is the JS I tried in a calculation.
var q3 = this.getField("value")
if (q3.value == "Pre”){
{
lictype.value = “Pre";
}
elseif (q3.value == "Pro”)
{
lictype.value = “Pro";
}
elseif (q3.value == "Ult”)
{
lictype.value = “Ult";
}
else (q3.value == "Uns”)
{
lictype.value = “Uns";
}
If anyone is interested: I was able to accomplish this by using JS to do a SHOW/HIDE on elements in the ACROBAT properties menu.
Set a different text field for each of the radio buttons
Set the property of each radio button to SHOW and then HIDE the appropriate text field.
In the the text field: Stack all of them in the desired location and set each default value in the properties panel to their respective value names.
Problem solved!
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.