Reputation: 657
I am Unable to submit a form using jQuery .submit()
function. On my website, I have:
On index.php
page, is a list of records that user can click to view full details of the records.
The view-detail.php
page show the record details and also a form if user want to update the status approval.
form-process.php
will be the form processing for update record
Codes
index.php
<script>
jQuery(document).ready(function($){
function myForm(e){
e.preventDefault();
var data = $(this).serialize();
alert(data);
$.ajax({
type: "POST",
url: 'form-process.php',
data: data,
success: function(response) {
alert("success");
console.log(response);
},
error: function() {
alert('Error Submitting');
}
})
}
$(".view_detail").click(function(e){
e.preventDefault();
url = $(this).attr('href');
$.get(url, function(data){
$("#section").html(data);
$("form").submit(myForm);
});
});
});
</script>
<div id="section">
<!-- records from db and link to view full detail -->
<a href="view-detail.php?id='.$permohonan_id.'" class="view_detail">View</a>
</div>
view-detail.php
<form id="myForm" name="kelulusan" action="<?php echo 'form-process.php'; ?>" method="post">
<div class="sokongan">
<input type="radio" name="kelulusan" id="dp" value="Dalam Proses"> Dalam Proses<br>
<input type="radio" name="kelulusan" id="ll" value="Lulus"> Lulus<br>
<input type="radio" name="kelulusan" id="tl" value="Tidak Lulus"> Tidak Lulus
</div>
<p><input type="hidden" name="pid" value="<?php echo $pid;?>"></p>
<input type="submit" name="submit" value="Submit">
</form>
form-process.php
<?php
if(isset($_POST['kelulusan'])){
$status = $_POST['kelulusan'];
echo "Update : $status ";
}
// validate and update database query
?>
When I click on the submit button, there is response from the form. May I know why and how to resolve it?
Upvotes: 2
Views: 262
Reputation: 33933
Since you don't want to submit
the form using the "normal" form behavior, you better use a button.
It can be as simple as this:
<input type="button" onclick="myForm();">
Or you can use an event
handler and an id
like this:
<input type="button" id="SubmitTheForm">
$("#SubmitTheForm").on("click",function(){
myForm();
});
Then, It is true that preventDefault()
will be useless.
It is, if you use a submit
button.
Upvotes: 2