Convert/Изменить Div элемент с элементом формы

Question

Я использую panelbar, следовательно, образуют тег мешая его открытия/закрытия анимации

Я обнаружил, что форма тег создает проблему, поэтому я хочу 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> 

Так что все, что я хочу изменить DIV с классом ".myForm" к форме элемента и закрытия DIV с формой закрытия тега.

Есть ли способ сделать это?

Answer 1

Использование JavaScript + Jquery:

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

Это удаляет оберточную DIV ".myForm" с помощью метода unwrap. Затем обертывает его детьми методом wrapAll.

Answer 2

Если вы делаете что-то вроде 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> 

Answer 3

Вы можете сделать эту работу просто с помощью Jquery -

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

Но если вы хотите, чтобы это сделать, это не правильно, потому что вы используете назначить id некоторого элемента , Поэтому после добавления всего HTML в <form> вы должны удалить .myForm.

Try This

Для удалить DIV with class .myForm после Append innerhtml в форму, вы можете просто использовать .remove.

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

Try This