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.
Related
So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple
I am working on a Gmail Add-on with a dynamically created radio group, something like:
How can I insert an input text box as one of the radio options?
This is what I have so far:
var urlGroup = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.RADIO_BUTTON)
.setTitle("Please select a link")
.setFieldName("radio_group")
//How do I get a text input field here as one of the radio options
// This is the line I cannot figure out
urlGroup.addItem(** insert input textbox here **)
for (var g = 0; (g < getURLsection.length); g++) {
//shorten long links to fit in card
if (getURLsection[g].length > 21) {
var URLname = getURLsection[g].slice(0, 22) + "..." + getURLsection[g].slice(-5);
} else {
var URLname = getURLsection[g]
}
urlGroup.addItem(URLname, getURLsection[g], false)
}
// create radio button group
var section = CardService.newCardSection()
.addWidget(urlGroup)
Any ideas on how to do this?
Preferably I would like to remove the word Other: and just have it as a .setTitle("enter link here") within the textbook.
To generate a text input element in Google's Add-ons you need to create a TextInput widget object which you need to add to the given section later.
As stated in the documentation for the addItem method, it receives the text and value parameters as strings so you can't use a TextInput object there.
As a workaround for what you want to achieve, you can create a radio group option with the 'otherLink' value:
urlGroup.addItem('Enter link below:', 'otherLink', false);
And a text input widget which you insert into the radio button group section:
var textInput = CardService.newTextInput()
.setFieldName("text_input_form_input_key")
.setTitle("enter link here")
// create radio button group section with text input
var section = CardService.newCardSection()
.addWidget(urlGroup)
.addWidget(textInput)
This way, the text input will appear below of the radio buttons and you could work with the value (link) entered in the input text if the selected value from the radio buttons group is 'otherLink'.
I have 2 scripts that I need to combine, I basically have a script that allows a text input to be filled when you select an item in a select list. I also have a script that fills a select list based on input of a text input. Now I am trying to figure out how can I combine these 2 scripts so they can work together.
Heres an example of a multi select filling a text input.
http://jsfiddle.net/akhyp/1963/
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('hidden_input');
var selectedArray = new Array();
var selObj = document.getElementById('selected_items');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++) {
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
Heres an example of a text input filling a multi select based on input.
http://jsfiddle.net/akhyp/1964/
$("#txt").change(function(e){
var ar = $(this).val().split(",");
$("#sel option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
What I am trying to accomplish is something like this:
If text input is null then fill text input with selected option from the select list.
If the text input is already filled then fill in the multi select based on input from the text input.
Any help would be appreciated.
Final update:
Finally got the results I wanted, here the final product http://jsfiddle.net/akhyp/1966/ been working on this for weeks possibly months lol. Really happy to have this working.
I added another change script function, seems to have made it work. Your change set the selected, and mine transfers the values.
$('#sel').change(function(){
$('#txt').val($('#sel').val());
});
http://jsfiddle.net/snlacks/akhyp/1965/
I have product called initials like below in my test site
http://dev.mommyjewelry.com/initials/sideways-initial-necklace.html
Now if you go that page and select how many gold initials you will more select box appear below based on the selection. So If I select 2 initials I am display below 2 select boxes below where we have to select the letters of the initials
Now I am looking to make these 2 select boxes for instance in this example required. so If we click add to shopping cart button, display a pop up saying that these 2 select boxes are required. and prevent going to the shopping cart.
So again if I select how many gold initials as 3 then the 3 displayed select boxes are the ones I am looking to make in required.
I know when I have a textbox instead of select box I can use the below code
$("#product_form").submit(function(evt) {
var target = $("#yellow-gold").val(); var target1 = $("#white-gold").val();
if(target == "initial-0" && target1=="initial-0"){
alert("You must select either White Gold or Yellow Gold Necklace.");
evt.preventDefault();
}else{
var number_of_charms = $("#yellow-gold").attr("selectedIndex") + 0;
var number_of_gold = $("#white-gold").attr("selectedIndex") + 0;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}else if(number_of_gold > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}
}
});
as you can see above from my above code that I am able to display the message when it a text box by using this line
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
but how to use the same in case of a selectbox?
Try this :
$("div[id^='sideways-yellow']:visible select[name^=Product_Attribute] option:selected[value='select-letter']").length
This should get you the number of not selected options for the gold initial(Where the option value is select-letter)
If you need to get the white one, you can just change sideways-yellow to sideways-white
Sorry about the previous answer, I didn't realize I wasn't getting only the visible ones.
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