Когда первая буква введена в поле ввода, должна появиться кнопка отправки. - PullRequest
Новая
       6

Когда первая буква введена в поле ввода, должна появиться кнопка отправки.

0 голосов
/ 27 февраля 2020

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

Javascript Раздел : 

$('#cams_email').blur(function()
 {
    if(!$('cams_email').val())
    {
        $('#cams_submit').hide();
    }
    else
        $('#cams_submit').show();;
});

HTML Раздел : 

<div class="form-row form-group" id="cams_section" style="display: none;">
  <label class="col-md-5">
    <h5>Email ID<span class="form-required">*</span></h5>
  </label>
  <div class="col-md-7" id="cams_e">
    <input type="email" name="cams_email" id="cams_email" class="form-control">
  </div>
</div>
<button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

Я бы лучше использовал jQuery toggle () в этой ситуации, когда условие проверяет пустое значение. 

$(document).ready(function(){

$('#cams_email').on('blur keyup',function(){
$('#cams_submit').toggle($(this).val()!='');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row form-group" id="cams_section">
                            <label class="col-md-5">
                                <h5>Email ID<span class="form-required">*</span></h5>
                            </label>
                            <div class="col-md-7" id="cams_e">
                                <input type="email" name="cams_email" id="cams_email" class="form-control">
                            </div>
                        </div>
                        </div>
                        <button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>
0 голосов
/ 27 февраля 2020

Рабочий пример приведен во фрагменте ниже. Вы добавляете событие keyup к своему входу, и когда событие запускается, вы проверяете, было ли что-то записано (когда .val() не пусто), и если это так, вы удаляете display: none из отправки. кнопка. 

$("#cams_email").on("keyup", function(){
 if(!($(this).val() === '')){
     $("#cams_submit").css("display", "block");
 }
 else{
     $("#cams_submit").css("display", "none");
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row form-group" id="cams_section">
                                <label class="col-md-5">
                                    <h5>Email ID<span class="form-required">*</span></h5>
                                </label>
                                <div class="col-md-7" id="cams_e">
                                    <input type="email" name="cams_email" id="cams_email" class="form-control">
                                </div>
                            </div>
                           </div>
                            <button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>
...