let a forum in a div reload without the page reloading

Question

I am curious to know if it's possible that I can have a div reload like a window does. The reason for this is I have a forum but I don't want a full page reload after four is completed. So I was wondering if just the elements that are in that div or forum section could do a background reload or just load by them self when the submit button is pressed.

This is in a file called forum where the information gets typed in. I want it to not reload the page but stay on that forum and still send the data to the database.

<html>
    <body>
    
        <form action="demo.php" method="post" />
            <p>Input 1: <input type="text" name="firstname" /></p>
            <input type="submit" value="Submit" />
        </form>

        <div id = "load_results"></div>
    </body>
</html>

This is sending the information to the database but I want it to be done discreetly.

<?php
$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 "<a href=https://twitter.com/angela_bradley>My Twitter</a>";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Ajax is what you need to use. – Rasclatt Jan 21 '16 at 03:31 — Rasclatt, Jan 21 '16 at 03:31
Fixed grammar & code indentation – wogsland Jan 23 '16 at 04:40 — wogsland, Jan 23 '16 at 04:40

score 0 · Answer 1 · edited May 23 '17 at 12:30

Yes, there is a way. It is called AJAX - but, not to worry, it's pretty simple.

Your code will look something like this:

HTML:

<form action="demo.php" method="post" />
    <p>Input 1: <input type="text" name="firstname" /></p>
    <input type="submit" value="Submit" />
</form>

js/jQuery:

$(function(){
    $('form').submit(function(evt){
    //next line stops form submission from sending you to `demo.php`
    evt.preventDefault(); //evt stands for "event" - can be anything. I use e.preventDefault()
    var fn = $('[name=firstname]').val();
    $.ajax({
        type: 'post',
         url: 'demo.php', //send data ONLY to demo.php -- page stays as it is
        data: 'first='+fn,
        success: function(d){
            if (d.length) alert(d);
        }
    }); //END ajax
}); //END document.ready

demo.php

<?php
    $fn = $_POST['fn'];
    //Do your database insert here

    //If you wish, you can return some data to the AJAX's success function:
    echo 'You submitted: ' .$fn;

Here are some posts with simple AJAX examples:

AJAX request callback using jQuery

i have tried to use this code but it doesn't answer my question — Jack, Jan 21 '16 at 04:45

let a forum in a div reload without the page reloading

1 Answers1