Maybe someone can assist me with this little issue I'm having. I'm trying to submit this form without a page refresh. But it will skip the post and go directly to the ajax call. I think I miss understood the preventDefault(). I have searched online but unable to locate what I need for this. Your help would greatly be appreciated or point to another form submission.
HTML below:
<!DOCTYPE html>
<html>
<head>
<title>AJAX | Project</title>
<link href="project.css" rel="stylesheet"/>
<script src="jquery.js"></script>
</head>
<body>
<div id="mainCon">
<h1>Contact Book</h1>
<div id="form_input">
<form id="myform" method="post" action="addrecord.php">
<label for="fullname">Name:</label>
<input type="text" name="fullname" id="fullname"/><span id="NameError"> </span>
<br/>
<label for="phonenumber">Phone Number:</label>
<input type="text" id="phonenumber" name="phonenumber"><span id="PhoneError"></span>
<br />
<input id="buttton" type="submit" onClick="addnumber()" value="Add Phone Number"/>
<input type="button" id="show" value="the Results"/>
</form>
</div>
<div id="form_output">
</div>
</div>
<script src="project.js"></script>
<script type="text/javascript">
function addnumber(){
var Fullname = document.getElementById("fullname").value;
var Phonenumber = document.getElementById("phonenumber").value;
if(Fullname == ""){
document.getElementById("NameError").innerHTML = "Please Enter a valided Name";
}
if(Phonenumber == ""){
document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name";
}
}
</script>
</body>
</html>
jquery
$("document").ready(function () {
$("#buttton").click(function () {
$('#myform').submit(function (e) {
e.preventDefault();
$.ajax({
url: "listrecord.php",
type: "GET",
data: "data",
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
}); // AJAX Get Jquery statment
});
}); // Click effect
}); //Begin of Jquery Statement
This question is related to
javascript
php
jquery
ajax
forms
<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" />
</form>
<script>
$(document).ready(function(){
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
$.ajax({
method: 'POST',
url: 'submit.php',
dataType: "json",
contentType: "application/json",
data : $('#myForm').serialize(),
success: function(data){
alert(data);
},
error: function(xhr, desc, err){
console.log(err);
}
});
});
});
});
</script>
</body>
</html>
<!-- submit.php -->
<?php
$value ="call";
header('Content-Type: application/json');
echo json_encode($value);
?>
The problem is the Method 'POST' your form is submitting by using the "post" method, and in the AJAX you are using "GET".
<script type="text/javascript">
var frm = $('#myform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
<form id="myform" action="/your_url" method="post">
...
</form>
Just catch the submit event and prevent that, then do ajax
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
Source: Stackoverflow.com