CODEWITHSUNDEEP
javascriptjqueryformshtml
Darshit Gajjar
Darshit Gajjar

Reputation: 721

Convert / Change Div element with Form element

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

Upvotes: 0

Views: 4970

Answers (3)

Ishan Jain
Ishan Jain

Reputation: 8161

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

Upvotes: 1

Ashis Kumar
Ashis Kumar

Reputation: 6544

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

Upvotes: 0

shennan
shennan

Reputation: 11656

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.

Upvotes: 6

Related Questions