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/
Related
i have used reactive forms, so based on selection of item in the right hand side, left side form is getting replaced with the particular row values.
Now instead of changing the row values by manual click, if i click on previous and next it must take up the previous value from list and vice versa, if the selected value is the first in table then previous must be disabled and next must be enabled, if selected value is last then next button to be disabled. I searched so many things but nothing helped me to solve my issues.
DEMO:
DEMO
TS:
previousValue() {
--this.userDetails.id
}
nextValue() {
++this.userDetails.id
}
If I understand your case correctly - it's your solution: https://stackblitz.com/edit/github-ck3u8u-3lwowg?file=src%2Fapp%2Fapp.component.ts
then based on userIndex value and the length of the list you can disable buttons.
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.
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.
Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find
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