Submit Form With Ajax Without Changing Page

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:

Quote

<form action= "https://[redacted].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 !

codefossa · November 10, 2012

event.preventDefault() (not sure if necessary, but i do it)

.serialize()

.post()

return false

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

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://[redacted].spreadshirt.com/shop/basket/addtobasket" method="post"
onsubmit="xmlhttpPost('https://[redacted].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>

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:///[redacted].spreadshirt.com/shop/basket/

It works when i use a normal form, but doesn't work when i try to submit with AJAX

codefossa · November 11, 2012

// Ignore this post I'll give you something a little more helpful to your situation.

codefossa · 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;
   });
});

Sign In

Submit Form With Ajax Without Changing Page

Recommended Posts

Guest

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information