Develop Reference

What is this : document.reservation.submit(); supposed to do?

I am reworking on a code of an old developer and I'm trying to do a form for reservation.
I've looked across the whole code the only thing called reservation is the name and the id of the form.
Form who's is in style : display:none ...
So two question in one : First of all what the heck is supposed to do
document.reservation.submit(); Is it suppose to get the form by his name ?
Shouldn't it be something like document.getElementById('reservation').submit() instead ?
And my second question is : How the form can be sent if all the value are set to display:none I tough it couldn't work and if you want to hide them you shall use hidden property...
I need a bit of help on this guys pls :)
Form for beter comprehension :
<form name='reservation' action='http://xxxx/reservationFormAction.to' method="POST" id="reservation">
<input type="hidden" id="productLive" name="product" value="{$product.info.code}"/>
<input type="hidden" name="complementaryParameters" value=""/>
<input type="text" name="depCityCode" id="depCityCode" style="display:none" />
<input type="text" name="dateDep" id="dateDep" style="display:none" />
<input type="text" name="nightDuration" id="nightDuration" style="display:none" />
<input type="text" name="dayDuration" id="dayDuration" style="display:none" />
<input type="text" name="provider" value="{$product.tourOperator.code}" style="display:none" />
<input type="text" id="toProduct" name="toCode" value="{$product.info.toProductCode}" style="display:none" />
<input type="text" name="catalogCode" value="{$product.info.code}" style="display:none" />
{if $ecall}
<input type="text" name="reservationProfileChannelCode" value="ECALL" style="display:none" />
{else}
<input type="text" name="reservationProfileChannelCode" value="ADV" style="display:none" />
{/if}
<input type="text" name="nbAdults" id="nbAdults" style="display:none" />
<input type="text" name="nbChildren" id="nbChildren" style="display:none" />
<input type="text" name="nbBabies" id="nbBabies" style="display:none" />
<input type="text" name="productUrl" id="productUrl" style="display:none" value="http://www.xxxx.com/{$product.slug}_{$product.info.code}.html" />
<input type="text" name="homeUrl" id="homeUrl" style="display:none" value="http://www.xxxx.com" />
<span id="ageChild" style="display:none"></span>
<div class="update-search clearfix">

document.reservation gets the HTMLFormElement for the form with the name reservation. Then calling submit submits the form (without triggering the submit event).
So why not document.getElementById? That would also work, but document.reservation works because the document object gets various properties created on it automagically, including properties referring to forms by their name. This is covered in §3.1.3 of the HTML5 spec *(you have to scroll down a fair bit):
The Document interface supports named properties. The supported property names at any moment consist of the values of the name content attributes of all the applet, exposed embed, form, iframe, img, and exposed object elements in the Document that have non-empty name content attributes, and the values of the id content attributes of all the applet and exposed object elements in the Document that have non-empty id content attributes, and the values of the id content attributes of all the img elements in the Document that have both non-empty name content attributes and non-empty id content attributes.
The value of those properties is the element the name or id came from.
The window object also gets properties for every element with an id, as described here:
The supported property names at any moment consist of the following, in tree order, ignoring later duplicates:
the browsing context name of any child browsing context of the active document whose name is not the empty string,
the value of the name content attribute for all a, applet, area, embed, form, frameset, img, and object elements in the active document that have a non-empty name content attribute, and
the value of the id content attribute of any HTML element in the active document with a non-empty id content attribute.
Where again the value of those properties is the element the name or id came from.
In both cases, this is the HTML5 specification standardizing the previously-widespread-but-nonstandard practice most browsers had, which is widely used on pages in the wild.
How the form can be sent if all the value are set to display:none I tough it couldn't work and if you want to hide them you shall use hidden property...
It's best to ask one question per question.
The CSS display property has no effect at all on whether form fields are submitted; you're probably thinking of the field's disabled state: Disabled form fields are indeed left out of the form on submission.

the display none or hidden info will always be sent even that you can't see.... Usually we pass some info that the user doesn't need to know, like USER_ID=20 .....---- and the
document.reservation.submit
------- it submits the form with name="reservation"

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.

Toggling i18n fields in a JavaScript webapp in a scalable way

I'm writing a 100% JavaScript webapp that manages a catalog of products.
I'm using Backbone & Mustache, among other things.
Each product has a name, which needs to be translated. So for each product, I add as many <input> elements as there are languages to translate, something like this :
<input type="text" name="name_fr" value="Bonjour" class="i18n lang_fr">
<input type="text" name="name_en" value="Hello" class="i18n lang_en">
<input type="text" name="name_es" value="Hola" class="i18n lang_es">
I show/hide <input> elements depending on the currently selected language relying on CSS classes, on the first rendering and also when the user changes the language :
var $html = ...; // Render Mustache template
var cssClass = 'lang_' + currentLanguageId;
$html.find('.i18n.' + cssClass).show();
$html.find('.i18n:not(.' + cssClass + ')').hide();
This method is a maybe a little bit naïve, but it is simple, because each input field contains all the necessary information in its attributes to save the data. I'm listening the blur event to save data when the user leaves the field.
The problem is that the language switch is slow when the number of elements grows.
Am I using the good technique ? I don't think re-rendering the product items when the language changes would be a good solution.

Can't you use css instead of javascript to toggle the show/hide?
E.g.:
.lang_fr,.lang_en,.lang_es {display:none}
.fr .lang_fr {display:inline}
.en .lang_en {display:inline}
.es .lang_es {display:inline}
...
<div class="fr">
<input type="text" name="name_fr" value="Bonjour" class="i18n lang_fr">
<input type="text" name="name_en" value="Hello" class="i18n lang_en">
<input type="text" name="name_es" value="Hola" class="i18n lang_es">
</div>
Then just toggle the fr class of the outer div.

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.

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).