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

JQuery, Creating form inputs via button not working with form list

so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue

alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.

Is it possible to Clone input field values in real time in a Cloned DIV? And how?

I have a cloned div that has input fields and dropdowns. The problem is that when the information is entered the clone does not update without refreshing the browser. I would like the clone to update on keyup or down. It being a Cloned div takes away the normal solutions.
Is this even something at is possible?
Updated And how?
$(function(){
var $dataAreaClone = $('.information_entry').clone();
$('.read_only_data_area_C').html($dataAreaClone);
});

I made a basic example in a fiddle. Typing in one master text input will update as many clones as you make of it using keyup: http://jsfiddle.net/3mW8u/

Short answer: yes.
Yeah I know I could have put it in a comment but it fully answers the question. :))
Edit: You can add a listener, and just copy the value on the new divs.
To add listener you can do something like:
$('#mainInput').onkeyup(function(el){
// Update values here
$('.clonedInput').each(function(subEl){subEl.value = el.value;});
})
Note: For simplicity (in the example) I considered the main input has an id, and cloned inputs have same class.

Store table data using localstorage and passing it to a form

Right now I am trying to use HTML5's localStorage API to grab a value from a table, and pass that value into a form.
For example, when a user clicks on "Sign Up Today" on this form: http://yft.ac/upcoming-workshops/, I want the information from the given row (Date, Time, Location), as well as the heading above it (ex: YFT Admissions Insights) to be stored, and then displayed in the field "Workshop Interested In" on this page: http://yft.ac/contact-us/.
I'm really not the best with JavaScript but here is what I have so far:
Contact Us:
$('input#workshop').text( localStorage.getItem('workshop') );
Upcoming Workshops Page:
$('body').on('click', 'a.button', function(){
var index = $(this).parents('table').index('table');
var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text();
localStorage.setItem('workshop', cur_workshop);
});
I just tried to piece this together so the above code isn't working, but I hope that it is a good jump start for somebody that might be more well-versed in JavaScript.

You have few problems in the page.
Modernizer library is not included - you are using Modernizr.localstorage in your code
The localStorage.setItem('workshop', cur_workshop); code is added before jQuery library is added to the page - since this code used jQuery move it after inclusion of jQuery
Look like somewhere you/wordpress is calling jQuery.noConflict() - so $ does not refer jQuery anymore so use jQuery instead of $ in your code

Some quick thoughts. I believe your localStorage code should work....
But I think what might be happening is the browser is loading the contact page before you store the values in localStorage.
What you may want to do is remove the hyperlink and bind the click handler to a div, span or just a button element instead. In the click event handler use window.location = "xyz"; after you set the value to localStorage.
Again that may not be the real answer.. but try on a non hyperlink element and see. You can also do e.preventDefault; then store the value then do the window.location thing. That is sort of a progressive enhancement way to do it.
As for the localStorage I would encourage you to try to store the values in a JSON object instead of several items.
localStorage.setItem("workshop", JSON.stringify({'date' : '9/2/2012', 'time': '8:30AM', 'Princeton, NJ'}));
var workshop = JSON.parse(localStorage.getItem("workshop"));
hope this helps!

grabbing the data from a field as it is typed

I am wondering what I would use to grab data from a form as it is typed. What I have is some form Input fields and they are going to be filled with numbers. I want to take the input from them on the fly add them together and put them inside another div on the fly. The idea is the user is entering different amounts and sizes of bottles into a form and I want to show them what their total is in bottles as they type it. Would I be doing this in ajax? what would help me get the data as they type it and place it back on the page at the same time.

You could use jQuery:
$(function() {
var output_element = $('#output_ele');
$('#the_input_id').keyup(function() {
var their_input = $(this).val();
output_element.text(their_input);
// Now go off and do whatever you wanted with AJAX and their_value
});
});

Look at the jQuery library at http://www.jquery.com to start with. That wraps up a whole bunch of browser inconsistencies into a manageable solid set of tools.
Specifically, have a look at the keyboard events, and the functions for manipulating dom elements. You'll see that you can write a key event handler for your fields which would perform your calculation and write the results into any other element you like.