使用 Form 元素转换/更改 Div 元素答案

【问题标题】：Convert / Change Div element with Form element使用 Form 元素转换/更改 Div 元素
【发布时间】：2013-07-27 06:56:30
【问题描述】：

我正在使用面板栏，因此表单标签干扰了它的打开/关闭动画

我发现表单标签正在创建问题，所以我希望 div 标签在我点击提交按钮时转换为表单标签。

例如：

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

转换为：

<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="income">
    Income: <input type="text" name="text_income" value="your income"/>
</div>
    <input type="submit" value="Submit" />
</form>

所以我想要的只是将类“.myForm”的 div 更改为 Form 元素并用关闭表单标签关闭 div。

有什么办法吗？

【问题讨论】：

你可以在div之前添加表单元素......

标签： javascript jquery forms html

【解决方案1】：

使用 Javascript + jQuery：

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

这将使用 unwrap 方法删除包装 div ".myForm"。然后用wrapAll 方法包装它的孩子。

【讨论】：

不确定为什么这被否决了。它完全符合 OP 的要求。竞争对手的回答者？
正是我想要的

【解决方案2】：

您可以简单地使用 Jquery 完成这项工作 -

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

但是如果你想这样做，这是不正确的，因为你使用了一些元素的分配id。因此，在将整个 HTML 附加到 <form> 之后，您应该删除 .myForm。

Try This

要在将innerhtml 附加到表单后删除div with class .myForm，您可以简单地使用.remove。

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

Try This

【讨论】：

【解决方案3】：

如果你喜欢html5，可以查看html5的“form Attribute”，它可以让你在任何你喜欢的地方使用表单元素，并且你不需要将内容包裹在表单标签内。

看看这个

<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="income">
       Income: <input type="text" name="text_income" value="your income" form="myform" />
    </div>
    <input type="submit" value="Submit" form="myform" />
</div>

【讨论】：