Отображать необходимый текстовый ввод, когда выбрано Другое

Question

Мне нужно добавить текстовый ввод, который отображается только при выборе другого.И сделайте этот ввод обязательным, если он показан.Еще одна вещь, мне нужно ввести этот вход в ту же таблицу в базе данных.Кто-нибудь может помочь?Пожалуйста!

<form action="" method="post">
    <div class="row">`enter code here`
        <div class="col-sm-8 col-sm-offs et-2"> 
            <select class="form-control" name="country" id="country" required>
                <option value="">Please select your country</option>
                <option value="A">Country A</option>
                <option value="B">Country B</option>
                <option value="C">Country C</option>
                <option value="Other">Other</option>
            </select>
                <button type="submit" class="btn btn-gpsingh">Next</a>
             </div>
     </div>
  </form>

Answer 1

Попробуйте это

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
    <div class="row">
        <div class="col-sm-8 col-sm-offs et-2"> 
            <select class="form-control" name="country" id="country" required >
                <option value="">Please select your country</option>
                <option value="A">Country A</option>
                <option value="B">Country B</option>
                <option value="C">Country C</option>
                <option value="Other">Other</option>
            </select>

             <input type ="text" id="country_other" style="display:none">
                <button type="submit" class="btn btn-gpsingh">Next</a>
             </div>
     </div>
</form>

<script>
$("#country").change(function(){

    var value = this.value;
    if(value =='Other')
    {
        $("#country_other").show();
        $("#country_other").prop('required',true);
        $("#country_other").val('');

    }
     else
    {
       $("#country_other").hide();  
       $("#country_other").prop('required',false);
       $("#country_other").val('');
    }    

});
</script>