javascript - ConvertChange Div element with Form element - Stack Overflow

admin管理员组

文章数量:1385032

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

Share Improve this question Follow asked Jul 27, 2013 at 6:56 Darshit GajjarDarshit Gajjar 71144 gold badges1313 silver badges2626 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

本文标签： javascriptConvertChange Div element with Form elementStack Overflow