Jquery dynamic validations html - javascript

I'm working in javascript/jQuery forms filling and validation. However I have a following scenario that I want using for-loops.
I've 3 fields in one container, and I have total 4 containers, The first box is must, scha that the first item input text "A" should be validated. And second is radio button, having their respective input fields, so the check is must that which radio button is pressed and made that field validated and the other is not. Let the radio button is Option B and their respective input text boxes are C and D.
Now The rest of there have the same case when there activator check box is checked otherwise no validation. Let my checkBoxes are X. So my code is:
My Code is 70% working, don't know why. Also, I want to check it back, that if the checkboxes aren't clicked(such that unchecked after clicked) it removes all the validations for the upcoming containers.
I've my custom javascript function of validating check boxes names checkRadioand makeRequire/makeUnrequire that accepts an array of input and make all of them as said.
How can I implement the optimal solution for such scenario.
for (var i = 1; i <=3; i++) {
if (checkRadio("X-"+i))
{
for (var j = 2; j <=4; j++) {
for (var k = 1; k <=3; k++) {
if (checkRadio("B"+j+"-1")) {
makeRequired(["C-"+k]);
makeUnRequired(["D-"+k]);
} else if (checkRadio("B"+j+"-2")) {
makeUnRequired(["C-"+k]);
makeRequired(["D-"+k]);
}
};
};
}
My Id's conventions are, A-1, A-2, A-3 and A-4 for first text field.
B1-1 and B1-2 for respective text fields C-1 and D-1 for first container.

Related

Is it possible to select text boxes with javaScript in acrobat

I would like to be able to use the JavaScript function of one of my form inputs to be able to show or hide a text box. After a lot of research I can only find how to select and hide other form input methods.
here is what I have:
var supplyBudget = this.getField("Supply Budget").value;
if (supplyBudget == ""){
/*text box selector*/.style.display = 3;
}
else if (supplyBudget =="0"){
/*text box selector*/.style.display = 3;
}
else{
/*text box selector*/.style.display = 1;
}
This runs when the user leaves the input field.
*edited code in accordance with freginold's comment
If you want to hide text that is part of the page content, you can't do that with PDF unless that particular text item is assigned to an Optional Content Group (OCG)... basically a layer that you can show or hide. There is no concept of "elements" for PDF page context like there is in HTML. Instead, there's a list of painting instructions for the page but JavaScript does not have access to it.
There are no "selectors" in Acrobat JavaScript. However, you can get the number of fields and then iterate to get the names in order to find the ones that are of interest. For example if I wanted to hide all fields where the name starts with "name", I might write...
for ( var i = 0; i < this.numFields; i++) {
var field = this.getField(this.getNthFieldName(i));
if ( field.name.indexOf("name") > -1 ) {
field.display = display.hidden
}
}
In general, to hide a field use...
this.getField("myFieldName").display = display.hidden;
To show a hidden field use...
this.getField("myFieldName").display = display.visible;
The only way that I have found to "Hide plain Text" and a text field, is to use something similar to #joelgeraci answer. I had to add another empty read only textbox to cover the text and textbox to hide.
Such as:
this.getField("HiddenField").display = display.visible;
Then when I need to "show" the text and text box I would simply hide the hidden field:
this.getField("HiddenField").display = display.hidden;
I have multiple cases of this in a form that I have been creating for work and a lot of JS behind it. I am no expert, just learning as I go.

count checkboxes in a form using javascript

I have quite a lot of check boxes on one form. The check boxes are in different sections of the form. I would like to count the number of checkboxes at the end of each section on my form.
For example I have 6 sections within my form and I have between 6 and 10 checkboxes within each section. I would like to have a textbox with a number value at the end of each section telling me how many check boxes were check within that particular section.
Does anyone have a script for that? I have a snippet from support staff but they don't have a full solution and I don't know JavaScript well enough to finish it. I'm through trying to figure it out so i can finish it. Here is the snippet they sent me:
<script type="text/JavaScript">
function countcheck(checkName){
inputElems = document.getElementsByName(checkName);
count = 0;
for (i = 0; i < inputElems.length; i++) {
if (inputElems.checked === true) {
count++;
document.getElementById("teval_engage7").value = count;
}
}
}
</script>
The script will only count checked checkboxes within that group only. Basically you will need a function for each of your checkbox so that you can have separated counters. This will also require an attribute to your checkbox according to the function in question:
onclick="countcheck(this.name);"
var cb_counts = {};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type = 'checkbox' && input.checked) {
if (cb_counts[input.name]) {
cb_counts[input.name]++;
} else {
(cb_counts[input.name] = 1);
}
}
}
Now the object cb_counts contains properties with the name of each group of checkboxes, and the values are the counts. Do with this what you wish.
Thanks for the quick reply. I use a application call rsform which helps to make forms. On the script I have "teval_engage7" is the text box which stores the value of the number of checkboxes that have been checked. "onclick="countcheck(this.name);"" is the trigger I place under each checkbox question. So when I go to the form and click on a checkbox with that trigger attached to it, the value of "1" shows up in the teval_engage7 text box. The next check box I click on then shows "2" in the teval_engage7 text box. My question is, can you te me using this script you wrote where the values are stored so I can substitute that name for my textbox name. Also, do I use my same trigger "onclick="countcheck(this.name);"" to attach to my checkbox attibute area to trigger the count?
Thanks

Check boxes contradicting each other

I have a project that is "almost" done. I've gotten a ton of help here and I'm hoping I'll be able to finalize this project soon. I have a form with checkboxes that represent different attributes for 3 different items. As a user checks a specific checkbox I have whichever item that it does not correspond to hide, as well as any attribute that does not go with the one that was checked becomes disabled and the text color turns a light grey. So the only boxes that would still be active would be the ones that go together for said item.
I can get that all to work just fine (I think). But there are a few attributes that correspond to more than one item. If you look at my example (link provided)
If you check the 'Economy' chekcbox only 1 grey box 'Bernini' is displayed and a lot of other checkboxes become disabled, which is correct. Un-check it and everything is enabled and visible again.
If you check the 'Tape-in Bottom Rail' checkbox 2 grey boxes 'Bernini & Picasso' are displayed which is also correct as that attribute 'Tape-in Bottom Rail' applies to both. Un-check it and everything is enabled and visible again.
The issue I have is, IF you check both the 'Economy' & 'Tape-in Bottom Rail' then Un-check either of them, the wrong attributes become enabled and the visible grey boxes no longer correspond correctly.
I though I should use an 'else if' or another 'if' statement but if so I have not figured out how to get it to work correctly.
Here is the JS I'm using so far, this is for only 1 of the functions.
function bannerBernini() {
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
for (var i = 0; i < berninis.length; i++) {
berninis[i].style.color="#d1d1d1";}
var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
for (var j = 0; j < not_bernini.length; j++){
not_bernini[j].disabled=true;}
document.getElementById("Picasso").style.display="none";
document.getElementById("Matisse").style.display="none";
}
else
{
var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
for(var i = 0; i < berninis.length; i++) {
berninis[i].style.color="";}
var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
for (var j = 0; j < not_bernini.length; j++){
not_bernini[j].disabled=false;}
document.getElementById("Picasso").style.display="";
document.getElementById("Matisse").style.display="";
}}
Here is the sample which I hope makes sense:
http://jsfiddle.net/g_borg/48uhn/1/
Thanks in advance for any assistance. I know some will say I should use jQuery, I would but as this is my 1st time trying to code with javascript and I'm not familiar with jQuery I'd prefer to try to keep this where I still understand the code.

Is there an "Idiot proof" way to re-enable all fields (regardless of there state) on a form?

My problem is that I have javascript that enables/disables some form fields that I have disabled by default that the user doesn't need to send to my business, but can enable them if they need to with a checkbox. However, I obviously have a form provider that is quite finnicky about disabled fields. Basically, the visitor will select checkboxes that will enable certain fields that they need to enter, or choose to.
What I'm curious about, can I create a checkbox that will undo all the fields enabled or disabled state to just enabled, regardless of it's current state, so that all fields get submitted?
Another reason I need this kind of function is because the client receives an autoresponce e-mail, and when the fields are disabled they see %FeildName% if the field was disabled before submitting the form. simply because the field never existed when the data was submitted on the form, obviously because of it's disabled state.
If something can be done, can it be entered in my existing javascript code? I already have a Form Validation script, that I used with javascript.
I'm not exactly great at javascript, and never really even played with jQuery before, nor do I have the intellect to follow jQuery, so any help would be appreciated.
My code can be seen on this page, just view the source.
http://www.gbjimaging.net/order/form/complete/audio.htm
The checkbox at the very bottom of the form, before the submit and reset buttons I'd like to perform this function, so that all information is garenteed to be submitted. Again, thanks for your anticipated help, and it really will be appreciated.
The following example is the way to make sure that all fields of your current form were re-enabled. All of the elements with input, select, textarea and checkbox tags will become enabled as you click a button:
$(document).ready(function() {
$('#switcher').click(function() {
$('input, select').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
});
});
});
Online example
You need to use jQuery and add it to your page by pasting the following to your page's head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In this example Google CDN is being used.
Please read more about jQuery Install and jQuery Usage.
In jQuery:
$(":input").prop('disabled', false);
:input is a jQuery pseudo-selector that matches all types of form input fields. The .prop method gets or sets properties, so this sets all the disabled properties to false.
Something along the lines of :
function validate(OrderAudio) {
if(valid) {
var e = document.getElementsByTagName('input'), i;
for(i = 0; i < e.length; ++i) {
e[i].disabled = false;
}
e = document.getElementsByTagName('textarea');
for(i = 0; i < e.length; ++i) {
e[i].disabled = false;
}
}
}
There is a very easy way to do this. All you have to do is put all the field items in an Array, then when the user checks the checkbox, you can make an Array loop and for every item in the Array (for(var i = 0; i < array.length; i++) if(checkBox.checked == true) {array[i].disabled = false;} else {array[i].disabled = true;}). This will disable all items if checkbox on uncheck, and enable on check.
Here is a small diagram:

Radio button on click, seeting a default value in the listbox

I have 3 radio buttons(values: Y, N and None) and a list box.
The default selections on the list box should change depending on which radio button the user selects. If the user clicks the 'Y' radio button, then the list box should default to "XYZ" and so on.
I can't use Jquery. I have to stick to JS. Please help me set a default value.
function radio4_onclick(ctrl) {
var flag1;
for (var i=0; i < 3; i++)
if (document.form_r1.radio4[i].checked==true)
flag1= document.form_r1.radio4[i].value;
if (flag1=='NONE');
//this is the place where I want to set listbox1 to Default
}
The first option in a list is selected by default. (See first list in my jfiddle.)
However, you can set the "selectedIndex" of a list like this:
var list=document.getElementById('list');
list.selectedIndex = 1;
The indexes start at 0. So, if you want the second option, the index is 1, etc.
Here's a working example: http://jsfiddle.net/AmR8C/1/

Categories

Resources