I have an Acrobat PDF that a colleague would like some form validation added to beyond the simple options that Acrobat gives you without using javascript. From what I can tell, Javascript will be required to do this. I think the behavior should be able to be done via the "Add an Action->MouseDown->Run a Javascript" option found in Properties->Actions of the radio button group.
Basically I have a group of radio buttons with 3 buttons. If buttonA is pressed, I'd like fieldA to be required. If buttonB is pressed, I'd like fieldB to be required. The same for buttonC/fieldC.
I know what my pseudo code is going to look like but I'm having trouble translating it into javascript
onSelectionChanged(selection) {
fieldA.required = false;
fieldB.required = false;
fieldC.required = false;
if (selection == 'A') { fieldA.required = true; }
if (selection == 'B') { fieldB.required = true; }
if (selection == 'C') { fieldC.required = true; }
}
Can anyone point me in the right direction? Thank you in advance.
Did some more digging, here was the eventual solution (placed in the "MouseUp->Run a Javascript" of the radio button group:
var f = this.getField("ServiceType");
var ins = this.getField("InstallationDateTime");
var rem = this.getField("RemovalDateTime");
var ser = this.getField("ServiceRequestDateTime");
console.println(f.value);
ins.required = false;
rem.required = false;
ser.required = false;
if (f.value === "Install") {
ins.required = true;
}
if (f.value === "Removal") {
rem.required = true;
}
if (f.value === "Service") {
ser.required = true;
}
Pretty easy all things considered, finding the following was really nice for debugging:
f = this.getField("myField");
for ( var i in f ) {
try {
if ( typeof f[i] != "function" ) { // Do not list field methods
console.println( i + ":" + f[i] )
}
} catch(e) {
} // An exception occurs when we get a property that does not apply to this field type.
}
Related
I am trying to make a compound interest calculator (I'm starting out in JS) and I'm trying to make buttons that enable the other one, and disable itself when pressed.
function select_button(button) {
var buttonId= button.id;
if(buttonId="Deposit") {
document.getElementById("Withdraw").disabled = false;
document.getElementById("Deposit").disabled = true;
}
if(buttonId="Withdraw") {
document.getElementById("Withdraw").disabled = true;
document.getElementById("Deposit").disabled = false;
}
};
<button id="Deposit" disabled=true type="button" onclick="select_button(Deposit);"> Deposit </button> <button id="Withdraw" type="button" onclick="select_button(Withdraw);">Withdraw</button>
This is my current code. For some reason, when I press on Withdraw, it functions as intended. But when I press on Deposit, it disables Withdraw and enables itself.
= is the assignment operator, you want to use at least == but preferably === when comparing things in JavaScript.
What you want to do is:
function select_button(button) {
var buttonId= button.id;
if(buttonId === "Deposit") {
document.getElementById("Withdraw").disabled = false;
document.getElementById("Deposit").disabled = true;
}
if(buttonId === "Withdraw") {
document.getElementById("Withdraw").disabled = true;
document.getElementById("Deposit").disabled = false;
}
};
You should change your equal symbol = working as the assignment operator to conditional operator, you can use == or ===
I.E.
buttonId="Deposit" to buttonId === "Deposit"
I have a web form that uses a check box function. Users are bypassing the consent checkbox, however, as you can just hit a hard return after entering your creds. Trying to get something that will restrict the carriage return bypassing the check box...
function consentCheckBoxChecked() {
debugger;
var submitBtn = document.getElementById("submitButton");
var checkBox = document.getElementById("consentCheckBox");
if (checkBox.checked === true) {
submitBtn.classList.remove("is-disabled");
} else {
submitBtn.classList.add("is-disabled");
}
}
I think you should try something like this, in addition to applying required classes
<body onload="OnLoadEvent();">
</body>
Javascript:
function OnLoadEvent() {
document.getElementById("submitButton").Enabled = false;
}
function consentCheckBoxChecked()
{
var submitBtn = document.getElementById("submitButton");
var checkBox = document.getElementById("consentCheckBox");
if (checkBox.checked) {
submitBtn.Enabled = true;
} else {
submitBtn.Enabled = false;
}
}
I am creating a quiz/survey form with jQuery and javascript and I am having some trouble with the question validation.
The way the quiz/survey creation works is a series of show/hides display relevant form fields. The user fills out one set of fields for the first question and then they are asked if they would like to add another question to their quiz/survey and the next set of form fields is displayed.
I am struggling because instead of having a massive validation when the user has completed all of their possible form fields I am running a validation script at the end of each question with the associated form field IDs and values being passed into the script upon the user completing that question. This script is below, but some key areas of the script are based upon whether radio buttons have been checked. For instance if the user has left the question text area empty they are alerted to fill in question text, or if they select a true/false answer or multiple choice answer, they are supposed to determine which is the correct answer based upon a radio button list. Here is the entire validation code:
var questionValidate = function(qTextID, qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4, VisRef, Youtube, Vimeo, ImgID) {
// alert(qTextID, qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4, VisRef, Youtube, Vimeo, ImgID);
if (jQuery('select[name="CAT_Custom_14"]').val() == 'Quiz') {
if (jQuery(qTextID).val() == "") {
var qText = true;
alert('Question Text field is blank!');
};
if (jQuery(qAnswerType).val() == " ") {
var answertype = true;
alert("There's no answer selected.");
} else if (jQuery(qAnswerType).val() == 'True/False') {
if (jQuery(TFID).attr("checked") == true) {
var tfanswer = true;
var mcanswer = false;
alert('True False is selected');
} else if (jQuery(TFID).attr("checked") == false) {
alert('True False is not selected.');
};
} else if (jQuery(MCID).attr("checked") != 'checked' ) {
var mcanswer = true;
var tfanswer = false;
alert('The correct Multiple Choice Answer is not selected');
if (jQuery(MCText1).val() == "" || jQuery(MCText2).val() == "" || jQuery(MCText3).val() == "" || jQuery(MCText4).val() == "") {
var mcTextfields = true;
alert("There are Multiple Choice Fields that you have left blank.");
} else {
mcTextfields = false;
};
};
if (jQuery(VisRef).val() != " ") {
if (jQuery(VisRef).val() == "Youtube Video" && jQuery(Youtube).val() == "") {
youtubeVal = true;
alert('Please enter your Youtube Video code.');
} else if (jQuery(VisRef).val() == "Vimeo Video" && jQuery(Vimeo).val() == "") {
vimeoVal = true;
alert('Please enter your Vimeo Video code.');
} else {
validateImage(ImgID);
};
} else {
youtubeVal = false;
vimeoVal = false;
tempImgCheck = false;
}
};
};
I have run into a way to tell whether the radio button is checked, however it does not appear to be working with my script the way that I want it to. If you look at this area of the code you should be able to see that it first determines the answer type (true/false or multiple choice) and then if the correct answer is not selected the user should be alerted. So if they do not select the 'true', 'false', 'a', 'b', 'c', or 'd' radio button the validation should alert them to select it.
If there are any other ways to check if the correct radio buttons are selected I would appreciate anyone's help in figuring this out.
Thank you so much!
I think you want something like this:
if($('#radio_button').is(':checked')){
alert("I am checked");
}
You could check for a button that isn't checked by negating that statement.
if(!$('#radio_button').is(':checked')){
alert("I'm not checked");
}
I need to detect changes on page change in page input field of pagingtoolbar in extjs 4.2.
I am going through docs, but can't find any method for it. I have successfully overridden next, previous, &c., buttons, but can't find anything to override page input field. How would you go about this?
I have added afterrender listener on ExtJS Combobox component. You can add accordingly to override input field of paging toolbar. Here is the working code :
'afterrender' : function(thisCombo){
thisCombo.getPicker().pagingToolbar.addListener('change', function() {
var me = this;
thisCombo.getPicker().pagingToolbar.child("#inputItem").addListener('specialkey', function(field, e) {
if (e.getKey() == e.ENTER) {
///// Do your modifications here
var inputItem = thisCombo.getPicker().pagingToolbar.child('#inputItem').getValue();
total = me.getPageData().pageCount;
if (inputItem <= total) {
if (me.fireEvent('beforechange', me, inputItem) !== false) {
me.store.inputItemPage({
// Enter params
});
}
}
}
});
});
}
}
this example my help
As in the code you can all of the texts given that they have setter etc
http://jsfiddle.net/acteon/sZ3y6/1/
Ext.toolbar.Paging.override({
onLoad: function () {
var me = this,
pageData, currPage, pageCount, afterText, count, isEmpty;
count = me.store.getCount();
isEmpty = count === 0;
if (!isEmpty) {
pageData = me.getPageData();
currPage = pageData.currentPage;
pageCount = pageData.pageCount;
afterText = Ext.String.format(me.afterPageText, (isNaN(pageCount) || (pageCount === 0)) ? 1 : pageCount);
} else {
currPage = 0;
pageCount = 0;
afterText = Ext.String.format(me.afterPageText, 1);
}
Ext.suspendLayouts();
me.child('#afterTextItem').setText("my precious text");
// this one is the input field
me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
me.child('#first').setDisabled(currPage === 1 || isEmpty);
me.child('#prev').setDisabled(currPage === 1 || isEmpty);
me.child('#next').setDisabled(currPage === pageCount || isEmpty);
me.child('#last').setDisabled(currPage === pageCount || isEmpty);
me.child('#refresh').enable();
me.updateInfo();
Ext.resumeLayouts(false);
if (me.rendered) {
me.fireEvent('change', me, pageData);
}
}
});
thanks for your help.
I have another issue, #inputItem field. What event handles the enter/return key? I need to override this function, because I have a disable/enable button.
I am designing a page where it displays the staff details in following structure :
user can click anywhere in the details box and the checkbox will get selected along with the change in the className of the details <div> box.
The problem i m facing is when i click anywhere in the details box it works fine.. but when i click on checkbox it only changes the className but doesnt make any changes to checkbox.
Also there is one condition, few users are allowed to selected limited staff at a time and few are allowed to select all of them..
I have assigned a myClick() function to the outer <div> box (one with red border)
and the function is :
var selectedCount = 0;
myClick = function(myObj,event)
{
var trgt =(event.srcElement) ? event.srcElement : event.target;
tgName = trgt.tagName;
//following statement gives me correct details element event though i clicked on any child tags
theElem = (tgName == 'DIV') ? trgt : ( (tgName == 'B') ? trgt.parentNode.parentNode : trgt.parentNode);
if(allowed_selection == 'unlimited')
{
if(theElem.className == 'details_clicked')
{
theElem.className = 'details';
theElem.getElementsByTagName('input')[0].checked = false;
}
else if(theElem.className == 'details_hover')
{
theElem.className = 'details_clicked';
if(tgName != 'INPUT') theElem.getElementsByTagName('input')[0].checked = true;
}
}
else
{
if(theElem.className == 'details_clicked')
{
theElem.className = 'details';
theElem.getElementsByTagName('input')[0].checked = false;
selectedCount--;
}
else if(theElem.className == 'details_hover')
{
if(selectedCount == allowed_selection ) return false;
theElem.className = 'details_clicked';
//i think, this is the suspicious area for errors
theElem.getElementsByTagName('input')[0].checked = true;
selectedCount++;
}
}
return false;
};
The problem is these return lines in your function:
return false;
When you connect an event to a form element that performs an action, such as a checkbox or button, returning false will prevent that default action. It stops the event from taking place as it regularly would.
You could try something like this at the top of your function:
var returnValue = (tgName == 'INPUT' && trgt.type == "checkbox") ? true : false;
And then when calling 'return ', use:
return returnValue;
If you return true you allow the checkbox to act as normal and check / uncheck itself.