Javascript PDF form Radio Button Show/Hide - javascript

I searched and couldn't find any results pertaining to javascript / PDF form applications so I apologize if there are actual results out there that I may have missed.
I have 5 radio buttons, all sycronized for if one is turned on, rest are turned off. I'm trying to enable, based on which is selected, for which form (Cells) to show on a pdf.
This is currently where I stand. The radio button for this script is set to mouse-up, and when turned on Text2 shows, but when a separate radio button is selected Text2 still shows. Only when I re-selected the first radio button does the Text2 disappear.
I'm looking to show only particular cells based on what radio button is selected, and the rest are hidden.
If someone could help lead me to a small example and I could apply from there. Thank you
if (this.getField("Text2").display == display.hidden)
{
this.getField("Text2").display = display.visible;
}
else
{
this.getField("Text2").display = display.hidden;
}
edit: grammar
update: This is what i'm necessarily trying to accomplish
if (this.SELECTED("Choice4")){
this.getField("Text4").display = display.visible}
else{
this.getField("Text4").display = display.hiddenl}
update2: does not work either
if(document.getElementByI("Choice3").checked){
this.getField("Text4").display = display.visible}
else{
this.getField("Text4").display = display.hidden}

The trick is when toggling a button in a set of radio buttons (or checkboxes behaving as radio buttons) is to first hide all fields which could be shown, and then show the ones matching the selection.
This can be made a lot easier with hierarchical field names. All fields which can be shown or hidden have the same stem in their name, and the second element matches the option, as in
showfield.option1.myfield
with
this.getField("showfield").display = display.hidden
you make all fields being part of the showfield group hidden, and with
this.getField("showfield.option1").display = display.visible
you show all fields in the option1 group within the showfield group.

Related

How to click on <select>?

I need to choose the option in select field. I have a code to do this however there is one thing. After clicking the select and choosing the proper option, button appears. My code picks the option but button does not appear. I'm working on automation of one website. I tried to find the way to click the select field but none of the solutions worked. document.getelementbyid.click() as well. Appreciate for any hints.
function robber(){
var final = 0
var dropDown = document.querySelectorAll("select[id='singlerobbery-select-robbery'] option");
dropDown.forEach((opcja) =>{
if (opcja.innerText.includes("100")){
final++;
}
});
var choose_rob = document.querySelector("select[id='singlerobbery-select-robbery']").selectedIndex = final;
document.querySelector("button[class='btn btn-inverse']").click(); // this is the button I need to click afterwards
};
Apologise for answering my own question, but due to many responses I've decided to sum it up in new post. What I'm trying to do is to select the option from select menu and click the button. Screen shoot what I need to obtain
My above code replaces the content in select but to get this buton I must click on the select field to make it pops out.

Display first value unless checkbox is checked, then calculate

So I spent many hours working on a dynamic Booking form. I manage to get the hide and show functions to work as I want and that the values change according to the chosen Radio button. For the next step I want to calculate the values. But I want to first display the Value of the Radio. Then when the user checks a checkbox, add the value of each checked checkbox to the value of the Radio. I managed to get the function of adding all checked boxes and add that to the radio value.
var sum1;
$('input[name=price]').change(function() {
sum1 = $('input[name=price]:checked').val();
});
$('input[name=custompak]').change(function() {
var sum2 = 0;
$('input[name=custompak]:checked').each(function() {
sum2 += parseInt($(this).prop('value'));
});
document.getElementById('finalprice').innerHTML = parseInt(sum1) + parseInt(sum2);
});
This is the JSFiddle of the Complete form:
https://jsfiddle.net/mullern/2cr91vvq/2/
FYI, the rest of the JS code changes the value depending on the Customertype selection and it also hides the checkboxes of the products already included in the bundle.
My goal is to Display the price of the Packages shown in the radiogroup when one is selected. Then when one or more checkboxes are selected, that value gets added to the value of the radiogroup selection.
On a sidenote I was also not able to figure out how to display the Value when the page is loaded so the user sees the default selection value when they open the contact form.
I hope this isn't to confusing and thank you in advance for any help on my problem.
Take a look at this [fiddle][1], Try clicking on radio button under packages. You are suppose to write code on click event. I also tried to minimize your code by calling method , check line 13 to 22.
[1]: https://jsfiddle.net/2cr91vvq/3/

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

How do I referance and return a response based on answer of a radio button which is included within another radio button?

So far I have found out how to create radio buttons, hide the response until a selection is made and finally display the selection along with another radio button (this secondary radio button is where I'm stuck). Here is what I'd like:
A user selects yes/no:
If Yes selected
Text appears below the radio buttons asking another yes/no question which results in more text based on answer and yes/no
If No selected
Different text appears below the radio buttons asking a different yes/no question which results in more text based on answer and yes/no
I have been able to create the first yes/no which brings up another question and a yes/no radio button but I don't understand how to make responses for the second yes/no the one that comes up with the result of the first radio button.
I'm so sorry this is confusing but I don't know of any better way to explain it.
Here is my code in jsfiddle: http://jsfiddle.net/richerdk/a9fJ5/
I'm assuming I need something like this:<div id="div1" class="tab">
<p>Why do you think the sky is blue, is blue your favorite colour?</p></div> The issue is I don't know what the <div id=" " class=" "> should be.
The Yes/No buttons are located on lines 35,38,45,48 in the html portion of the jsfiddle and look like this <input type="radio" name="another" value="anotherNo" />
My question is how do I get the radio button included in the response of the first radio button selection to display information based on its selection (yes or no).
Here's a fork of your jsfiddle, with only the radio buttons and using jQuery
http://jsfiddle.net/Lfxry/
What I did, was simply bind an event handler to the change events of the radio buttons inside tabs
(function ($) {
$('#tabs').on('change',':radio', function () {
//read target id from data attribute
var targetId = $(this).data('target');
//hide all tabs
$('.tab').addClass('hidden');
//show the one you want
$("#"+targetId).removeClass('hidden');
});
})(window.jQuery);
Note that I am now hiding the previous question
There are a lot of way to improve the code. this is just a basic example

JQuery .prop(checked,true) not setting other radio buttons to false

I have a list of radio buttons that I update programmatically based upon a user's selection from a different list. This code properly finds the radio button that matches the selected item and selects it, but it doesn't deselect the previously selected radio button.
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).prop("checked",true).checkboxradio('refresh');
}
});
All of the radio buttons in the major_groups div have the same name, so I thought selecting one would unselect the others. I got it to work by looping through the buttons again and refreshing all of them, but this seems inefficient.
Also, will .prop("checked",true) fire the change event?
What about just triggering a click event on the radio button, something like this:
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).click();
}
});
Your each loop will only call refresh on the radio with specific value, and will not be called on others in the same group. The actual inputs of the group will be automatically unchecked but your plugin won't recognize the ones that are deselected unless you refresh them too.
Try this:
var $radios=$('#major_groups input[type=radio]');
/* first check the appropriate radio*/
var $radioToUpate=$radios.filter(function(){
return this.value=group_name;
}).prop("checked",true);
/* then refresh all radios with same name*/
$radios.filter('[name="'+ $radioToUpate.attr('name') +'"]').checkboxradio('refresh');
A link to the plugin docs might be helpful to see if plugin has methods to handle the property change that might take care of the whole group

Categories