How to select parent div of a form in JQuery?

here is what i got

<div id="right">
    <from id="test">
        <input type="submit">
    </form>
    </div>

and a lil jquery

    $(document).ready(function(){


        $('form').submit(function()
                         {
                             $(this).parent().html('<h1>1</h1>');
                         });
    });

you can play with that here,

and by clicking on submit button it should put <h1>1</h1> in div#right but it don't !

Cause this is a form in this case but it works with button label or any thing else and I think that is because form is not a DOM node.

So how can I select the parent of a form, or in other words how can i select the Div that contents the form ?

Update: as it was a part of an ajax call i wanted to break it down and find the problem but i had made a typo which cost me an hour or 开发者_如何学编程so, but the problem with ajax was that you $(this) inside success: is not the form any more so i did like this

    `$('form').submit(function(){
        form = $(this);//  I set the form to a varible !!

                 $.ajax({



   type: "POST", url: "ajax.php", data: $(this).serialize(),

                success: function(data){
                    $(form).parent().html(data); // I used the varible i set to form before!
                               }});`

anyways, how can i mark this question as solved ?!

As Chowlett says, use form rather than from.

That code will then work, because the $(this) inside the submit function will select the form element, the parent of which is is the #right div.

You could use .parent('div') to make sure you select a div, and not anything else.

as it was a part of an ajax call i wanted to break it down and find the problem but i had made a typo which cost me an hour or so, but the problem with ajax was that $(this) inside success: is not the form any more so i did like this

$('form').submit(function(){
        form = $(this);//  I set the form to a varible !!

                 $.ajax({



   type: "POST", url: "ajax.php", data: $(this).serialize(),

                success: function(data){
                    $(form).parent().html(data); // I used the varible i set to form before!
                               }});