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?
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.
ReplyDelete$(function(){
$('#categorylist').change(function(){
if( $('#categorylist').val() == 'custom' )
$('#categorylist').replaceWith('<input type="text" name="category">');
});
});
See my test.