Как изменить значение кнопки после заполнения всех обязательных полей - PullRequest
Новая
       2

Как изменить значение кнопки после заполнения всех обязательных полей

0 голосов
/ 25 января 2019

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

$('#formSubmit').click(function(){
  $(this).val("Processing");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Call Me
    <input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
  </label>
  <br />
  <label>Email Me
    <input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
  </label>
  <br />
  <hr />
  <input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
  <br />
  <input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
  <br />
  <input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
  <br />
  <input type="submit" id="formSubmit" value="Submit" />
</form>

Ответы [ 4 ]

0 голосов
/ 25 января 2019

Идентификатор должен быть уникальным. Уникальный идентификатор должен быть назначен каждому флажку. Добавьте обязательный атрибут в элементы управления флажка. 

  <label>Call Me
   <input type="checkbox" name="contactMethod[]" id="callMe" value="CAll Me" required>
  </label>
  <br />
  <label>Email Me
   <input type="checkbox" name="contactMethod[]" id="emailMe" value="Email Me" required>
  </label>

Вы можете использовать $(elem).val() != '', чтобы проверить, был ли введен элемент ввода.

Для флажка вы можете использовать $(elem).prop('checked'), чтобы проверить, установлен ли флажок. 

$(document).ready(function(e) {
 $('#formSubmit').click(function(e){
  if((!$('#callMe').prop('checked') || !$('#emailMe').prop('checked')) && $('#formName').val() != '' && $('#formEmail').val() != '' && $('#formMobile').val() != '')
  $(this).val("Processing");
 });
});

https://jsfiddle.net/snehansh/nwh0vct8/3/

0 голосов
/ 25 января 2019 

$(document).ready(function(e) {
    function validateForm() {
      var isValid = true;
      $('input[required]').each(function() {
      if ( $(this).val() === '' ){
        isValid = false;
      }
  });
  return isValid;
}

$('#formSubmit').click(function(){
    if(validateForm()) {
      $(this).val("Processing");

    }
            
});

   
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>

<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>


</body>
0 голосов
/ 25 января 2019

Я добавляю свое решение, поскольку никто не отвечает на вторую часть вопроса. Вам нужно немного изменить разметку, как показано ниже в ответе. 

function makeChecks() {
  checkBoxes = $("input:checked"); //Find checked checkboxes
  if (checkBoxes.length) { //Only submit if some checked checkbox(es) exist
    $('#exampleForm').find('input').each(function() {
      if ($(this).prop('required') && $(this).val() !== "") {
        $("#formSubmit").val("Processing");
      }
    });
  }
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form id="exampleForm">
    <label>Call Me
            <input type="checkbox" name="contactMethod[]" 
            id="contactMethod[]" value="CAll Me">
        </label>
    <br />
    <label>Email Me
            <input type="checkbox" name="contactMethod[]" 
            id="contactMethod[]" value="Email Me">
        </label>
    <br />
    <hr />
    <input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
    <br />
    <input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
    <br />
    <input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
    <br />
    <input type="submit" id="formSubmit" onclick="makeChecks()" value="Submit" />
  </form>
</body>
0 голосов
/ 25 января 2019

Вы можете прослушать submit событие вместо: 

$(document).ready(function(e) {
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        $('#formSubmit').val("Processing");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <form id="myForm">

        <label>Call Me
            <input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
        </label>
        <br />
        <label>Email Me
            <input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
        </label>
        <br />
        <hr />
        <input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
        <br />
        <input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
        <br />
        <input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
        <br />
        <input type="submit" id="formSubmit" value="Submit" />
    </form>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...