Submitting form twice using Ajax
Question
I am trying to submit the form using Ajax, but it submitted the entered values twice. Could you please help me to prevent this issue? I tried several suggestions from the previous questions, but it did not work.
Thank you
Html Code:
<form id="ratingForm" method="POST">
<div class="form-group">
<h4>Rate this product</h4>
<!-- Start Star -->
<button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<!-- End Star -->
<input type="hidden" id="rating" name="rating" value="1">
<input type="hidden" id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
<div class="form-group">
<!--Comment Start-->
<label for="usr">Title*</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="comment">Comment*</label>
<textarea rows="5" id="comment" name="comment" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
</div>
<!--Comment End-->
</form>
Js Code:
$('#ratingForm').on('submit', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
dataType: "json",
url : 'action.php',
data : formData,
success:function(response){
if(response.success == 1) {
$("#ratingForm")[0].reset();
window.location.reload();
}
}
});
});
Php Code (This is action.php file): Execution.php file inserts data into database using mysql.
<?php
session_start();
include 'class/Execution.php';
$rating = new Rating();
if(!empty($_POST['action']) && $_POST['action'] == 'saveRating'
&& !empty($_POST['rating'])
&& !empty($_POST['itemId'])) {
$rating->saveRating($_POST, $_SESSION['userId']);
$data = array(
"success" => 1,
);
echo json_encode($data);
}
?>
2 answers
solution1
2 2020-12-01 05:04:40
with the POST method your form may be submitting second time when it reload with window.location.reload(); you can simply redirect the page when ajax call successfully with window.location.href = "http://yourwebpage.php"; or window.location.replace("http://yourwebpage.php");
solution2
1 ACCPTED 2020-12-01 05:23:04
Can you try the below code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js Check</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
</head>
<body>
<div id="wrapper">
<form id="ratingForm" method="POST">
<div class="form-group">
<h4>Rate this product</h4>
<!-- Start Star -->
<button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<!-- End Star -->
<input type="hidden" id="rating" name="rating" value="1">
<input type="hidden" id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
<div class="form-group">
<!--Comment Start-->
<label for="usr">Title*</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="comment">Comment*</label>
<textarea rows="5" id="comment" name="comment" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
</div>
<!--Comment End-->
</form>
</div>
<script>
jQuery(document).ready(function($) {
$('#ratingForm').on('submit', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
dataType: "json",
url : 'action.php',
data : formData,
success:function(response){
console.log(response);
if(response.success == 1) {
$("#ratingForm")[0].reset();
window.location.reload();
}
}
});
});
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ajax form submitting twice?
Ajax form submitting twice
knockoutJS - ajax form submitting twice
Ajax form submitting twice with Yii 2
submitting a form using $.ajax
form submitting twice via ajax POST
Angular form submitting twice (ajax get request)
Prevent AJAX form from submitting twice?
Form not submitting unless submitting twice. Ajax, vanilla js, django
Submitting Form using jquery AJAX
Related Tags