Magento Theme adds product 2x to cart in IE (Javascript) - 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

Related

angularjs removed my form attribute when nav-tabs clicked

I dont really know angularjs. But this frontend from my client.
My form attribute was removed when i click nav-tabs.
actionTry="0" is attribute for ajax load status
i dont know, is this the main issue or there is another thing, because i try to add actionTry="0" manually after clicked nav-tabs. and Booom ! Nothing happend
-_-
i dont really know angluarjs. please let me know the solution.
For example, this is my first load form html :
<form class="formSetting" actionForm="bookClass" actionTry="0">
<input type="hidden" name="idSchedule" value="">
<input type="hidden" name="tanggalSchedule" value="">
<input type="hidden" name="returnPage" value="">
<button class="btn btn-blue3">RESERVE ACTIVITY</button>
</form>
but when i clicked the nav-tabs, actionTry="0" was removed.
<form class="formSetting" actionForm="bookClass">
<input type="hidden" name="idSchedule" value="">
<input type="hidden" name="tanggalSchedule" value="">
<input type="hidden" name="returnPage" value="">
<button class="btn btn-blue3">RESERVE ACTIVITY</button>
</form>
here is the video : Google Drive Video
If you want to test it. You can visit the online version : Online Version
E-Mail : dev#stackoverflow.com
Password : testtest
Please help me guys.
Thanks before :)

JS popup message when adding item to cart.php

I have this line of code:
<form name="addtocart" method="post" action="cart.php">
<input type="text" size="3" name="qty" value=""><input type="hidden" name="action" value="add_item"><input type="hidden" name="id" value="<?php echo $record->itemId; ?>"><input type="image" src="../css/images/cart.png" align=absmiddle >
<img src="../css/images/favorite.png" align="absmiddle" alt="Toevoegen aan favorieten" title="Toevoegen aan favorieten" border="0">
</form>
Now I want to display a popup when a item is added to cart.php. I have tried a simple onclick event, this works, but then the item is not added to the cart. It just displays the popup.
So I just want something you see on most modern webshops, but I am completely new to JS, so except for onclick I have no more knowledge left on how to get this done. I have google'd for ever, so i thought maybe someone here might give a little tip or example on how to get this done.
Thanks a bunch!
Considering your current JS code :
onclick="window.open('test.php'); return false"
Just remove return false as it prevents the form from being validated. SO
onclick="window.open('test.php');"
Should open the popup, validate the form, and redirect current page to cart.php.

Dojo ValidationTextBoxes blur focus... on focus

Using Dojo 1.7, my ValidationTextBox or NumberTextBox widgets don't hold focus.
<input name="mm" id="mm" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeholder:'Month', required:true" />
<input name="dd" id="dd" data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="size:2,placeholder:'Day',required:true" />
<input name="yy" id="yy" data-dojo-type="dijit.form.TextBox" data-dojo-props="size:4,placeholder:'Year',required:true" />
If a value is deemed invalid, the tooltip shows, says the "invalid" message, but when I click on the textbox to change or add in the correct value, the textbox loses focus, and in this case it focus is sent back to the first textbox. I've had this issue before and almost abandoned the validation part, but this seems like a silly issue. All searches end in frustration, as does the entirety of Dojo's "documentation".
Does it in latest Chrome, FF and Safari builds which tells me it's not a browser issue.
Finally I can found it.
From your website Your </label> is the principal.
Originally your </label> is stay next to <input ....dojo.... />
You have to move the </label> stay before <input ....dojo.... />
like this
<label><span>City of Residence</span></label>
<input id="local" name="local" data-dojo-type="dijit.form.TextBox" />
<label class="reqd"><span>Birthday</span></label>
<input name="mm" id="mm" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeholder:'Month', required:true" />
Thank you.

return confrm delay problem

For starters, here is my markup:
<form action="/People/_Delete/AUG0003/10?searchType=IdentityCode&Filter=a&searchOption=StartsWith" method="post" onsubmit="return confirm('Are you sure you want to delete AUG0003?')">
<input id="rowcount" type="hidden" value="10" />
<button alt="Delete" class="g-button user_delete.png" title="Delete AUG0003" type="submit" value="Delete"></button>
</form>
When, i press the button, i receive the confirmation dialog, after i press OK, there is a 2-3 second delay before anything happens.
If i remove the confirmation, it happens fast and instantaneously.
Has anyone encountered this before? It is a real pain.
Thanks,
Nick
I've tested this behaviour in Chromium ("Chrome"), and cannot reproduce your issue. JavaScript functions properly:
<script>var time=0;</script>
<form action="javascript:alert((new Date).getTime()-time)" method="post" onsubmit="return confirm('Are you sure you want to delete AUG0003?')&&(time=(new Date).getTime())">
<input id="rowcount" type="hidden" value="10" />
<button alt="Delete" class="g-button user_delete.png" title="Delete AUG0003" type="submit" value="Delete"></button>
</form>
(Link: Fiddle)
When I hit the button, an alert box appears. This alert box shows the delayed time between return confirm(""), and the following of the action targer. I have hit the button multiple times, each time getting 0 (indicating that the issue is not caused by the use of onsubmit.
The "delay" is very likely caused by coincidence, impatience or a server-side issue.

IE8 - Enter key won't submit my search field

Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>
Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.
You need to put some <form></form> tags around the textbox and button. Like so
<form method='POST' onsubmit='javascript:goSearch();return false;'>
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>
Another way would be to use the keydown event on the textbox and check whether it was the enter key.
Hope this helps.
I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.
The best way would be to set an event to handle enter being pressed.
In jQuery you would do:
$("input_box_id").keydown(function(e){
if (e.keyCode == 13) //enter
{
$("btn-submit").click();
}
});
In JavaScript it would be:
document.getElementById("input_box_id").onclick = function(e){
var keycode =(window.event) ? event.keyCode : e.keyCode;
if (keycode == 13) //enter
{
document.getElementById("input_box_id").click();
}
};
And change Html to:
<form action="url_here" method="post">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>
Ignore the form tags if you've already got a Asp.net form.
Another way, instead of the onclick on the submit button, would be to do this.
<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>
Edit: Added action and method attributes. The action attribute is required for validation.
Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?
Can you past the contents of the goSearch() function?
What happens if you remove the "return false;" from the event handler for the submit?
When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.
EDIT: with new ASP information.
See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:
Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");
Old ticket, but I'd like to chime in: IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
There are a ton of "Enter not submitting in IE8" complaints out there, and I feel lots of them can be contributed to this behavior. I hope this helps some of them.

Categories