Auto submit form to update ajax on html page

Question

I'm trying to use setInterval to refresh page data every 5 seconds. I have a simple html form with one textbox with the ID of 'name'. I have a submit button as well which works fine(code also below) but I can't get the page to POST on it's own. All help appreciated.

<script type="text/javascript" src="/media/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    window.setInterval(function() {
        AutoPost();
    }, 5000);
});

function AutoPost() {
    $.ajax({
        // post the form values via AJAX…
        var postdata = {name: $("#name").val()} ;
        $.post('/submit', postdata, function(data) {
            // and set the title with the result
            $("#title").html(data['title']) ;
           });
        return false ;
        });
    });
}


$(function() {
// When the testform is submitted…
$("#testform").submit(function() {
    // post the form values via AJAX…
    var postdata = {name: $("#name").val()} ;
    $.post('/submit', postdata, function(data) {
        // and set the title with the result
        $("#title").html(data['title']) ;
       });
    return false ;
    });
});

If you indent that code properly, and read the documentation for methods such as `$.ajax` and `$.post`, your syntax errors should be obvious (You can't stick a `$.post` method inside an `$.ajax` method) ! — adeneo, Aug 09 '13 at 17:02

score 0 · Accepted Answer · answered Aug 09 '13 at 17:07

<script type="text/javascript" src="/media/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    function autoPost(e) {
        if (e) e.preventDefault();
        var postdata = {name: $("#name").val()} ;
        $.post('/submit', postdata, function(data) {
            $("#title").html(data['title']) ;
        });
    }

    $(function() {
        $("#testform").on('submit', autoPost);
        setInterval(autoPost, 5000);
    });
</script>

You're my hero. Thanks for the help! – user2668641 Aug 09 '13 at 17:16 — user2668641, Aug 09 '13 at 17:16

score 0 · Answer 2 · edited May 23 '17 at 11:50

$.post and $.get are just shorthand versions of the more structured $.ajax(), so I prefer using the latter. The additional structure keeps me straight.

Here is a working version of your example:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                window.setInterval(function() {
                    AutoPost();
                }, 3000);

            }); //END $(document).ready()

            function AutoPost() {
            //  var myName = $("#name").val();
                $.ajax({
                    type: "POST",
                    url: "test134b.php",
            //      data: 'name=' + myName,
                    success: function(data) {
                        $("#title").html(data) ;
                    }

                });
            } //END fn AutoPost

        </script>
    </head>
<body>
    Current Time:<br />
    <div id="title"></div>
</body>
</html>

Here are some additional examples of simple AJAX constructions:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

Auto submit form to update ajax on html page

2 Answers2