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.
Related
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.
I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();
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
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.
I have come across some strange behaviour, and I'm assuming a bug in Firefox, when removing a input submit element from the DOM from within the click event.
The following code reproduces the issue:
<form name="test_form">
<input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" />
<input type="submit" value="submit normally" />
<input type="button" value="submit via js" onclick="document.test_form.submit();" />
</form>
To reproduce:
Click "remove me"
Click "submit via js". Note that the form does not get submitted, this is the problem.
Click "submit normally". Note that the form still gets submitted normally.
It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a JavaScript-specific issue as normal submit buttons within this form still function fine.
To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people experiencing it, but so far searching has yealded nothing useful.
Has anyone else experienced this and if so, did you get to the bottom of it?
Seems to be related to the fact that you're removing the node while processing the event.
This indeed looks like a bug from Firefox.
In the meanwhile, this hack seems to work but delaying the removal:
<script type="text/javascript">
function delsubmit(el) {
window.setTimeout(function() {
el.parentNode.removeChild(el);
}, 50);
return false;
}
</script>
<input type="submit" value="remove me" onclick="return delsubmit(this)" />