...

View Full Version : jquery on form submit reload problems



n381
03-14-2013, 04:09 AM
To CodingForums,
This is, I suppose a simple task for proficient programmers, but is quite problem for me, as jQuery form submit keeps reloading within some promotional script, here is the form submit snippet

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js"></script><script>$(document).ready(function() {$('#formId').submit(function() {$.ajax({type: 'POST',url: 'http://www.eshop-bazar.com/market/',data: '$('#formId').serialize()',success: 'function(data, textStatus, jqXHR) {'{e.preventDefault();alert('Added to Your cart, please continue');},error: function(jqXHR, textStatus, errorThrown) {}});return false;});});</script><form action="" method="post" name="formId">
<input type="hidden" name="offer" value="EjM7KWKART7PCs9mJnBg2qzPyQeQW3nLjTBnRrsaFGVdQtKXs6JRurkQzvfL2W652UR%2BIe%2BLQtGM1pM2vawHJQgruVBZC2fh zOKeR1R4WCp8FvQVyAf%2F6w%3D%3D" />
<input type="submit" name="submit" id="submit_btn" value="Send" /></form>

So, I would appreciate some suggestions and example, thanks

devnull69
03-14-2013, 09:26 AM
It should not be our task to format your code. It is a general and important task for a developer who wants (and must) debug his/her own code.



$(document).ready(function() {
$('#formId').submit(function() {
$.ajax({
type: 'POST',
url: 'http://www.eshop-bazar.com/market/',
data: '$('#formId').serialize()',
success: 'function(data, textStatus, jqXHR) {
'{e.preventDefault();
alert('Added to Your cart, please continue');
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
return false;
});
});


What do we see now?
- Single quotes inside single quotes must be escaped as \'. But you must not have single quotes around Javascript statements. Otherwise they won't be statements any more
- There is an extra single quote before the function keyword in the success method
- There is an extra single quote and opening bracket inside the success method (before e.preventDefault())
- It doesn't make any sense to have e.preventDefault inside the success method. At that point of time the .submit() handler already finished

Try this


$(document).ready(function() {
$('#formId').submit(function(e) {
$.ajax({
type: 'POST',
url: 'http://www.eshop-bazar.com/market/',
data: $("#formId").serialize(),
success: function(data, textStatus, jqXHR) {
alert('Added to Your cart, please continue');
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
e.preventDefault();
return false;
});
});

n381
03-14-2013, 05:30 PM
devnull69,
thanks for your response, I've made corrections you've suggested - but on page submit still not working here's the snippet
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js"></script><script>$(document).ready(function() {$('#formId').submit(function(e) {$.ajax({type: 'POST',url: 'http://www.eshop-bazar.com/market/',data: $("#formId").serialize(),success: function(data, textStatus, jqXHR) {alert('Added to Your cart, please continue');},error: function(jqXHR, textStatus, errorThrown) {}});e.preventDefault();return false;});});</script><form action="http://www.eshop-bazar.com/market/" method="post" id="formId">
<input type="hidden" name="offer" value="zFe0ueAykvveFKCCAOKgRUE3lwgJKMIfbk%2B0VGOzy0s96Z4uMAcSxFODqE3wkvVGRGsmw5QO737UrwuDVebYHkvYR5YO6ZV6E2 zxU6rkADU3%2B%2F4fdV%2B7Pw%3D%3D" />
<input type="image" name="submit" value="Add To Cart" alt="Add To Cart" src="images/add_button.gif">
<input type="submit" name="submit" id="submit_btn" value="Send" /></form>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum