Question

I wanted to refresh a div when a user submits a simple form. However I can’t seem to find out why it’s not working. (It’s my first time using JQuery and Ajax)

My Script:

 <script src="static/jquery.js"></script> 
        <script>
                $('#submit_div').click(function(){
                    var data: $("#name").val();
                    var datastr: 'name='+data;
                    $.ajax{
                        type: "POST",
                        url: $(this),
                        data: datastr,
                        success: function(data){
                            $("#content").replaceWith($('#content'),$(data));
                            }
                    }
                });

        </script>

My HTML:

<div id="content">
          <div id="form_div">
            <form method="POST">
                <div id="form"> 
                    <div id="name_div"> name <input type="text" id="name" name="name"/></div>
                    <div id="submit_div">  <button type="submit" id="submit" name="submit">submit</button></div>
                </div>
            </form>
 <div style="clear:both;"></div></div>             

Answer 1

Errors

var data: $("#name").val();
var datastr: 'name='+data;
$.ajax{...}
$("#content").replaceWith($('#content'),$(data));

Fixed

$('#submit_div').click(function(e){
    e.preventDefault();                
    var data = $("#name").val();
    var datastr='name='+data;
    $.ajax({
        type: "POST",
        url: $(this),
        data: datastr,
        success: function(data){
            $("#content").replaceWith(data);
        }
    });
});