We Keep Coding

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks

In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Search button on ios keyboard does not submit the form

I coded a simple search form for my website using just a text input for the search term. Also i used the typeahead.js plugin which allows autocomplete while typing.
Everything seems to work fine except when i'm trying to submit the form using the Search button of the ios keyboard. When i tap it nothing happens.
Any ideas about why this is happening?
Here is the form's code:
<form action="[config.site_url]/search/find" method="post" id="main-search-form">
<div class="form-group" id="main-search">
<input id="topnav_search" name="search_text" class="form-control typeahead" placeholder="" type="text" value="">
</div>
<input type="submit" name="submit" style="display: none;" />
</form>
And this is the search ios button that i mean:

Finally, i just changed the css styling of the submit button to this:
style="position: fixed; top: -1000px;"
Solution found here: Getting iPhone GO button to submit form

Magento Theme adds product 2x to cart in IE (Javascript)

I've got a magento install with a custom theme that runs fine in Safari, Firefox and Chrome. In IE explorer all seems to work well too, it's just that when I add a product to cart it will add it 2x instead of just 1x.
I'm looking for someone with sufficient JS experience who would be able to help me with, or solve this problem.
To have a look. sbx.mujjo.com, on the frontpage hover a product thumbnail > click [quickview] > [add to cart].
Thanks!
<form action="http://sbx.mujjo.com/checkout/cart/add/uenc/aHR0cDovL3NieC5tdWpqby5jb20vY2F0YWxvZy9hamF4X3Byb2R1Y3Qvdmlldy9pZC8yNQ,,/product/25/" method="post" class="addcart-form" id="product_addtocart_form">
<fieldset>
<input type="hidden" name="product" value="25">
<input type="hidden" name="related_product" id="related-products-field" value="">
<div class="cell">
<label for="qty">Quantity</label>
<!--<input type="text" class="quantity-text" name="qty" id="qty" maxlength="12" value="1" title="Qty" /> -->
<input type="text" class="quantity-text" name="qty" id="qty" maxlength="12" value="1" title="Qty">
</div>
<button type="button btn-checkout" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submitLight(this)"><span><span>Add to Cart</span></span></button>
</fieldset>
</form>

I believe I know the problem, and it drives me nuts when people do this. As you can see from the code that I added to the question (once it's peer reviewed), it's pretty straight forward.
You have a normal form, with a few fields and a button.
The button has an onclick event productAddToCartForm.submitLight(this), which I assume submits the form.
What IE is doing is firing this javascript event and then reacting to the button being click. The reaction is to submit the form....hence the double up.
You can fix this in one of two ways:
change the onclick event to productAddToCartForm.submitLight(this); return false; which tells the browser to stop any extra processing of the click event
change the button to a href tag - something like
<a href="javascript:void();" onclick="productAddToCartForm.submitLight(this);"`
Edit:
Forgot to mention one thing, this should still work in Safari, Chrome and FF

cyclic tab order with jquery

Is there a nice way to set a desktop-like tab order in a form with jquery? the form has four text inputs and two buttons; after the last button loses focus, I want the first text input to get focus and start tab order from the beginning (to 2nd tb, to 3rd tb...). I did this:
$('body').delegate('#second_button', 'blur', function() {
$('#first_input_text').focus();
});
but it only works in Opera. Chrome IE9, And Firefox do set focus on first text input but when user press tab again it goes to address bar instead of the second text input. I could set above binding to all elements in cycle but is there a more elegant solution?

You need to add a tabindex attribute to each form element - example :
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
Documentation here

Controling tabbing focus within popup javascript widget context

I'm working on a lightbox style javascript plugin that pops up an image with next+previous buttons and a close button. I want to make it so that tabbing will only jump between the three presented buttons in the popup, not go through the three of them and then continue on the page content in the background.
Does anyone have any suggestions on the best way to do this, currently I'm thinking that the best way is to make an array of tabbable elements when the popup appears and just capture tabs to iterate through that array setting focus on each one and preventing default tab behaviour.
Anyone know if there are any best practices regarding this?

A possible solution seems to be setting the tabindex property of the elements you don't want to be tabbable to -1.
<div>
<input type="button" value="tabbable one" />
<input type="button" value="tabbable two" />
</div>
<div>
<input type="button" value="not tabbable" tabindex="-1"/>
<input type="button" value="also not tabbable" tabindex="-1"/>
</div>
Although I did not find this in any documentation so far it seems to work in all tested browsers (FF 3.5, IE 6 & 7, Opera 9.64).
Another approach would be to blur() when an unwanted element gets the focus:
<div>
<input type="button" value="tabbable one" />
<input type="button" value="tabbable two" />
</div>
<div>
<input type="button" value="not tabbable" onfocus="blur()"/>
<input type="button" value="also not tabbable" onfocus="blur()"/>
</div>
The disadvantage of this approach is that as soon as you hit an "untabbable" element, no element will be selected and the next tab will start at the very first element. This is especially tricky when tabbing backwards, which is not possible anymore. The solution to this would be to actively focus the correct following element:
<div>
<input id="firstTabbable" type="button" value="tabbable one" />
<input type="button" value="tabbable two" />
<input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
<input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
<input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>
However, in my opinion this is a bit too complicated.

I tried doing the following when showing the popup window, it seems to work in Firefox 3. It may be enough to get you started:
$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');
The JQuery selector finds all the A and input elements that are in the div with id nonpopup and sets the html attribute disabled to true. If you are not using JQuery you will need some other way to find all these elements but it may be as simple as document.getElementsByTagName().
What this accomplishes is preventing the browser from tabbing to those elements. The tab order still leaves the page and goes all through the browser chrome, such as the URL bar.