We Keep Coding

Chrome extension to autofill additional form elements that appear after selection is made

I'm building a Chrome extension that auto-fills a form. The first field on the form triggers additional fields to appear after it is filled out. I'm able to successfully field out the first field, but am struggling to fill out the sub fields.
To fill out the first field I use this code:
document.getElementById('theElementID').focus()
document.execCommand('insertText', false, 'theTextToAutoFill)
Here are a few things I've tried:
Use that same code (updated with the correct IDs) for additional form fields, but document.getElementById returns null because those fields don't exist when the page initially loads
Refresh the page after filling out the first form using reload(), but it's refreshing the entire page (not just the section after the first field). Is there a way to just reload a section of the page?
Add an event listener to the class the first field is in (which also contains the sub fields). Wait until that class has been clicked to attempt to fill the subfields. See code below.
document.getElementsByClassName('theClassContainingSubFormFields')[0].addEventListener("click", function() {
document.execCommand('insertText', false, 'theTextToAutoFill)
});
Ideally, I'm looking for a solution that uses JavaScript.

Refocus input field after page gets refreshed in wicket

Is it somehow possible to refocus an input field after a refresh which was last focused before the page was requested?
I have a Wicket Form within my WebPage and in this Form there are quite some input fields (like text fields) the user can use to filter my data view. But when the user for example has the focus on the second input field and then clicks on 'go to next page' within the data view he loses the focus, but due to accessibility it is necessary to refocus the second input field.
My idea was to first tag the input field with jQuery with "regain-focus" when focused:
$("input").focus(function() {
$("input").removeAttr("regain-focus");
$(this).attr("regain-focus", "regain-focus");
});
Then on server update search for the element with the "regain-focus" tag - but that's the part, I don't know how to do that... - tag the corresponding component with "autofocus":
input.add(AttributeModifier.append("autofocus", "autofocus"));
and refocus with javascript:
$('[autofocus]').focus();

Since you have JavaScript experience it would be much simpler to do it completely client side: $(document).on('focusin', 'input textarea', function(event) {localStorage.setItem('focus:'+location.pathname, event.target.id)}) and then use jQuery.ready() based logic to read the entry and use it.

When your page DOM/elements change between requests/refresh/ajax calls, it is better to use a CSS selector using optimal-select to store just a unique identifier for the element and use a JQuery selector to find it again for focus setting. I used this in the NoWicket web framework to remember the focused element on ajax calls. Example JS code here.

Appending a bunch of check box inputs to a form before submission and then hiding them

For a form I'm building, I'm using a jQuery UI dialog to give the user a list of about 50 check box options. The text boxes get removed from the form completely when they're added to a dialog, so I have to clone and reinsert them to the form before submission so that all of the check box values will be submitted along with the form. The problem is that the checkboxes, when added back into the form, appear visibly. I'm just trying to make them invisible and still be able to submit the values.
I thought maybe doing something like prepend() might be a solution so that the user doesn't actually see the checkboxes, being all the way at the bottom of the form--but it still pushes the form elements down. So I'm looking for a means of appending the #states_container :input to the form without it visibly affecting the form in any way.
Code:
$('#submit_btn').click(function(e){
$("#form_submission").validate({});
if ($("#form_submission").valid()) {
$("#form_submission").append($('#states_container :input').clone());
$("form#form_submission").submit();
} else {
e.preventDefault();
alert("Please make sure all required information has been provided before submission.")
}
});

Create a div at the bottom of your form. Style it's display to none and give it a unique id.
<div id="checkBoxes" style="display:none;"></div>
When you go to clone the check boxes from your jQuery dialog set their location to:
document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;
This will place all of your check boxes inside an invisible div that will have no affect on your layout and will still be submitted along with your form. In addition if the need arises to repopulate that list of check boxes to make changes you can simply grab them from the div and place them back in the dialog box.

Submit hidden fields in a html form

For a basic HTML form, I would like to seperate the form into three tabs, each tab will contain certain fields, and when submit the form I wish all data in the three forms will be able to submit.
So I have a menu created by <ul> and <li>
<ul class="subnav">
<li class="subnav0 current">Tab1</li>
<li class="subnav1">Tab2</li>
<li class="lastItem subnav2">Tab3</li>
</ul>
and below this menu, I have three divs that represent each of the tab:
<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>
The input controls elements will be put into each of the tab divs. And the javascript in the menu nav bar will control which tab to display by call show() & hide() method of each div. (Using jQuery).
Now my problem is:
1) I want to be able to submit the whole form (all controls within three divs). However, html forms won't submit input controls within a displayNone div, which means I will only be able to submit the data within the tab which I am currently viewing but not the other two tabs.
2) I also want to do some javascript functions on hide elements when initialize the form in tab2 or tab3. However, since they are display:none, the javascript will not have any effect.
So is there any way that I can somehow hide the div, but also be able to submit the form and do any javascript operation on it?

According to the W3C display:none controls may still be sent to the server, as they are considered successsful controls
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated
submit button is successful. All "on" checkboxes may be
successful. For radio buttons that share the same value of
the name attribute, only the "on" radio button may be
successful. For menus, the control name is provided by a
SELECT element and values are provided by OPTION elements. Only
selected options may be successful. When no options are
selected, the control is not successful and neither the name nor
any values are submitted to the server when the form is
submitted.The current value of a file select is a list of
one or more file names. Upon submission of the form, the contents
of each file are submitted with the rest of the form data. The file
contents are packaged according to the form's content
type. The current value of an object control is determined by
the object's implementation.
If a control doesn't have a current value
when the form is submitted, user agents are not required to treat it
as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons. OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
For example:
<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
</FORM>
will still cause a value to be paired with the name
"invisible-password" and submitted with the form.
In any case if that doesnt seem to be working why not try jQuery serialize() or serializeArray() on each form and concatenate the values and ajax them back to the server.

On your first point, just because an input is display none, doesn't mean that it will not submit those fields.
On your second point, I don't quite follow. Are you saying that when you open one of the tabs, you want to do some action on the content? If so, then JQuery UI allows you to do this:-
http://jqueryui.com/demos/tabs/#event-show
Can you give a more complete example, including the form tag and some inputs?

How can I exclude HTML form radio button values from being submitted?

I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?

You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());

Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/