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.
Related
Here, I've three radio group in a single page. But in the entire page I want to select only one radio option. Like if I'm selecting Monday then Tuesday selection should be unchecked automatically. How can I proceed with the logic, below logic is not working as expected.
sample JSON :
{
report:[
{
day:'Monday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Tuesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Wednesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
}
]}
JS code
for(var I=0; I<reports.length; I++){
var radios = document.getElementsByTagName('input')
if(radios[I].type === 'radio' && radios[I].checked){
document.getElementById(radios[I].id).checked = false
}
If you're able to create radio buttons in SurveyJS, you should be able to give the button group a name, so there would be no need for any additional JavaScript. Check out their documentation for an example.
Looks like the sort of nested structure you have for the buttons could be achieved with something like a dynamic panel or cascading conditions in SurveyJS. You should be able to render the available time slots dynamically with "visibleIf" based on the selected day.
I would definitely dig around the documentation of SurveyJS to find a solution there rather than hacking your way around it. But solely as an exercise, the problem in your current code could be that you're selecting a button by ID, which will not work correctly if you have tried to give the same ID to multiple buttons. After all, you already have the target button as radios[I], so you could just use radios[I].checked = false. Or the issue could be that you're unchecking the selected button AFTER the new selection has been made, which might actually uncheck the button you just clicked. Hard to say without additional information, but in any case, looping your inputs based on a value that might be something else than the actual number of inputs (you're using reports.length) is probably not the best idea, since that value might be different from the number of inputs in your form, which would mean that not all of them are included in the loop. Here are a couple of examples of what you could do instead:
// Get all radio buttons
const radioButtons = document.querySelectorAll('input[type="radio"]')
// If you need to uncheck the previously selected one (don't do this if you can avoid it!)
radioButtons.forEach(radioButton => {
// Use a mousedown event instead of click
// This gives you time to uncheck the previous one before the new one gets checked
radioButton.addEventListener('mousedown', () => {
// Get the currently selected button and uncheck it
const currentlySelected = document.querySelector('input[type="radio"]:checked')
if (currentlySelected) currentlySelected.checked = false
})
})
// You can add further options to the querySelector, such as [name]
// This gets the currently selected button in the specified group
const checkedRadioButton = document.querySelector('input[type="radio"][name="group-name"]:checked')
Here's a fiddle demonstrating this sort of "fake" radio button functionality (without a "name" attribute).
You can give all these radio buttons the same name, then one radio only will be checked.
I was using select Person_name = $('#selectedPerson').val()
person_name.length is showing 2 if selected 2 values.
Now i have changed to check boxes which is in table. If i am using person_name= document.getElementById("selectedPerson").innerText, person_name.length is not working. It is taking length of the content. I want to count of the person and it is value which i am selecting in check-boxes.
Thanks,
Raja.
Side note: an ID should only ever be applied to one element, so you want .selectedPerson not #selectedPerson if it's going to select two things.
var people = $('.selectedPerson');
var count = people.count;
var name = people.text();
I have the following side-by-side question in Qualtrics.
Picture of question
The dropdown menu in has the same four statements as presented in the Statement Choices and 'Dummy Column'. I am trying to get the default choice for the dropdown to be the value in the 'Dummy Column'.
Using the following code, I can get the dropdown value to equal the Statement Choice column:
// Default Choice
var $embedded = [];
var $length = $jq(".SBS2 select").length;
for (var i=0;i<$length-1;i++)
{
$embedded[i] = $jq(".Choice .c1").eq(i).text().trim();
$jq(".SBS2 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected');
}
$jq('.SBS1').hide(); / Hide Dummy Column/
I am struggling to update the code to pick up the value in 'Dummy Column' instead. I have tried updating ".Choice .c1" to ".SBS1 input" but it just selects the last value in the dropdown list for all rows.
Can someone help with what I am doing wrong?
Thanks in advance
Two things:
1. Your values are in text input fields, so you need to get the values of those fields.
2. Your selector needs to find the text input fields, so '.SBS1 input' is correct.
Thus, change your $embedded[i] = line of code to this:
$embedded[i] = $jq(".SBS1 input").eq(i).val().trim();
It seems you are doing it the hard way though. Why not just pipe your default values into the $embedded array to being with instead of creating a dummy column that you then have to hide?
var $embedded = ["${e://Field/ed1}".trim(), "${e://Field/ed2}".trim(), etc. ]
You could then delete the $embedded[i] = line altogether.
P.S. This isn't PHP where you need $ in front of variables...it actually makes it a bit confusing at first glance. Also, no need to assign jQuery to a variable, just use jQuery.
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
I'm trying to build some kind of currency converter and I have two select menus with the list of currencies.
I want to create a button that when clicked, it will switch the selection between the "from" select menu and the "to" select menu.
how do I implement it using the select menus I already have?
I believe you'r looking for a swap behavior.
http://jsfiddle.net/brentmn/D55Dm/
$(function(){
var $sel1 = $('#currency1');
var $sel2 = $('#currency2');
$('input[type=button]').click(function(){
var val1 = $sel1.val();
var val2 = $sel2.val();
$sel2.val(val1);
$sel1.val(val2);
//jqueryui
//$sel2.val(val1).trigger('change');
//$sel1.val(val2).trigger('change');
});
});
Something like this?
$("#button").on("click", function() {
var from = $("#from").val();
var to = $("#to").val();
$("#from").val(to);
$("#to").val(from);
});
I'd really do it with less code than that, but have done it like that for readability.
Assuming I've understood you correctly, you want a button that will swap the values of two select elements. If that's right, try something along these lines:
$("#someButton").click(function() {
var elemTo = $("#to"),
elemFrom = $("#from"),
toVal = elemTo.val();
elemTo.val(elemFrom.val());
elemFrom.val(toVal);
});
It simply gets references to the two select elements (assumed here to be #to and #from), gets the value of one of them, replaces the value of that one with the value of the other, and then replaces the value of the second with the stored value from the first.
Note that this assumes both select elements have the same option values. If an option is present in one select but not the other, it would not work.
Here's a working example.
If you dbl click on one item in 'From' section , it will get selected be appended to the 'To' section.
$("#selectFrom").dblclick(function(){
$selectTo.append($selectFrom.children(":selected"));
});
Which all functionalities you want??