JS popup message when adding item to cart.php - javascript

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.

Related

Is it possible to redirect back after form submit done in php?

I have this form:
<form action="/productcategories/foods/" method="GET">
<input type="hidden" name="add-to-cart" value="<?php echo htmlspecialchars($getid); ?>" />
<input type="number" name="quantity" min="1" value="1">
<br><input type="submit" value="Buy" />
</form>
If I hit submit it'll redirect me to a Wordpress plugin generated page, does the add-to-cart action but after I done this form I want to redirect back the user to the current page. Is there any method to do it from the page where the form stored? Like JavaScript or something like that?
You can submit the form and open the redirection in tag, not leaving your site. Then possibly using javascript you can remove on variety of ways, clicking on button or after it will fully load.

how to open same page onsubmit? [duplicate]

This question already has answers here:
POST form and prevent response
(2 answers)
Closed 9 years ago.
I have html form whose action is a php script. php code basically replaces the file.
HTML code:
<form name="input" action="//copy.php" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
Php code:
if isset($_POST['submit']))
{
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
?>
Now when I click submit, a alert box opens that "file is updated successfully" and when I click ok on it, a blank page load. How can I avoid loading the blank page? I want to stay on the same page after clicking submit with pop up msg.
SOLUTION
As I don't see "Answer your own question" option, I am posting solution here.
This link POST form and prevent response, gives you textual answer to the question. While I providing the answer by code.
So basically, it very simpl. Just put
header("HTTP/1.0 204 No Response");
in the php file and it will work successfully on all browser, without opening new page. This will avoid use of jquery.
Leave action empty.
<form method="post" action="">
Then check if posted using isset function
if(isset($_POST)){
...
}
This will keep you on the same page after submit button..
<form name="input" action="" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
But now, your image(s) may not be loaded. Maybe it will work, maybe not. If not, you will need to resolve functions which may reside in copy.php file. Since we dont know whats in that file, its hard to answer your question correctly, but.. you may try this "blind" shot..
if(isset($_POST['submit']))
{
//include "//copy.php"; // this file probably contains functions, so lets load functions first IF needed..
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
Have you tried changing the type on the input:
<input type="submit" name="submit" value="Copy image"/>
to
<input type="button" name="submit" id="submit" value="Copy image"/>
<input type="button" /> won't submit a form by default (check all browsers to be sure).
<input type="submit"> by default, the tag in which the submit input is, is submitted. If you still want to use this, you will have to override the input submit/button's functionality with an event.preventDefault(). In that case, you need:
$('#submit').click(function (event) {
event.preventDefault();
//Do whatever you need to
//Submit if needed: document.forms[0].submit();
});
For further details refer this link
action="<?php echo $_SERVER['PHP_SELF']; ?>

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

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.

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.
you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>
If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>

Categories