send information to database without having page reload

Question

I have a site where you type into a text box and it will send what I wrote to my database.

I have been stuck with my page having to reload which is very troubling in my case. i am not familiar with ajax but i have heard it can be used to complete this task. i have 2 files one is called demo.php this sends the information to the server and at this time has a header that redirects me back to that page which i don't want.

I want to be able to keep sending things data to the sever without the page reloading. the other page is the index.php this is were i right into the text box and send the text to my database both files are listed below.

this is the demo.php

<?php
header("Location: http://mywebsite.com"); 
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$value = $_POST['firstname'];

$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')";


if ($conn->query($sql) === TRUE) {
    echo "working";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

this is the forum on index.php were i enter the information and send it. i need it to stay on that page and not reload in any way.

 <form action="demo.php" method="post" />
<p> <input id="textbox" type="text" name="firstname" placeholder="Enter What You Want Your Message To Be" /></p>
<input id="textbox1" type="submit" value="Submit" />
</form>

my second attempt at index.php

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="navigation.css href="navigation/navigation.css">
  <link rel="stylesheet" href="navigation/navigation.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>


</head>
<body>
<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="button" name ="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " >
</form>
</body>

<script>
function submitForm(form){
    var url = form.attr("action");
    var formData = $(form).serializeArray();
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}
$("#ajax-form").submit(function() {
submitForm($(this));
});
</script>
</html>

Possible duplicate of [Basic PHP and AJAX](http://stackoverflow.com/questions/5298401/basic-php-and-ajax) — VeeeneX, Jan 23 '16 at 11:37

ameenulla0007 · Answer 1 · 2016-01-23T11:57:40.907

1

You can have two files/pages for your purpose:

1. Form page
2. Ajax processing page where you request values will be inserted into your database.

Add this to your head tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

Steps to utilize ajax:

1. Include jquery library in form page
2. Include html form
3. Save values from ajax, that means process that ajax

HTML form suppose to be like this:

<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name="send" value="send" >
</form>

Ajax call:

    function submitForm(form){
    var url = form.attr("action");
    var formData = $(form).serializeArray();
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}
$("#ajax-form").submit(function() {
submitForm($(this));
return false;
});

ajax_target.php handles formData, its validation and insertion to database.

edited Jan 23 '16 at 11:57

answered Jan 23 '16 at 11:23

ameenulla0007

2,663
1
12
15

in my case how would i add php requests and insertion because i have no idea were to put the function. – Jack Jan 23 '16 at 11:32
in the same manner, how you kept for demo.php, here in your case ajax_target.php is your demo.php – ameenulla0007 Jan 23 '16 at 11:33
what area would i place the function – Jack Jan 23 '16 at 11:34
and were do i call the call jQuery library in your head tag – Jack Jan 23 '16 at 11:34
below the html form, preferably in footer. – ameenulla0007 Jan 23 '16 at 11:35
jquery library in the head tag.. obvious.. mentioned in my answer. already!! – ameenulla0007 Jan 23 '16 at 11:35
how would i call it in the head tag – Jack Jan 23 '16 at 11:36
jquery library!!! great!!! https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js – ameenulla0007 Jan 23 '16 at 11:36
add this to your head tag – ameenulla0007 Jan 23 '16 at 11:37
@ameenulla0007 jQuery doesn't need to be included in head tag, it's just an opinion. – VeeeneX Jan 23 '16 at 11:40
ill add the function in as a – Jack Jan 23 '16 at 11:41
oh @Jack i didn't check your age, great!! appreciable.. http://www.w3schools.com/jquery/jquery_ajax_intro.asp.. check the tutorial for more info. – ameenulla0007 Jan 23 '16 at 11:44
hi i have added the code at the end which is of my forum page index.php please check it – Jack Jan 23 '16 at 11:52
you have missed double quote there in your edited html while linking css. – ameenulla0007 Jan 23 '16 at 11:55
its not uploading to my database – Jack Jan 23 '16 at 11:59
check my updated answer. and go through your do's and don'ts in your source. – ameenulla0007 Jan 23 '16 at 12:00
what do you mean do's and don'ts whats that – Jack Jan 23 '16 at 12:02
my ajax is in my form i haven't added anything to ajax_target.php – Jack Jan 23 '16 at 12:04
obvious, you need to add your statements there, means your insertion to database.. – ameenulla0007 Jan 23 '16 at 12:06
ok at the moment the button isn't working but if i press enter the page loads up a press link which takes me to a twitter page i have in my code for some reason – Jack Jan 23 '16 at 12:07
no thats all i have in my ajax_target.php i only have the code from what i have above which is under demo.php – Jack Jan 23 '16 at 12:08
Mr. @Jack, seems like i need to tell you all in depth. Okay, will post you another answer. read it carefully, and try out. – ameenulla0007 Jan 23 '16 at 12:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101465/discussion-between-jack-and-ameenulla0007). – Jack Jan 23 '16 at 13:00

Sanjeev Kumar · Answer 2 · 2016-01-23T13:02:21.833

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="navigation.css href="navigation/navigation.css">
  <link rel="stylesheet" href="navigation/navigation.css">
</head>
<body>
<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name ="send" value="send" >
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script>
    $(document).ready(function(){
        var options = {
            beforeSend: function () {
                   if (!confirm('Are you sure to submit ?')) {
                                return false;
                            }
                     },
            success: function (response) {
                            alert(response);
                   },
            error: function (response) {
                            alert(response);
                    };
                 }
                    $('#ajax-form').ajaxForm(options);
    });
        </script>
</body>
</html>

updated your index.php

all scrips now in my head but when i type something in and press the button it still isn't coming up in my database — Jack, Jan 23 '16 at 12:11
Please use document.ready and try it - $(document).ready(function(){ $('#form_id').ajaxForm(); }); — Sanjeev Kumar, Jan 23 '16 at 12:12
and put all this in script in a php file which is index.php which has the forum in it — Jack, Jan 23 '16 at 12:14

score 1 · Answer 3 · answered Jan 23 '16 at 12:18

1

your html/index form consists

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<form action="demo.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name="send" value="send" >
</form>
</body>

<script>
function submitForm(form){
    var url = form.attr("action");
    var formData = $(form).serializeArray();
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}
$("#ajax-form").submit(function() {
submitForm($(this));
return false;
});
</script>
</html>

your demo.php includes

<?php
//your db insertion goes here.
echo "inserted successfully";
?>

answered Jan 23 '16 at 12:18

ameenulla0007

2,663
1
12
15

I'm sorry to say the message is coming up but its still not showing in my database. – Jack Jan 23 '16 at 12:30
all the initiation code works fine without the ajax but its now not uploading at all – Jack Jan 23 '16 at 12:37
if there is an alert "inserted successfully", it means the ajax is working fine. now you need to add up your insertion query and statement in demo.php. – ameenulla0007 Jan 23 '16 at 12:39
i have everything in and everything as i should have – Jack Jan 23 '16 at 12:49
if i had my old way everything would upload but this way nothing is actually geting sent to my database through the ajax – Jack Jan 23 '16 at 12:51
ill continue this tomorrow – Jack Jan 23 '16 at 12:52

send information to database without having page reload

3 Answers3