0

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>

Improve this question
1

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

23 Comments

in my case how would i add php requests and insertion because i have no idea were to put the function.
in the same manner, how you kept for demo.php, here in your case ajax_target.php is your demo.php
what area would i place the function
and were do i call the call jQuery library in your head tag
below the html form, preferably in footer.
|
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";
?>
Improve this answer

6 Comments

I'm sorry to say the message is coming up but its still not showing in my database.
all the initiation code works fine without the ajax but its now not uploading at all
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.
i have everything in and everything as i should have
if i had my old way everything would upload but this way nothing is actually geting sent to my database through the ajax
|
1 
<!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

Improve this answer

4 Comments

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
Please use document.ready and try it - $(document).ready(function(){ $('#form_id').ajaxForm(); });
and put all this in script in a php file which is index.php which has the forum in it
use input type = submit instead of button . <input type="submit" >

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.