On submitting the form using jquery we get the alert from the right div box and the form is submitted but the form values is not passed to php file. on Echoing the value of $_POST in php we get nothing.
html file:
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="check5.css" rel="stylesheet">
<script src="check3.js"></script>
<script>
function ajax2()
{
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200){
document.getElementById('me3').innerHTML = req.responseText;
}
}
req.open('GET','allfriend.php','true');
req.send();
}
</script>
</head>
<body onload="ajax2();">
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Send">
</form>
</div>
<div id="me">
<div id="me1" style="overflow-y:auto;overflow-x:hidden;">
<div id="me3"></div>
</div>
<div id="me2">
<form id="form1" name="form1">
<input id="name1" placeholder="Your Name" type="text">
<input id="submit1" type="button" value="Send">
</form>
</div>
</div>
</body>
</html>
this is my jquery file that submit form data without refreshing the page.
** Jquery file:**
$(document).ready(function() {
$("#submit").click(function() {
var msg = $("#msg").val();
if (msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("check2.php", {
msg1: msg
}, function(data) {
$('#form')[0].reset(); // To reset form fields
});
}
});
});
$(document).ready(function() {
$("#submit1").click(function() {
var name1 = $("#name1").val();
if (name1 == '') {
alert("insert this blank!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("allfriend.php", {
nam1: name1
}, function(data) {
$('#form1')[0].reset(); // To reset form fields
});
}
});
});
php file:
<?php
include 'db.php';
$friends=$_POST['nam1'];
$q="select first_name from registry where first_name like '$friends%' || user_name='$friends%'";
$run = $db->query($q);
while($row = $run->fetch_array()) :
?>
<div id="chat_data">
<span><?= $row['first_name'].''; ?></span>
</div>
<?php endwhile; ?>
