Question

Let’s say I have this form:

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

I wanted to change the select into an input when I select custom so I came up with this:

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

But when the select is changed into an input, $_POST['category'] isn’t there when i dumped $_POST on form submission. Why is it so?

Answer 1

You should replace the <select> with </select> and <input type="submit> to <input type="submit"> in your html. With following javascript there is no problem with .replaceWith() and submitting form.

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

See my test.