Simple Div Replacement from Form

JavaScript
1

I’m sure I’m missing something pretty obvious but I seem to have hit a wall. I basically want a form to submit and then the results of that to be replaced in the div. Everything seems right in firebug. The data is being posted and the result looks right but it’s just not replacing the div with the result. What am I missing? Thanks!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    function sendData()
    {
        $.ajax({
            type : 'POST',
            url : "remote/step1.php",
            data : $("form").serialize(),

            success : function(result){
                $("#form_1").replaceWith(result);
            }
        });
        event.preventDefault();
    }
</script>
<div id="form_1">
    <form action="" method="post">
        <label for="field1">Item 1</label>
        <input type="text" id="field1" name="field1">
        <input type="submit" value="Submit" name="submit" onclick="sendData()">
    </form>
</div>
2

I could be wrong, but I don’t see “event” initialized or passed to the function.

HTH,

:slight_smile:

3

You’re using an awfully old version of jQuery. I think that is from around early 2009. Any reason why?

I’m not sure if this will work, but you could try adding:


$(document).ready(function() {
    $('form').submit(function(e){
       e.preventDefault(); 
       sendData();
     });
});

This will create an event handler for the form submit.

You should really assign the form an ID though and reference that ID instead of a generic ‘form’. If you have any other forms on the page, it will catch it for them as well.

4

Not really! I haven’t used JQuery in a long time and wanted to get back into it. I think I just copied it from the last script I wrote.

I’ve updated the code and it almost works fully. I planned on making it a two part form and it all does work but on the second step the HTML doesn’t update to the step 2 output. I have a feeling you can’t have two event handlers the way I slapped together the code. But I’m at a loss as to what the correct way would be.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    function sendData()
    {
        $.ajax({
            type : 'POST',
            url : "remote/step1.php",
            data : $("#form_part1").serialize(),

            success : function(result){
                $("#the_form").replaceWith(result);
            }
        });
        event.preventDefault();
    }
    function sendData2()
    {
        $.ajax({
            type : 'POST',
            url : "remote/step2.php",
            data : $("#form_part2").serialize(),

            success : function(result){
                $("#the_form").replaceWith(result);
            }
        });
        event.preventDefault();
    }
    $(document).ready(function() {
        $("#form_part1").submit(function(e){
            e.preventDefault();
            sendData();
        });
        $("#form_part2").submit(function(e){
            e.preventDefault();
            sendData2();
        });
    });
</script>
<div id="the_form">
    <form action="" method="post" id="form_part1">
        <label for="field1">Item 1</label>
        <input type="text" id="field1" name="field1">
        <input type="submit" value="Submit" name="submit" onclick="sendData()">
    </form>
</div>
5

I didn’t see anything overtly wrong with your code. It’s fine to have multiple event handlers. You can’t have multiple ID’s on a page, however. So I’m not sure if you tried having 2 div’s with the same ID or not.

Is it throwing an error?

Also, this is pretty much the same thing you have but more DRY. (Don’t Repeat Yourself)


    function sendData(form)
    {
        $.ajax({
            type : 'POST',
            url : form.attr('action'),
            data : form.serialize(),

            success : function(result){
                form.parent().replaceWith(result); // should replace the form's parent div with the result
            }
        });
    }

    $(document).ready(function() {
        $(".formClass").submit(function(e){
            e.preventDefault();
            sendData($(this));
        });
    });



<div class="the_form">
    <form action="remote/step1.php" method="post" id="form_part1" class="formClass">
        <label for="field1">Item 1</label>
        <input type="text" id="field1" name="field1">
        <input type="submit" value="Submit" name="submit" onclick="sendData()">
    </form>
</div>
<div class="the_form">
    <form action="remote/step2.php" method="post" id="form_part2" class="formClass">
        <label for="field1">Item 1</label>
        <input type="text" id="field1" name="field1">
        <input type="submit" value="Submit" name="submit" onclick="sendData()">
    </form>
</div>