Question

仅在填写必填字段后，我试图更改“提交”按钮的值。但是按照我下面的代码，即使没有填写必填字段，值也会改变，此外，我还需要有关如何标记至少一个复选框字段的建议。

$('#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>

Answer 1

您可以改为收听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>

Answer 2

$(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>

Answer 3

我正在添加解决方案，因为似乎没有人回答问题的第二部分。您需要按照答案中的以下步骤对标记进行一些修改。

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>

Answer 4

Id必须是唯一的。必须为每个复选框分配唯一的ID。将必填属性添加到复选框控件。

  <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/

填写所有必填字段后如何更改按钮值

4 个答案: