Как сделать jQuery select onchange

Question

Я хочу сделать забыли пароль. Страница может использовать электронную почту или смс, я хочу сделать кнопку выбора для выбора другой. Может мне помочь?

Это мой взгляд

<div class="form-group"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 col-xxs"> 
       <label class="control-label">Confirm Email Address</label> 
      </div> 
      <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7 col-xxs"> 
       <input placeholder="Email address." class="form-control" type="text" name="re_email" value="<?php echo input_data('re_email'); ?>"> 
        <?php echo form_error('re_email'); ?> 
      </div> 
     </div> 
    </div> 
<div class="form-group"> 
     <div class="row"> 
      <div class=" 
       col-lg-offset-3 col-md-offset-3 col-sm-offset-4 
       col-lg-9 col-md-9 col-sm-8 
       "> 
       <input type="submit" class="btn btn-sm btn-primary" value="Submit"> 
      </div> 
     </div> 
    </div> 

Answer 1

Там же много способов, как вы можете достичь этого. Я представляю вас, первый пришел мне на ум. Кроме того, это зависит от того, как вы хотите, чтобы ваш UX работал.

<div class="form-group hidden"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 col-xxs"> 
      <label class="control-label">Select email or sms</label> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7 col-xxs"> 
      <select class="form-control my-select" name="re_email"> 
       <option value="">Select One</option> 
       <option value="email">Email</option> 
       <option value="sms">SMS</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="form-group hidden" id="email-input"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5 col-xxs"> 
      <label class="control-label">Confirm Email Address</label> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-5 col-xs-7 col-xxs"> 
      <input placeholder="Email address." class="form-control" type="text" name="re_email" value="<?php echo input_data('re_email'); ?>"> 
       <?php echo form_error('re_email'); ?> 
     </div> 
    </div> 
</div> 
<div class="form-group hidden" id="sms-input"> 
    <div class="row"> 
     <div class=" 
      col-lg-offset-3 col-md-offset-3 col-sm-offset-4 
      col-lg-9 col-md-9 col-sm-8 
      "> 
      <input type="submit" class="btn btn-sm btn-primary" value="Submit"> 
     </div> 
    </div> 
</div> 

<style type="text/css"> 
    .hidden{display: none;} 
</style> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $(document).on('change', '.my-select', function() { 
      var selection = $(this).val(); 
      $('input[type=text]').addClass('hidden'); 
      $('#' + selection + '-input').removeClass('hidden'); 
     }); 
    }); 

</script> 

Во-первых, вам нужно выбрать ввод с двумя вариантами. Затем дайте свой адрес электронной почты и смс скрытый класс, чтобы они не отображались до тех пор, пока пользователь не выберет параметр (не забудьте элемент стиля, который фактически применяет скрытый класс). Затем jQuery ..... получите значение входного параметра select и используйте его для доступа к элементу электронной почты или смс с помощью атрибута id. С помощью jquery вы добавляете скрытый класс сначала ко всем текстовым вводам (email и sms), чтобы скрыть их, а затем вы показываете только одного пользователя.

Дайте мне знать, если это поможет.

Answer 2

Вы можете взять две кнопки радио, чтобы выбрать по электронной почте или SMS Id:

$(document).ready(function() 
{ 
    $('input[type=radio][name=forgotpass]').change(function() 
    { 
     if (this.value == 'email') 
     { 
     do something 
     } 
     else if (this.value == 'sms') 
     { 
     do something 
     } 
    }); 
});