Develop Reference

How to fill in Google Form's drop down and text inputs with Tampermonkey?

I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).

Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH

First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?

I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.

// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

Adobe Livecycle Javascript Overall Logic for Simple Show Hides

I'm attempting to use a large amount of simple show/hide scripts in Adobe Live Cycle to combine a few forms into one. I'll be layering text entry fields on top of each other and have them all start as invisible (using Live Cycle's invisible settings). The showing/hiding of these objects will be controlled through use of a drop down list.
The basic task would be:
-Click an item from a dropdown list.
-Initiate a show of relative invisible elements on the page based on the
raw value of the item selected.
-If user changes dropdown value, hide previously displayed data and show new
corresponding data.
Can this all be accomplished from inside the dropdown list itself? I've inherited this project from a previous developer, so I'm cobbling together some of his code and attempting to get a grip on what actually needs to be done so that I can accomplish the task. Here is an example of what the show hide structure looks like:
xfa.resolveNode("form1.#subform.indPaymentOptions").selectedIndex = 0;
xfa.resolveNode("form1.#subform.VendPaymentOptions").selectedIndex = 0;
xfa.resolveNode("form1.#subform.Display_Field_Pay_Types").rawValue =
"Please select an option from the 'Select type' drop-down menu above.";
taxReportable.rawValue = "";
AccountCodesDynamic.rawValue = "";
if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 2) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "visible";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "hidden";
}
else if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 3) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "hidden";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "visible";
}
else if (xfa.resolveNode("form1.#subform.payeeType").rawValue == 1) {
xfa.resolveNode("form1.#subform.indPaymentOptions").presence = "hidden";
xfa.resolveNode("form1.#subform.VendPaymentOptions").presence = "hidden";
}
All the code above seems pretty straightforward, but there is also some code in the initialize section of the document:
if (xfa.resolveNode("#subform.RadioButtonList[2].ind").rawValue == 1)
indPaymentOptions.presence = "visible";
else if (xfa.resolveNode("#subform.RadioButtonList[2].vend").rawValue == 2)
vendPaymentOptions.presence = "visible";
I'm curious to know if this sort of thing is necessary. If it is, could someone please explain to what extent such code is needed in the initialize section of the document?
If it isn't necessary, is the show/hide coding that I pasted at the top of this post sufficient for what I'm trying to accomplish?
I've tried slogging through Adobe's livecycle documentation, but it is difficult to find a broad overview of what is necessary, so I'm having difficulty making use of it. Any help is greatly appreciated. If there is a resource I'm missing I would love to teach myself how to do this. Also, this is my first post here. I did my best to follow the submission guidelines in the FAQ, but apologies in advance if I violated any submission guidelines. Thanks.

The code for the drop-down looks pretty straight forward and should be fine (although you will probably find after using LiveCyle for a while, even some of the simpler tasks with logical code don't work).
The code in the initialize event is actually for a radiobutton group rather than the drop-down so it's possible that the functionality of the visible forms is actually driven by more than just the drop-down.
What you tend to end up with in LC is the code for a change or validate event being repeated in the initialize event so that when the form opens it displays/processes correctly. This can of course be worked around by invoking an event with the code from the object's other eventsevent. eg. in the Drop-down initialize event you would hold the dropdown code and in the change event of the dropdown you would use this.execEvent("initialize") which would call the code when the change event is triggered.
It's a little difficult to get a view of what's happening in your particular case without seeing the form but let me know if anything isn't clear or I can help with anything else.

Any issues with hiding a select list behind a div and selecting it with JavaScript?

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.
I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.
I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.
Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks
UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.
$('div#cover').click(function(){
$('#select').focus();
});

Your idea on hiding the select behind the div looks OK
I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)
The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility

Code is from here: jQuery - function runs fine when fired on div click, but not on page load
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();