We Keep Coding

capture form data with plain js and store in reusable variable

Say, I have a simple form:
ie. Just for example, although will be a lot larger.
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
I would like to make it so every time a user 'submits' the form, rather then post it with php. I would like to use vanilla javascript to take the form contents that were inserted by the user, and store all content in a javascript variable with the naming convention similar to:
var = submission1
var = submission2
var = submission3
..and it would have all user submitted form field contents. Later down the line I could grab the form field contents via variable. I want to accomplish this with pure vanilla js. No php nor js libraries, and I don't want to alter the mark-up either.

Merging search terms from 2 separate input fields

So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home

You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.

Auto submit or clicked form based on referrer url

I want to make a form auto click based on referrer site..
My url is http://example.com/from/
<form action="" method="post">
<input name="name" value="Jhon" type="text">
<input name="email" value="address#example.com" type="email">
<input name="age" value="28" type="text">
</form>
What I would like, is that when a user come from a certain URL the form will automatically be submitted (auto-clicked). However when the user comes directly to this page, or from a specific site (such as my own) the form will not be submitted.
Is it possible to do this?

Try using:
string = document.referrer;
For more information on this, you should see this for more information concerning this.
After you have gotten the URL, you need to decide what to do with it. You can use document.ready:
$( document ).ready(function() {
//logic
});
Make something that x has the value of "example website" then do:
$("#form_id").submit();
Else do nothing.
Also, this might be a duplicate of this except that this user purely needs a function to run on the document being finished. Finally this solution needs Jquery.

You should use "match" function to submit the form when the user came from any page of the site anything.com
$(document).ready(function(){
var uri = document.referrer;
if (uri.match(/anything.com/)){
$("#yourForm").submit();
}
});

Something like this?
if (document.referrer == "certain_url")
$("#form_id").submit();

What is document.f.q.focus?

What is document.f.q.focus?
Is this a java script code or not
whether I can use document.f.id.value?
what is the difference between this and document.getElementbyID()

The HTML looks like this:
<form name="f">
<input name="q" />
</form>
In such a case, document.f refers to the form, and .q refers to the input element of that form. .focus() places the focus on that input.
It's worth noting that such code is unnecessary now that HTML5 is around:
<input name="q" autofocus />

It needs a form to make it work, Try this:
<form name="f">
<input name="q" value="test" type="text"/>
</form>
javascript:
document.f.q.focus();
document.f.q.value = 1;
Here is DEMO

The id attribute inside a html is meant to be unique.name can be an array(file[]) and with html5 should be used only on form elements.
html5 removed the support of the name atrribute on most elements except form elements.
id and name are 2 different things.
document refers to the whole html inside a page.
to get an element by it's id you need to call document.getElementById(id);
to get an element by it's name (considering html5) so inside a form
you call document.forms[0].name. form[0] refers to the first form inside the document
In your case the form has also a name so appart from html5 the code is correct.
form is called f,input is called q. thats why document.f.q returns the input field.
if you want to add an id to your input field then you have to add an id:
<input name="q" id="q">
to get the element:
document.getElementById('q');
to return the content:
document.getElementById('q').value;
And focus(); is a native function that points the focus to the choosen element.
In your case when you load the page you will see the blinking pointer inside the searchflied.

Reading and appending form data live with javascript

I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:
I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.
I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input
I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.
Heres what the form looks like:
<form action="submit.php" method="post">
Enter Title:<input type="text" name="title" size="20"><BR>
Enter Class Code:<input type="text" name="class" size="20"><BR>
Enter Base Number:<input type="text" name="base" size="20"><BR>
Enter Dash Number:<input type="text" name="dash" size="20"><BR>
<input type="submit" value="Submit">
Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.
Thomas

From what I'm understanding this should do what you describe.
$('#yourForm input').bind('keyup', function(e) {
var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
$('#preview').html(docNum);
});​
For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.
http://jsfiddle.net/nuY2M/

Include this html where you want the document number preview to display:
Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>
Add this script to populate the values:
function updateDocNumPreviewPart(fieldName)
{
var preview = document.getElementById(fieldName + "Preview");
var field = document.forms[0][fieldName];
preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
updateDocNumPreviewPart("class");
updateDocNumPreviewPart("base");
updateDocNumPreviewPart("dash");
}
Finally, add some code to your form fields to call the script:
<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />