Submit a form with AJAX without reloading

anarchoi

11-09-2012, 11:27 PM

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 !

optimizer123

11-10-2012, 02:53 AM

Hey there,

I suggest you post this in the AJAX subforum here:

http://www.codingforums.com/forumdisplay.php?f=55

DanInMa

11-10-2012, 03:28 AM

you need the .ajax() function http://api.jquery.com/jQuery.ajax/

- Id write an example but if you do a quick forum search youll find alot of examples ( it's about as common a question as how to show and hide elements on click)

anarchoi

11-10-2012, 03:55 AM

I'd really appreciate an example of a script that i could use to transmit the data of my form to the external website once the form is submitted because i'm really lost :(

anarchoi

11-10-2012, 10:07 PM

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>

AndrewGSW

11-10-2012, 11:12 PM

You're missing an apostrophe after /addtobasket:

onsubmit="xmlhttpPost('https://nidieunimaitre.spreadshirt.com/shop/basket/addtobasket', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

I haven't checked beyond this.

anarchoi

11-10-2012, 11:19 PM

Thanks, it was a dumb error.

Ok 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 :(

AndrewGSW

11-10-2012, 11:35 PM

I am unable to assist further, but suspect it might be a restriction of 'cross-domain posting'.

anarchoi

11-11-2012, 12:09 AM

damn

Any idea how i could submit a form to another domain without having to reload the page ?

Currently i was using a method to submit the forum into an hidden iframe. It works very good BUT doesn't work in safari browser. I have explained my problem with this method here:
http://www.codingforums.com/showthread.php?p=1290234#post1290234

So, submit to iframe is buggy and AJAX submit doesn't work... Is there another way ?

AndrewGSW

11-11-2012, 12:36 AM

Maybe investigate HTML5/XHR2 (http://www.html5rocks.com/en/tutorials/file/xhr2/) for modern browsers.