using AJAX to update query

using AJAX to update query - javascript

I have written a code by watching some tutorial. What it does is, if one writes a message, it adds it to database without reloading. The problem is it doesnt show me the updated database. It shows the database that was at the time of loading. What function should i add in function() to be able to that. I dont have much knowledge of javascript so if you can add it in the code it will me really helpful. Thanks
<html>
<?include_once('database.php')?>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'home.php',
data: $('form').serialize(),
success: function () {
$('#comment').val('');
}
});
});
});
</script>
</head>
<!--body-->
<body>
<?php
if(isset($_GET["new_message"]))
{
$new_message = $_GET["new_message"];
$sql="INSERT INTO Messages(id, message, time, me) VALUES ('$session_usernumber', '$new_message',now(),'1')";
if(!mysqli_query($con,$sql))
{
echo"can not";
}
}
?>
</body>
<?php
$message_query="SELECT * FROM Messages Where id='$session_usernumber'";
$result = $con->query($message_query);
if ($result->num_rows > 0) {
while($row= $result->fetch_assoc())
{
echo $row['message'];
}
}
else
{
echo"Oops! You don't have any message";
}
?>
<div class="footer">
<form class="search_footer" name="sentMessage" id="contactForm" novalidate >
<input id='comment' autocomplete="off" autofocus="autofocus" type="text" name="new_message" placeholder="Type your message here.." required="required" class="textbox">
<input value="Send message" name="submit" type="submit" class="button">
</form>
</html>

Try this snippet, i think the problem is because your form doesn't send the message data to the database.
<div class="footer">
<form class="search_footer" name="sentMessage" id="contactForm" novalidate >
<input id='comment' autocomplete="off" autofocus="autofocus" type="text" name="new_message" placeholder="Type your message here.." required="required" class="textbox">
<input value="Send message" name="submit" type="submit" class="button">
</form>
</html>
<script>
$(document).ready(function(){
$.ajax({
url:'getmessages.php',type:'GET',success: function(message){console.log(message);}
});
$('form').on('submit', function (e) {
e.preventDefault();
var data = $('#comment').val();
$.ajax({
type: 'POST',
url: 'home.php',
data: {new_message: data},
success: function(response) {
console.log(response);
}
});
});
});
</script>
home.php file:
<?php
if(isset($_POST["new_message"]))
{
$new_message = $_POST["new_message"];
$sql="INSERT INTO Messages(id, message, time, me) VALUES ('$session_usernumber', '$new_message',now(),'1')";
if(!mysqli_query($con,$sql))
{
echo"can not";
}
getmessages.php
<?php
$message_query="SELECT * FROM Messages Where id='$session_usernumber'";
$result = $con->query($message_query);
if ($result->num_rows > 0) {
while($row= $result->fetch_assoc())
{
echo $row['message'];
}
}
else
{
echo"Oops! You don't have any message";
}
?>

Related

How to Live Search and Search After Click with Ajax

i try to create live search with Ajax, but i want when i click result of that search then it will automatic do the search.
my html code
<form id="search" action="">
<input type="text" class="form-control" id="qu" placeholder="search" required>
<div id="display" style="display: none"></div>
</form>
here my ajax live search
function fill(Value) {
$('#qu').val(Value);
$('#display').hide();
}
$(document).ready(function() {
$("#qu").keyup(function() {
$('#display').show();
var name = $('#qu').val();
if (name == "") {
$("#display").html("");
$("#display").hide();
}
else {
$.ajax({
type: "POST",
url: "cari.php",
data: {
search: name
},
success: function(html) {
$("#display").html(html).show();
}
});
}
});
});
here my ajax search
$(function() {
$("#search").bind('submit',function() {
$('#main_content').hide();
var value2 = $('#qu').val();
$.post('cari_user.php',{value2:value2}, function(data){
$("#main_content").html(data);
$('#main_content').fadeIn("slow");
$("#search")[0].reset();
});
return false;
});
});
in my curent code after i type query in live search input then i have to press enter/click enter button manually to search based on query i get from live search.
i want went i click result from live search then system will automatically doing the search.

I write code for you.. try with this
<form method="post" action="search.php">
<input type="text" id="search-box" name="search" autocomplete="off" class="form-control search" placeholder="Enter product / service to search">
<input type="submit" value="search" name="submit" id="hrdSearch" class="s_button">
<div id="suggesstion-box"></div>
</form>
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "cari.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
$("#hrdSearch").click(function (){
var v = $("#search-box").val();
window.location.href = "search.php?keyword=" + v;
return false;
});
});
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
cari.php
<?php
if(!empty($_POST["keyword"])) {
$query ="select * table_name where column_name like '". $_POST ["keyword"] ."%';";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="country-list">
<?php
foreach($result as $country) {
?>
<li onClick="selectCountry('<?php echo $country["name"]; ?>');"><?php echo $country["name"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>

How to Call Ajax from HTML/JS to start PHP Function?

I'm working on a code that will show an alert when form is submitted and then redirect back to home page. If an empty form is submitted, I want to show an error alert. I realize that I cannot call PHP from onclick, and that I need to instead call a JS function that will start my PHP function. Can someone tell me if my PHP code is on the right track, and how to initialize the AJAX function? Trying to do this WITHOUT JQuery. Thanks!
html
<form method="POST" action="contact.php">
<label for='message'>Leave a Message:</label> <br><br>
<textarea rows="15" cols="45" name="message" id="message" ></textarea>
<br><br>
<input type="submit" name='submit' value="send!" onclick="startajax()"/>
</form>
and php
<?PHP
$subject="New Message!";
$message=$_POST ["message"];
function leavemessage () {
if(!empty($_POST['message'])) {
echo '<script type="text/javascript">
function error(){
alert("Error!");
window.location.replace=(contact.html);}
</script>';
}
else
{
{mail ($email, $subject, $message, "From:".$from);}
echo '<script type="text/javascript">
function confirmation(){
alert("Message Sent!");
window.location.replace (index.html);}
</script>';
}
}
?>

You can do this with jquery ajax to complete your request like this:
HTML:
<form method="POST" id="contact-form" onsubmit="return startajax()" >
<label for='message'>Leave a Message:</label> <br><br>
<textarea rows="15" cols="45" name="message" id="message" ></textarea>
<br><br>
<input type="submit" name='submit' value="send!"/>
</form>
PHP:
<?PHP
$subject="New Message!";
$message=$_POST ["message"];
if(!empty($message)) {
//your email code here
exit(json_encode(array('error' => 0, 'errorMessage' => '')));
} else {
exit(json_encode(array('error' => 1, 'errorMessage' => 'Message is required')));
}
}
?>
Jquery:
<script>
var startajax = function(){
var url = 'contact.php';
$.ajax({
url : url,
type : "POST",
dataType : "JSON",
data : $('#contact-form').serialize(),
success : function(response) {
if (response.error == 0) { // success
$('#contact-form')[0].reset();
alert('SUCCESS MESSAGE');
} else { // error
alert(response.errorMessage);//form is invalid
}
}
})
return false;
}
</script>
Just make sure you have jquery library included to your page.
As per request, Without jQuery code below:
HTML:
<form method="POST" id="contact-form" action="contact.php" >
<label for='message'>Leave a Message:</label> <br><br>
<textarea rows="15" cols="45" name="message" id="message" ></textarea>
<?php if (isset($_GET['error'])) { ?>
<p style="color:red;">Message is required</p>
<?php } ?>
<br><br>
<input type="submit" name='submit' value="send!"/>
</form>
PHP:
<?PHP
if (isset($_POST) && !empty($_POST)) {
$subject="New Message!";
$message=$_POST ["message"];
if(!empty($message)) {
//your email code here
echo '<script>window.location.href="index.html"</script>';
} else {
echo '<script>window.location.href="index.html?error=1"</script>';
}
}
}
?>

Ajax submitting form without refreshing page [duplicate]

This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed last year.
Can anyone tell me why this bit of code isn't working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').bind('submit', function () {
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="button" value="Submit">
</form>
</body>
</html>
When I push submit nothing happens. In the receiving php file I'm using $_POST['time'] and $_POST['date'] to put the data in a mysql query but it's just not getting the data. Any suggestions? I'm assuming it's something to do with the submit button but I can't figure it out

The form is submitting after the ajax request.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').bind('click', function (event) {
// using this page stop being refreshing
event.preventDefault();
$.ajax({
type: 'POST',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
PHP
<?php
if(isset($_POST["date"]) || isset($_POST["time"])) {
$time="";
$date="";
if(isset($_POST['time'])){$time=$_POST['time']}
if(isset($_POST['date'])){$date=$_POST['date']}
echo $time."<br>";
echo $date;
}
?>

JS Code
$("#submit").click(function() {
//get input field values
var name = $('#name').val();
var email = $('#email').val();
var message = $('#comment').val();
var flag = true;
/********validate all our form fields***********/
/* Name field validation */
if(name==""){
$('#name').css('border-color','red');
flag = false;
}
/* email field validation */
if(email==""){
$('#email').css('border-color','red');
flag = false;
}
/* message field validation */
if(message=="") {
$('#comment').css('border-color','red');
flag = false;
}
/********Validation end here ****/
/* If all are ok then we send ajax request to email_send.php *******/
if(flag)
{
$.ajax({
type: 'post',
url: "email_send.php",
dataType: 'json',
data: 'username='+name+'&useremail='+email+'&message='+message,
beforeSend: function() {
$('#submit').attr('disabled', true);
$('#submit').after('<span class="wait"> <img src="image/loading.gif" alt="" /></span>');
},
complete: function() {
$('#submit').attr('disabled', false);
$('.wait').remove();
},
success: function(data)
{
if(data.type == 'error')
{
output = '<div class="error">'+data.text+'</div>';
}else{
output = '<div class="success">'+data.text+'</div>';
$('input[type=text]').val('');
$('#contactform textarea').val('');
}
$("#result").hide().html(output).slideDown();
}
});
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contactform input, #contactform textarea").keyup(function() {
$("#contactform input, #contactform textarea").css('border-color','');
$("#result").slideUp();
});
HTML Form
<div class="cover">
<div id="result"></div>
<div id="contactform">
<p class="contact"><label for="name">Name</label></p>
<input id="name" name="name" placeholder="Yourname" type="text">
<p class="contact"><label for="email">Email</label></p>
<input id="email" name="email" placeholder="admin#admin.com" type="text">
<p class="contact"><label for="comment">Your Message</label></p>
<textarea name="comment" id="comment" tabindex="4"></textarea> <br>
<input name="submit" id="submit" tabindex="5" value="Send Mail" type="submit" style="width:200px;">
</div>
PHP Code
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//check if its an ajax request, exit if not
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type' => 'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if (!isset($_POST["username"]) || !isset($_POST["useremail"]) || !isset($_POST["message"])) {
$output = json_encode(array('type' => 'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$username = filter_var(trim($_POST["username"]), FILTER_SANITIZE_STRING);
$useremail = filter_var(trim($_POST["useremail"]), FILTER_SANITIZE_EMAIL);
$message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);
//additional php validation
if (strlen($username) < 4) { // If length is less than 4 it will throw an HTTP error.
$output = json_encode(array('type' => 'error', 'text' => 'Name is too short!'));
die($output);
}
if (!filter_var($useremail, FILTER_VALIDATE_EMAIL)) { //email validation
$output = json_encode(array('type' => 'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if (strlen($message) < 5) { //check emtpy message
$output = json_encode(array('type' => 'error', 'text' => 'Too short message!'));
die($output);
}
$to = "info#wearecoders.net"; //Replace with recipient email address
//proceed with PHP email.
$headers = 'From: ' . $useremail . '' . "\r\n" .
'Reply-To: ' . $useremail . '' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$sentMail = #mail($to, $subject, $message . ' -' . $username, $headers);
//$sentMail = true;
if (!$sentMail) {
$output = json_encode(array('type' => 'error', 'text' => 'Could not send mail! Please contact administrator.'));
die($output);
} else {
$output = json_encode(array('type' => 'message', 'text' => 'Hi ' . $username . ' Thank you for your email'));
die($output);
}
This page has a simpler example
http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/

Here is a nice plugin for jQuery that submits forms via ajax:
http://malsup.com/jquery/form/
its as simple as:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert('form was submitted');
});
});
</script>
It uses the forms action for the post location.
Not that you can't achieve this with your own code but this plugin has worked very nicely for me!

JS Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var time = $("#time").val();
var date = $("#date").val();
var dataString = 'time='+ time + '&date=' + date;
if(time=='' || date=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
HTML Form
<form>
<input id="time" value="00:00:00.00"><br>
<input id="date" value="0000-00-00"><br>
<input name="submit" type="button" value="Submit">
</form>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Form Submitted Success</span>
</div>
PHP Code
<?php
if($_POST)
{
$date=$_POST['date'];
$time=$_POST['time'];
mysql_query("SQL insert statement.......");
}else { }
?>
Taken From Here

type="button"
should be
type="submit"

In event handling, pass the object of event to the function and then add statement i.e.
event.preventDefault();
This will pass data to webpage without refreshing it.

$(document).ready(function(){
$('#userForm').on('submit', function(e){
e.preventDefault();
//I had an issue that the forms were submitted in geometrical progression after the next submit.
// This solved the problem.
e.stopImmediatePropagation();
// show that something is loading
$('#response').html("<b>Loading data...</b>");
// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'somephpfile.php',
data: $(this).serialize() // getting filed value in serialize form
})
.done(function(data){ // if getting done then call.
// show the response
$('#response').html(data);
})
.fail(function() { // if fail then getting message
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12"></div>enter code here
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="msg"></div>
<form method="post" class="frm" id="form1" onsubmit="">
<div class="form-group">
<input type="text" class="form-control" name="fname" id="fname" placeholder="enter your first neme" required>
<!--><span class="sp"><?php// echo $f_err;?></span><!-->
</div>
<div class="form-group">
<input type="text" class="form-control" name="lname" id="lname" placeholder="enter your last neme" required>
<!--><span class="sp"><?php// echo $l_err;?></span><!-->
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" id="email" placeholder="enter your email Address" required>
<!--><span class="sp"><?php// echo $e_err;?></span><!-->
</div>
<div class="form-group">
<input type="number" class="form-control" name="mno" id="mno" placeholder="enter your mobile number" required>
<!--><span class="sp"><?php //echo $m_err;?></span><!-->
</div>
<div class="form-group">
<input type="password" class="form-control" name="pass" id="pass" pattern="(?=.*[a-z])(?=.*[A-Z]).{4,8}" placeholder="enter your Password" required>
<!--><span class="sp"><?php //echo $p_err;?></span><!-->
</div>
<div class="radio">
<input type="radio" value="male" name="gender" id="gender" checked>male<br>
<input type="radio" value="female" name="gender" id="gender">female<br>
<input type="radio" value="other" name="gender" id="gender">other<br>
<!--><span class="sp"> <?php //echo $r_err;?></span><!-->
</div>
<div class="checkbox">
<input type="checkbox" name="check" id="check" checked>I Agree Turms&Condition<br>
<!--><span class="sp"> <?php //echo $c_err;?></span><!-->
</div>
<input type="submit" class="btn btn-warning" name="submit" id="submit">
</form>enter code here
</div>
<div class="col-md-3 col-sm-6 col-xs-12"></div>
</div>
</div>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
$(function () {
$(".submit").click(function (event) {
var time = $("#time").val();
var date = $("#date").val();
var dataString = 'time=' + time + '&date=' + date;
console.log(dataString);
if (time == '' || date == '')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else
{
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: function (data) {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$("#data").html(data);
}
});
}
event.preventDefault();
});
});
</script>
<form action="post.php" method="POST">
<input id="time" value=""><br>
<input id="date" value=""><br>
<input name="submit" type="button" value="Submit" class="submit">
</form>
<div id="data"></div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Form Submitted Success</span>
<?php
print_r($_POST);
if ($_POST['date']) {
$date = $_POST['date'];
$time = $_POST['time'];
echo '<h1>' . $date . '---' . $time . '</h1>';
}
else {
}
?>

Ajax form submit without page refresh

I simply want to submit my form to the same page with ajax without page refresh. So my below code submits the form but $_POST values are not picked ... Am I submitting it properly. I don't get any error but I think my form is not submitting.
html form
<form action="" id="fixeddonation" name="fixeddonation" method="post">
<input type="hidden" class="donerProject" name="donerProject" value="test">
<input type="hidden" class="donersubProject" id="donersubProject" name="donersubProject" value="general">
<input type="hidden" class="donerLocations" id="donerLocations" name="donerLocations" value="general">
<input type="hidden" class="donationpagetype" name="donationpagetype" value="general">
<input type="hidden" class="projectadded" id="projectadded" name="projectadded" value="1">
<input type="hidden" value="302" id="pageid" name="pageid">
<div class="classsetrepet generalfixshow fullrow row fixed-page">
<div class="col-6 text-right">
<div class="prize">Fixed Amount £</div>
</div>
<div class="col-6">
<input type="text" id="oneoffamt" name="oneoffamt" class="oneoffamt validatenumber">
<span class="amt_error"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<input type="submit" id="submit_gen_one" class="btn-block" value="submit" name="submit_gen_one">
</div>
</div>
</form>
Ajax code
jQuery('#fixeddonation').on('submit', function (e) {
e.preventDefault();
jQuery.ajax({
type: 'post',
url: 'wp-admin/admin-ajax.php',
data: jQuery('#fixeddonation').serialize(),
success: function (data) {
alert(data);
alert('form was submitted');
jQuery('#collapse2').addClass('in').removeAttr('aria-expanded').removeAttr('style'); jQuery('#collapse1').removeClass('in').removeAttr('aria-expanded').removeAttr('style');
}
});
return false;
});

Add a correct value to the action tag of your form and try this:
<script>
$(document).ready(function() {
var form = $('#fixeddonation');
form.submit(function(ev) {
ev.preventDefault();
var formData = form.serialize();
$.ajax({
method: 'POST',
url: form.attr('action'),
data: formData
}) .done(function(data) {
alert(data);
});
});
}); // end .ready()
</script>
Don't need return false as you already called preventDefault() first thing

First create Template
<?php
/* Template Name: Test */
get_header();
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<p class="register-message" style="display:none"></p>
<form action="#" method="POST" name="testregister" class="register-form">
<fieldset>
<label><i class="fa fa-file-text-o"></i> Register Form</label>
<input type="text" name="firstname" placeholder="Username" id="firstname">
<p id="firstname-error" style="display:none">Firstname Must Be Enter</p>
<input type="email" name="email" placeholder="Email address" id="email">
<p id="email-error" style="display:none">Email Must Be Enter</p>
<input type="submit" class="button" id="test" value="Register" >
</fieldset>
</form>
<script type="text/javascript">
jQuery('#test').on('click',function(e){
e.preventDefault();
var firstname = jQuery('#firstname').val();
var email = jQuery('#email').val();
if (firstname == "") {
jQuery('#firstname-error').show();
return false;
} else {
jQuery('#firstname-error').hide();
}
if (email == "") { jQuery('#email-error').show(); return false; }
else { jQuery('#email-error').hide(); }
jQuery.ajax({
type:"POST",
url:"<?php echo admin_url('admin-ajax.php'); ?>",
data: {
action: "test",
firstname : firstname,
email : email
},
success: function(results){
console.log(results);
jQuery('.register-message').text(results).show();
},
error: function(results) {
}
});
});
</script>
</main><!-- #main -->
</div><!-- #primary -->
after that create a function (function.php in wordpress)
add_action('wp_ajax_test', 'test', 0);
add_action('wp_ajax_nopriv_test', 'test');
function test() {
$firstname = stripcslashes($_POST['firstname']);
$email = stripcslashes($_POST['email']);
global $wpdb;
$q = $wpdb->prepare("SELECT * FROM wp_test WHERE email='".$email."' ");
$res = $wpdb->get_results($q);
if(count($res)>0)
{
echo "Email Allready Register ";
}
else
{
$user_data = array(
'firstname' => $firstname,
'email' => $email
);
$tablename = $wpdb->prefix.'test'; // if use wordpress
$user_id= $wpdb->insert( $tablename,$user_data );
echo 'we have Created an account for you';
die;
}
}

Form action onclick without refreshing with Ajax

I have a simple chat app. Users type in username and message and it is supposed to be inserted into database.
This is not happening with this code, and obviously I am missing something:
FORM + SCRIPT
<form action="chat_s.php" method="post" class="send" id="form1" >
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</p>
<div style="width: 480px; height: 400px; text-align: left;" id="DIV_CHAT">
</div>
<p>
<textarea id="msg" rows="5" cols="66" name="msg" placeholder="Your Message"></textarea></p>
</p>
<input class="submit" type="submit" id="button1" name="submit" value="Send" onfocus="this.blur()" />
</form>
<script>
var frm = $('#form1');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
ev.preventDefault();
});
</script>
This is the php file that is supposed to insert into the database the users input:
CHAT_S.PHP
<?php
include_once 'connection.php';
if(!isset($_POST['submit'])) {}else
{
$name = mysqli_real_escape_string( $mysqli,$_POST['name']);
$msg = mysqli_real_escape_string($mysqli, $_POST['msg']);
$dt = date("Y-m-d H:i:s");
$sql = "INSERT INTO messages (username, chatdate, msg) VALUES ('$name', '$dt', '$msg')";
mysqli_query($mysqli, $sql); }
$mysqli->close();
?>
But the result is nothing. It alerts nothing! And it does not insert anything into the database, it just refreshes the chat box :(

try:
var frm = $('#form1');
frm.submit(function (ev) {
f = $('#form1');
$.ajax({
type: f.attr('method'),
url: f.attr('action'),
data: f.serialize(),
success: function (data) {
alert(data);
}
});
ev.preventDefault();
});

Develop Reference

JavaScript is the programming language of the Web.

using AJAX to update query - javascript

Related

How to Live Search and Search After Click with Ajax

How to Call Ajax from HTML/JS to start PHP Function?

Ajax submitting form without refreshing page [duplicate]

Ajax form submit without page refresh

Form action onclick without refreshing with Ajax

Categories

Resources