gdfhghjdfghgfhf Posted November 9, 2012 Share Posted November 9, 2012 For some reason i need to submit a form to an external website without changing the page. I'm a newbie with AJAX and i don't know how to do it so i would really appreciate if someone could help me. Here's the form i need to submit: <form action="https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket" method="post" name="tshirt_form" id="tshirt_form"> <input type="hidden" name="product" id="productId" value="101894422"/> <input type="hidden" name="article" id="articleId" value="10568008"/> <input type="hidden" name="view" id="currentView10568008" value="351"/> <input type="hidden" name="color" id="productColor10568008" value="2"/> Size <select id="size" name="size"> <option value="2" >S</option> <option selected value="3" >M</option> <option value="4" >L</option> <option value="5" >XL</option> <option value="6" >XXL</option> </select> <br> Quantity <select id="quantity" name="quantity"> <option selected value="1" >1</option> <option value="2" >2</option> </select> </form> <div id="other"> SUBMIT FORM </div> <script> $('#tshirt_form').submit(function() { alert('wtf do i need to do now ?'); return false; }); $('#other').click(function() { $('#tshirt_form').submit(); }); </script> Thanks a lot ! Quote Link to comment Share on other sites More sharing options...
codefossa Posted November 10, 2012 Share Posted November 10, 2012 event.preventDefault() (not sure if necessary, but i do it) .serialize() .post() return false Quote Link to comment Share on other sites More sharing options...
gdfhghjdfghgfhf Posted November 10, 2012 Author Share Posted November 10, 2012 i'm a little bit confused... i'm a newbie with AJAX and never really used it... could you give me a working example to submit the form i posted ? i would really appreciate ! thanks a lot Quote Link to comment Share on other sites More sharing options...
gdfhghjdfghgfhf Posted November 10, 2012 Author Share Posted November 10, 2012 I have tried following this tutorial: http://www.simonerodriguez.com/ajax-form-submit-example/ But it's not working I don't understand what i'm doing wrong <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="scripts/ajaxsbmt.js" type="text/javascript"></script> </head> <body> <form name="MyForm" action="https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket" method="post" onsubmit="xmlhttpPost('https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;"> <input type="hidden" name="product" id="productId" value="101894422"/> <input type="hidden" name="article" id="articleId" value="10568008"/> <input type="hidden" name="view" id="currentView10568008" value="351"/> <input type="hidden" name="color" id="productColor10568008" value="2"/> Size <select class="b-core-ui-select__select" id="size" name="size"><option value="2" >S</option><option selected value="3" >M</option><option value="4" >L</option><option value="5" >XL</option><option value="6" >XXL</option></select> <br> Quantity <select class="b-core-ui-select__select" id="quantity" name="quantity"> <option selected value="1" >1</option> <option value="2" >2</option> </select> <br> <input name="send_button" type="submit" value="Send" /> </form> <div id="MyResult"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
gdfhghjdfghgfhf Posted November 11, 2012 Author Share Posted November 11, 2012 Update again: it was just a problem with a quote. I fixed it, now the script *seems* to send the data (at least it doesnt reload the page) But after clicking the submit button, the basket is still empty When sending the form, a product is supposed to be added to the basket here: https://nidieunimaitre.spreadshirt.com/shop/basket/ It works when i use a normal form, but doesn't work when i try to submit with AJAX Quote Link to comment Share on other sites More sharing options...
codefossa Posted November 11, 2012 Share Posted November 11, 2012 (edited) // Ignore this post I'll give you something a little more helpful to your situation. Edited November 11, 2012 by Xaotique Quote Link to comment Share on other sites More sharing options...
codefossa Posted November 11, 2012 Share Posted November 11, 2012 Ok, here's a full example of a working post form (with the backup of not using Javascript, but you'll have to handle more of that on the PHP page). Working Example: http://xaotique.no-ip.org/tmp/19/ index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Xaotique</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <form method="post" action="post.php" id="myform"> <label for="password">Password:</label> <input type="text" name="password" /> <input type="submit" value="Log In" /> </form> <div id="result" style="font-size: 14px; font-weight: bold; margin-top: 10px;"> Type a password and log in. Hint: The password is "xaotique". </div> </body> </html> post.php <?php if (isset($_POST['password']) && $_POST['password'] == "xaotique") { die("Correct Password!"); } die("Incorrect Password"); ?> script.js $(document).ready(function() { $("#myform").submit(function(event) { event.preventDefault(); var sendData = $(this).serialize(); $.post('post.php', sendData, function(data) { $("#result").html(data); }); return false; }); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.