How to continuously update a part of the page

forms, javascript, jquery, php

Solution

You can submit a form without refreshing a page something like this:

form.php:

<form action='profile.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

<div id='result'>Result comes here..</div>

profile.php:

<?php
      // All form data is in $_POST

      // Now perform actions on form data here and 
      // create an result array something like this
      $arr = array( 'result' => 'This is my result' );
      echo json_encode( $arr );
?>

jQuery:

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        // loop to set the result(value)
                        // in required div(key)
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

And If you want to call an ajax request without refreshing page after a particular time, you can try something like this:

var timer, delay = 300000;

timer = setInterval(function(){
    $.ajax({
      type    : 'POST',
      url     : 'profile.php',
      dataType: 'json',
      data    : $('.ajaxform').serialize(),
      success : function(data){
                  for(var id in data) {
                    jQuery('#' + id).html( data[id] );
                  }
                }
    });
}, delay);

And you can stop the timer at any time like this:

clearInterval( timer );

Hope this will give you a direction to complete your task.

Problem

http://pastebin.com/dttyN3L6 The file that processes the form is called upload.php I have never really used jquery/js so I am unsure how I would do this or where I would put the code. It has something to do with this `setInterval (loadLog, 2500);` Also, how can I make it so the user can submit a form without the page refreshing? ``` $.ajax({ type: "POST", url: "upload.php", data: dataString, success: function() { } }); return false; ` ``` and ``` <?php $conn1 = mysqli_connect('xxx') or die('Error connecting to MySQL server.'); $sql = "SELECT * from text ORDER BY id DESC LIMIT 1"; $result = mysqli_query($conn1, $sql) or die('Error querying database.'); while ($row = mysqli_fetch_array($result)) { echo '<p>' . $row['words'] . '</p>'; } mysqli_close($conn1); ?> </div> <?php if (!isset($_SESSION["user_id"])) { } else { require_once('form.php'); } ?> ```

Original source