Question

I’m working on a simple php contact form and struggling to get the “other” selection on the dropdown to show a text field option when it’s selected. The form is included onto the page with <?php require_once('includes/contact_form.php'); ?> and the footer is also an include (the footer is where I have added the JS).

But it just wont work…

Here is the Form:

<label>How did you hear about us?</label>
<select name="how" class="selectfield" id="how">
  <option value="">Please Select...</option>
  <option value="Advertisement">Advertisement</option>
  <option value="Care at Home Today">Care at Home Today</option>
  <option value="Email-Newsletter">Email/Newsletter</option>
  <option value="Facebook">Facebook</option>
  <option value="Family-Friend">Family or Friend</option>
  <option value="Magazine">Magazine Article</option>
  <option value="Twitter">Twitter</option>
  <option value="Website-Search Engine">Website/Search Engine</option>
  <option value="Other">Other</option>
</select>
<input type='text' id="other" class="hidden" />

<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />
</form>

Here is the JS

$('#how').change(function(){
    var selected_item = $(this).val()
    if(selected_item == "other"){
        $('#other').val("").removeClass('hidden');
    }else{
        $('#other').val(selected_item).addClass('hidden');
    }
});

Answer 1

Not sure if it is a typo in the question but your dropdown value is “Other” and in your js you are testing for “other”. So there is a mismatch. Might be your issue

Here is a working fiddle of your example just changing the “other” to “Other” in your if statement.

DEMO

As coder1984 has suggested though, simply using jquery’s .show() and .hide() in your if
statement would also work.

if(selected_item == "Other"){
    $('#other').val("").show()
}else{
    $('#other').val(selected_item).hide()
}