Question

我正在使用面板栏，因此表格标签会打扰它的开/关动画

我发现表单标记正在创建问题，所以当我点击提交按钮时，我希望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。

有没有办法做到这一点？

Answer 1

使用Javascript + jQuery：

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

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

Answer 2

您只需使用Jquery -

就可以完成这项工作

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

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

Try This

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

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

Try This

Answer 3

如果您喜欢html5，可以查看html5“表单属性”，它允许您在任何地方使用表单元素，而不需要将内容包装在表单标记内。

检查出来

<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>

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

3 个答案: