Is there a way to add a item to a combo box from a text box on the same page? Also how would you add that item to multiple combo boxes on the same page? This is an acrobat pdf form. Any examples would be greatly appreciated.
This is possible.
The best is to get the Acrobat JavaScript documentation, which is part of the Acrobat SDK, downloadable from the Adobe website. Of particular interest are the entries for setItems() and getItems() and their referenced Field object methods.
Due to the implementation of adding items, you would first read the current items, then add your new item, and then write them back (for the example, we assume that there are no specific return values):
var f = this.getField("myComboBox") ;
var fitms = new Array() ;
for (var fi = 0 ; fi < f.numItems ; fi++ ) {
fitms[fi] = f.getItemAt(fi, false) ;
}
if (this.getField("myAddingValue").valueAsString.length > 0) {
fitms[fitms.length] = this.getField("myAddingValue").valueAsString ;
}
f.setItems(fitms) ;
Add this code to a button to add the item in the field myAddingValue, and that's about it. There are code samples in the above mentioned documentation.
You might create a document-level function which takes the combo box field and the field for the add-on value as argument.
You can use jQuery to do it.. consider this as HTML
<text id="mytext">
<button id="btnAdd" type="button">Add</button>
<select class="awesomecombo" id="combo_one"></select>
<select class="awesomecombo" id="combo_two"></select>
Javascript is
$("#btnAdd").click(function(){
$(".awesomecombo").append("<option>"+$("#mytext").val()+"</option>");
});
This will solve your purpose.
UPDATE: added class for multiple combobox selection and <option> in append.
Related
I want to create a form with Adobe Acrobat.
I have a CheckBox (named CheckBox) and radio buttons (group name: Group1; options name Opt1 Opt2 Opt3).
With this code in the actions of the CheckBox (run a JavaScript script):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
I manage to hide the group (= all options). But I would like to hide only one option (Opt3 for example).
How do I modify my code to achieve this result?
Thank you for your help :)
I see that in your example you add the name of the group to the getfield function:this.getField ("Group1"). This means you are hiding the full group. In order to hide a single option you should instead add the name of that specific option to the getfield function this.getField ("Opt3")
So your code should look like this:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Opt3"). display = nDisplay;
By dint of research and testing, I finally found the solution.
The problem was with the name of the option. I had this intuition.
In Adobe Acrobat (form), when you create radio buttons, they are part of a group (example "Group1") and each new button will be named "Opt1" "Opt2" ...
To draw a parallel with other languages, the group is actually "a list". So the name of the option "Opt1" is not "Opt1" but the 1st element of "the list" (= "Group1"): Group1.0
And with that, it's won.
I take my original code which hides all group ("Group1"):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
If I want to do an action on the 1st element of the list (= "Opt1"), the code would become:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1.0"). display = nDisplay;
(1st element = 0; 2nd element = 1 ...)
Thanks to Stephen for taking the time to help me :) And I hope it helps other people.
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.
Currently working on autocomplete based on vanilla javascript. Some how I brought the autocomplete in working condition but I need to append with checkbox for the multiple selection in the autocomplete list the user has to select the check box then it will apply in the field For example if the User type IND in the text field the result will disaply as with the checkbox India and again if the user type ZIM with the checkbox Zimbawae in the text field.
Multiple selection
Here is the sample code
function init(){
outp = document.getElementById("output");
window.setInterval("lookAt()", 100);
setVisible("hidden");
document.onkeydown = keygetter; //needed for Opera...
document.onkeyup = keyHandler;
}
The rest of the code is available in fiddle Link
Kindly guide me
So you can use a comma ( , ) to separate your different items, then you can use
var items = document.getElementsByName("text")[0].value.split(',')
now in items you have an array of items, use your autocompleting functions on the last item of the array:
items[items.length-1]
it should do the trick
Here is my requirement.
List item
I have a couple of dropdowns A and B
I have a javascript key-value variable created:
var keyvalue={"key1":["value1","value2"],"key2":["value2","value4"]}
I am populating the keys in dropdown A, on selecting this dropdown, i am populating the corresponding values (froom the keyvalue variable) into the drop down B
Here is the sample code i a using :
The problem is even if i select a different option in dropdown A, the corresponding old option is present in the new drop down,i.e, new values are appended, rather than creating a new drop down
Any help is appreciated,thanks in advance.
You need to remove all options before populating. Add this directly right after your var quantity statement.
while (selectvalue.options.length > 0) {
selectvalue.remove();
}
Also, as mentioned by #francisco-presencia, you should lose the onchange in the HTML and instead use an event listener within your script.
I recommend you go the separation of concerns route. That means deleting the onclick="" event, and instead doing:
$('#key').change(function(){
$('#value').remove();
// Do the rest of the logic of retrievevalue() here.
});
You should use empty() to remove the old options before appending the new.
You can see it on my sample Fiddle:
JS Fiddle Here
$('#select2').empty().append(Weapons);
On my aspx page I dynamically create html controls on client side using javascript. For example, after page load you can click button in a browser, by clicking button html input and select elements appear. You may click once again, and this elements (input and select) will added again. So, you can create so many inputs and selects as you want (all this using javascript, no postbacks)
After user created some inputs and selects and entered some information in it, he posted form. I want on server side to find all this dynamically added elements and perform some actions depends on values in this controls.
How can I find dynamically added elements, and what is the best and elegant way to achieve this?
Thanks in advance.
In the Javascript that creates the new elements, increment a counter each time an element is created. Add the value of the counter to the name of the input element so each element has a unique name.
Add the final value of the counter to a hidden form field when the form is posted.
In your server side code, create a loop that starts at zero and continues until you have reached the value of the counter. Within the loop, fetch the posted value of the corresponding form field.
When you add the elements, assign unique IDs to them, and then retrieve their values using Request.Form["UniqueIdHere"] (C#) or Request.Form("UniqueIdHere") (VB.NET).
Create a loop that loops through each input and select object, that grabs the name/id of the current object and its corresponding value. Then add those items to an array and once the loop is completed, pass those values to your aspx file.
You can view an example with this approach at: http://jsfiddle.net/euHeX/. It currently just alerts the values, but you could easily modify it to pass the values as a parameter via ajax to your handler aspx file. The code will add new inputs or select boxes based off of the input provided. This would of course be modified to reflect your current setup.
HTML:
<div id="dynamic"></div>
<input type="button" id="submit-form" value="Submit>>">
JavaScript (using jQuery):
function createInput(type){
for(var i=0; i<5; i++){
if(type==0){
var obj = '<input type="text" id="'+i+'" class="dynamicContent">';
}else if(type==1){
var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>';
}
$("#dynamic").append(obj);
}
}
function getContent(){
var inputArray = [];
$(".dynamicContent").each(function(k,v){
var o = $(this);
var oType;
if(o.is("input")){ oType = "input"; }
if(o.is("select")){ oType = "select"; }
var oID = oType+o.attr("id");
var oValue = o.val();
inputArray.push(oID+'='+oValue);
});
alert(inputArray);
}
$("#submit-form").click(function(){
getContent();
});
// Set type to 0 for input or 1 for select
var type = '1';
createInput(type);
If you're using jQuery you can use .live() to achive this like a peace of cake!
http://api.jquery.com/live/
I don't know if your controls will survive the postback the way you're creating them, but a good technique for accessing dynamically generated controls (assuming that you've figured out how to persist them) is to do something like the following:
Add a panel to your page. Add your dynamically created controls to this panel.
In the OnClick event handler (or other method), do something like the following:
foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>())
{
//put code here
}
foreach (TextBox txt in Panel1.Controls.OfType<TextBox>())
{
//put code here
}