Develop Reference

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.

move the result of select2 to the other div

I am using select2 and I use it for a single choice. I want to move the result of what we have chosen to another div.
Please check my code:
https://jsfiddle.net/hxe7wr65/
How to move it? because I don't want the result to show in the box. I want the box still clear and even after I choose, the placeholder still shows up.
This is the design that i'm doing right now
in that image. its only can choose 1 option. after we choose. the result show up to another place and so the select still have the placeholder in it. please guys help me.
thank so much

Ok I'm not 100% sure this is what you're looking for, but I think you wan't the grab value of the last selected item, transfer it to another div and then clear the input.
For the first step add an event handler to it.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
console.log('select')
console.log(e.params.data.id) //This will give you the id of the selected attribute
console.log(e.params.data.text) //This will give you the text of the selected text
})
Now that you have the value, transferring it to the other div is relatively simple.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
})
Then to clear the form
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
$(this).val('');
// or depending no what version you are using
$(this).select2('val', '')
})

How to fill a multi select input from a hidden input and vice versa?

So I have an address book tool that I setup using this http://www.phpkobo.com/address_book.php. I also setup Select2 which is a jquery plugin that manages multiple select inputs https://select2.github.io/examples.html.
So this address book tool does not allow you to setup a multi select input so i had to engineer my way around this by creating a multi select input that then copied your selected input into a hidden input. Using the below script I managed to get the selected items copied over automatically over to a hidden input i had.
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;
}
So this script works just fine however, the problem is that when I got to edit an entry my multi select input is empty since all the data was saved on the hidden input. Im trying to figure out how can I fill the multi select input with the data that's already in the hidden input and vice versa?
Any help would be appreciated.
Here is an example of what I got working:
https://jsfiddle.net/akhyp/1956/

Got some help via this thread Jquery script - Fill select with input text and vice versa
Here is the final product working as desired: http://jsfiddle.net/akhyp/1966/
$("#txt").bind('keyup' , function(e){
var ar = $(this).val().split(",");
$("#sel option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
$('#sel').change(function(){
$('#txt').val($('#sel').val());
});

Make a selecbox(es) required based on another selectbox using jQuery

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.

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