Некоторые значения формы не получают поданные после использования .replaceWith()

Question

Скажем, у меня есть этот вид:

<form action="submit" method="post"> 
<select name="category" id="categorylist"> 
<option value="love">Love</option> 
<option value="magic">Magic</option> 
<option value="custom">Custom</option> 
</select> 
<textarea name="content">SomeContent</textarea> 
<input type="submit"> 
</form> 

Я хотел изменить select в input когда я выбираю заказ, так что я пришел с этим:

$(function(){ 
    $('#categorylist').change(function(){ 
    $(this).replaceWith('<input type="text" name="category">'); 
    }); 
    if($('#categorylist').val() == 'custom') 
    $('#categorylist').replaceWith('<input type="text" name="category">'); 
}); 

Но когда выбор изменяется на входе, $_POST['category'] не там, когда я свалил $_POST по форме представления. Почему это так?

Answer 1

Вы должны заменить <select> на </select> и <input type="submit> на <input type="submit"> в вашем html. Со следующим javascript нет проблем с .replaceWith() и отправкой формы.

$(function(){ 
    $('#categorylist').change(function(){ 
     if($('#categorylist').val() == 'custom') 
      $('#categorylist').replaceWith('<input type="text" name="category">'); 
    }); 
}); 

См. my test.