Develop Reference

Input value not passing to URL

I have a total of two input values. Only one value passes to the url of the next page, but both should. What's causing this?
JSFiddle: http://jsfiddle.net/p8dCC/
HTML:
<!--form action="device" onSubmit=" get_search(); return false;" id="search-form-4" method="get" target="_top"-->
<div class="fix">Brand</div>
<input class="inputs" type="text" id="search_id" name="q3" placeholder="Send this" required="required" />
<br/><br/>
<div class="fix">Model</div>
<input class="inputs" type="text" id="search_id" name="q4" placeholder="And send this one too" required="required" />
<br/><br/>
<input id="search-button" class="" type="submit" value="continue" data-target="http://www.google.com/?item-description" />
<!--/form-->

You have two elements with the same id in html. So when you do this $('#search_id').val() only one of them will get evaluated and not both. Ids are supposed to be unique

After testing your code in a test page, I found that both inputs were in fact being passed through the URL.
You have commented out the form tags which I'm not sure if you did just for purposes on here.
kjs is correct as well, though using the same id would only effect the HTML. Using get as the method would bypass this issue as it would be passed the unique "name" attribute.

A form tag is required if you expect the html submission mechanism to work correctly on its own.
In the Javascript you posted though, you are treating document.location as an html element, wrapping it with jquery, then trying to use jquery's attr method on it. This won't work. Just access "location.href" directly without using jquery.
Additionally, as pointed out by another answer, your ids should all be unique.

Is "name" attribute mandatory in <input>, <textarea> and <button> elements?

Is "name" attribute mandatory in <input>, <textarea> and <button> elements? Or maybe we can use id or class instead?

If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.

Name is not a required attribute. A small quote from the HTML spec:
The name content attribute gives the name of the form control, as used
in form submission and in the form element's elements object. If the
attribute is specified, its value must not be the empty string.
Notice the "if" in the quote, indicating that it is not required, from a standards perspective.
However, if the input is used with the browsers standard form submission, you won't be able to retrieve the value of the input on the server-side, if you don't have a name to refer to.
If you only need to retrieve the value on the client using JavaScript, then you can use an id, a class, or any other means to select the given input - in that case you can leave the name out if desired.

name is what gets sent to php scripts for processing so for example $_POST['Telephone'] when used as <input name="Telephone" type="text">. Not required unless being used for processing really.

No its not, but generally you would want it.
Try this
<?php
foreach($_GET AS $key=>$val)
{
echo "name '$key' has value '$val'<br>";
}
?>
<form>
<input type="text" name="abc">
<input type="text" id="a">
<input type="text" class="b">
<input type="text">
<input type="submit">
</form>

getElementByID Not working because field is in some sort of frame, how do I access it?

Please go to this page real quick and hit the login at the top right:
Here's the link: http://forums.gamesalad.com
I'm trying to pre-fill these two fields that pop up. They seem to be in some sort of frame. I am unable to access the fields using getElementByID (or any getElement for that matter). How can I access these two fields using javascript?
NOTE: (don't worry about firing the javascript, just getting access to the fields).
Here's my current code:
document.getElementById('login-dialog-email').value = 'the user name';

If you look at your HTML in a debugger, like the Chrome Debugger, you'll see that you have two instances of the input elements with id="login-dialog-email".
The W3C spec says that only one instance of an id attribute can be used in a single HTML document, and browser vendors implement this spec in a manner where the behavior is considered to be undefined if more than one id attribute of the same value is on the page.
In my experience, this really only affects the second instance of the element with said id, and if you do a search for login-dialog-email and examine which element gets highlighted, you'll see that the second instance is the one that represents your form.
Remove the first instance, or use a unique id, and then you'll be able to target the element.
The first instance of this login field appears to be part of a template that is hidden on the page.
<div id="login-form-template" style="display: none">
<form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
...
<li class="email">
<label for="login-dialog-email">
Email:
<input id="login-dialog-email" name="emailAddress" type="text" value=""></input>
</label>
</li>
<li class="password">
<label for="login-dialog-password">
Password:
<input id="login-dialog-password" name="password" type="password" value="">
</label>
...
The second instance of this field actually appears inside the fancybox, which is where the actual HTML is located that you are trying to target.
<div id="fancybox-content" style="border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; width: 300px; height: 233px; "><div style="width:300px;height:auto;overflow: auto;position:relative;">
<form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
...
<li class="email">
<label for="login-dialog-email">
Email:
<input id="login-dialog-email" name="emailAddress" type="text" value="">
</label>
</li>
<li class="password">
<label for="login-dialog-password">
Password:
<input id="login-dialog-password" name="password" type="password" value="">
</label>
<span>
...
Thus, even if the site owner were trying to target these fields from the page, he/she would have the same problem.
The solution to this problem is to use className attributes within any template. This ensures that all of the fields can be targeted via DOM methods.
However, this doesn't mean that you can't still target the elements:
JavaScript:
document.getElementsByClassName("email")[2].
getElementsByTagName("input")[0].value = "test#example.com";
jQuery:
The site is using jQuery, so you may also be able to use this:
$('input[name="emailAddress"]').val( "test#example.com" );

you have the same id login-dialog-email for password and email input box. javascript is confused when you try to assign value. Assign different id's and you are good to go.

Onclick Submit form Javascript with image buttons

hey, well I have this form
<form method="POST" action=''>
<input type="hidden" name="op" value="download1">
<input type="hidden" name="usr_login" value="<TMPL_VAR usr_login>">
<input type="hidden" name="id" value="<TMPL_VAR file_code>">
<input type="hidden" name="fname" value="<TMPL_VAR file_name>">
<input type="hidden" name="referer" value="<TMPL_VAR referer>">
<div class="premium-download"><input name="method_premium" value="<TMPL_VAR lang_premium_download>" type="image" src="images/premium-download.png" alt="<TMPL_VAR lang_premium_download>" border="0" /></div>
<div class="free-download"><input name="method_free" value="<TMPL_VAR lang_free_download>" type="image" src="images/free-download.png" alt="<TMPL_VAR lang_free_download>" /></div>
</form>
How can I submit the form from the image inputs (see the last two fields)? Right now they are set as image type and I understand that those will not submit the form by default. Could anyone help? I was told to do it with javascript :D

I initially misread your question. As already noted, <input type="image"> elements do submit forms. However, if you're looking for more versatility than image inputs, my answer still applies.
I was told to do it with javascript
Don't, use <button> elements instead. <button> elements work like <input type="button">, except that they can be styled to have no border, be transparent, and they can contain other HTML. For example:
<button type="submit" name="method_premium" value="<TMPL_VAR lang_premium_download>">
<img src="images/premium-download.png" alt=alt="<TMPL_VAR lang_premium_download>" />
</button>
Style the button with CSS (border:none; background-color:transparent;) and you're good to go.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
The BUTTON Element - W3C

Input elements with "type" set to "image" do indeed act (almost) exactly like "submit" inputs. It's "almost" exactly because you also get the coordinates of the mouse click, and you don't get the "value" of the input element.
If you wanted the clicks on the "image" inputs to submit the values, the simplest thing to do would be to have a couple more hidden inputs.

I don't know what you are trying to achieve, but you could submit the form using JavaScript. It might be best to use the BUTTON as suggested by #Andy E:
<form method="POST" name='myForm'>
...
...
<script lang="javascript">
function SubmitForm()
{
document.forms['myForm'].submit() ;
}
</script>

Is it possible to use JavaScript to submit an unnamed form from outside an iFrame?

I know that may sound silly, but I'm trying to submit a form on a page inside an iFrame, from the parent site.
Here's an example of the form:
<form action="/add_email" method="post">
<div class="field">
<label for="newEmailAddress" style="width: auto">Add new email address</label>
<input type="text" id="newEmailAddress" name="email" value="null" class="text-field" />
<input type="hidden" name="__app_key" value="null"/>
<input type="submit" value="Add address and send activation email">
</div>
</form>
As you can see, the Submit button, and the form itself both lack a proper name or id, this is not something I have control over. (It's on an external website.)
Any suggestions?

When no name is given to the form then form has the default form name in a form of array
ie form[]
hence one can create as many forms in script, the default name's index will increase.
Hence one can use it accordingly.

Since it is an external website — no. The Same Origin Policy prevents it.
If it was the same website then you could communicate across frames and then access the form via its numerical index in the forms object (but you would also likely be able to give it an id and use that instead).