We Keep Coding

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

How to refocus cursor to invalid input element

I have a page in which a set of text boxes are created based on number of items being shipped:
<c:forEach var="num" begin="1" end="${qtyToShip}" step="1" varStatus ="status">
<tr>
<td>
<input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />
</td>
<td>
<input class="form-med" type="text" name="shipItems[${num - 1 }].shipCompanyBarCode" onkeyup="if (!(event.keyCode==16 || (event.keyCode==9 && event.shiftKey))) {UPSStep2Validate(this);}"/>
</td>
</tr>
</c:forEach>
Here is what I would like to happen. When a user enters in a bar code, I need to make a AJAX call to validate that the bar code is valid (is available to be used, is correct for what is being shipped and has not already been used on this order - prevent duplicate scan).
Using DWR for AJAX and that service is all working fine.
The issue is that if the validation fails I would like the focus to return back to the field in question. That is not happening. The focus is always going to the next input box.
I have tried to work with different events: change, blur, keyup etc. I have tried with placing the focus inline, in the javascript, have tried with jQuery, javascript etc but no luck.
Looking for suggestions/solutions on how to place the focus back to the input box that is causing the issue.

If you use the onblur even you will be able to set the focus. The issue is with timing and when the onchange event is fired.
<input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" />
To make sure the cursor is at the end in IE you can add an onfocus event:
<input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" onfocus="this.value = this.value;" />

Because of the nature of AJAX, the original approach is invalid. That is
<input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />
can not be done. The solution I came up with is this
<input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="G2Step2Validate(this,'${shippingCommand.boxType}');" />
And then in the javascript function that is making the ajax call, if an error happens there then that has the control of setting focus.

Tab Ordering for Javascript "Buttons"

I'm trying to create an HTML form (using JSP) which contains Javascript buttons (rather than actual HTML buttons). Everything works great except that I'm unable to tab to the -based Javascript button after the last tabindex.
For example:
<li class="lineItem">
<f:label path="ownerPostalCode">Postal Code<em>*</em> </f:label><br />
<f:input path="ownerPostalCode" type="text" id="ownerPostalCode"
class="required" size="15" maxlength="5" value="" tabindex="16" />
</li>
<li class="lineItem">
<f:label path="ownerPostalCodeFour">+4</f:label><br />
<f:input path="ownerPostalCodeFour" type="text"
id="ownerPostalCodeFour" size="5" maxlength="5" value="" tabindex="17"/>
</li>
<span class="buttonRow">
<span class="clearButton" onclick="resetFields
('registrationForm', 'ownerInfoSection')">Clear Fields</span>
<span id="continueButton" class="greenButton" tabindex="18"
onclick="stepOneToStepTwo()">Continue</span>
</span>
</span>
I understand that tabindex only works with certain input fields (A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA)--as such, the specification of "tabindex='18'" for the #continueButton doesn't work. The desired behavior is that after tabbing to the "ownerPostalCodeFour" field, the user can tab to the #continueButton as one would with a normal button.
Is this at all possible or am I forced to utilize standard HTML buttons to achieve this behavior?
Thanks.

Not sure what browsers you are supporting, but tabindex="0" works in latest webkit/Firefox/IE. From an accessibility standpoint, using spans is less than optimal though. Why not at least use an <a> tag?

hide textfields instantly when check a radio button

What I want is when the user chooses the first option the textfield will disappear and when the users chooses the second the textfield will appear again instantly. Here's some code:
<input type="radio" name="RadioGroup0" value="1" id="student" />
<input type="radio" name="RadioGroup0" value="0" id="not student" />
and want to hide/show this:
<label for="department">department:</label>
<input name="department" type="text" class="label" value="" />
I have tried anything so I'll appreciate any answer

On the click, keyup, and change events, show or hide the appropriate elements (jQuery makes this easier). The reason for handling all the events is that the value change may only be triggered after the element loses focus.
Happy coding.

Getting Search Keyboard on iPhone using PhoneGap

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"

Use
<form> ...
<input type="search" /> ...
</form>
The <form> is a must.
(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)

The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.
See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Update:
The following input type works as expected:
There are some important things that you have to keep in mind:
It only works on iPhone OS 3.1 +
The input tag MUST be inside a tag.
Also, it is worth noting the following tags as well:
<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/>
<br/>
<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>
<!-- display an email keyboard -->
<label for="tiEmail">Email:</label>
<input type="email" id="tiEmail"/>
<br/>
<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>