How to click on <select>? - javascript

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.

Related

Javascript PDF form Radio Button Show/Hide

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.

Dropdown list using Jquery menu list disappear when click on drop down list button after postback

I have strange issue. I am using few editable cascading dropdownlist controls inside updated panel on my asp.net page. These are also using JQuery for autocomplete feature and these dropdowns loading from database. It works ok very first time and user can select facility and click save button and save facility and page data. After saving, user click new button to enter a new entry. When click new button it keeps all the previous values inside dropdown selection. When try to change facility value and click on dropdown button to open the list and select value but list items/menu inside dropdownlist appears and disappears suddenly so that user is unable to select any value. Not sure exactly what causing this. I have checked if there is any memory leak or viewstate causing this but everything seems fine.
Did anyone experience same issue? Any help will be appreciated. Let me know if require additional information.
Thanks in advance.
Place Your jQuery code within:
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
//Here Your $(document).ready(function () {
}
}

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/

Jquery: Change select box value and and activate a click state

So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});

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.

Categories