I'm using panelbar, hence form tag is disturbing it's open/close animation

I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.

Eg:

<div class="myForm">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="ine">
    Ine: <input type="text" name="text_ine" value="your ine"/>
</div>
    <input type="submit" value="Submit" />
</div>

Convert to:

<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="ine">
    Ine: <input type="text" name="text_ine" value="your ine"/>
</div>
    <input type="submit" value="Submit" />
</form>

So all I want is change the div with class ".myForm" to Form element and closing div with closing form tag.

Is there any way to do this?

I'm using panelbar, hence form tag is disturbing it's open/close animation

I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.

Eg:

<div class="myForm">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="ine">
    Ine: <input type="text" name="text_ine" value="your ine"/>
</div>
    <input type="submit" value="Submit" />
</div>

Convert to:

<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="ine">
    Ine: <input type="text" name="text_ine" value="your ine"/>
</div>
    <input type="submit" value="Submit" />
</form>

So all I want is change the div with class ".myForm" to Form element and closing div with closing form tag.

Is there any way to do this?

• javascript
• jquery
• forms
• html

• 1 u can add form elements before the div.... – Malaiyandi Murugan Commented Jul 27, 2013 at 6:59

3 Answers 3

Use Javascript + jQuery:

$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");

This removes the wrapping div ".myForm" with the unwrap method. Then wraps it's children with the wrapAll method.

You can done this work simply using Jquery -

$(document).ready(function(){    
   $('form').html($('.myForm').html());
});

But if you want to do this, this is not correct because you use assign id of some element. So after append whole HTML into <form> you should remove .myForm.

Try This

For remove div with class .myForm after append innerhtml into form, you can simply use .remove.

 $(document).ready(function(){    
       $('form').html($('.myForm').html());
       $('.myForm').remove();
    });

Try This

If you do like html5, you can check out html5 "form Attribute", which allows you to use the form elements wherever you like, and you don't need to wrap the contents inside form tags.

Check this out

<form name="input" id="myform" action="html_form_action.php" method="post"></form>

<div class="myForm">
    <div id="detail">
       Name: <input type="text" name="text_name" value="Some text here to edit" form="myform" />
    </div>
    <div id="ine">
       Ine: <input type="text" name="text_ine" value="your ine" form="myform" />
    </div>
    <input type="submit" value="Submit" form="myform" />
</div>