>source

단계가있는 양식이 있습니다. 마지막 단계에서 다른 페이지로 양식을 보내야합니다. 내 스크립트에서 입력을 확인하고 선택했습니다. 하지만 확인란이 선택되어 있고 전송이 제한되어 있지 않은 경우 확인을 추가하려면 어떻게해야하나요?

이것을 시도하고 있습니다 :

<form id="regForm" method="POST" action="my action">
<div class="tab">FIRST Tab</div>
<div class="tab">END TAB BEFORE SUBMIT
<input placeholder="Name" oninput="this.className = ''" name="first_name" value="">
<input placeholder="Last Name" oninput="this.className = ''" name="first_name" value="">
<label id="chkbx"><font color="red">Yes</font>, OK TEST
    <input type="checkbox" oninput="this.className = ''"></label>
</div>
BUTTONS NEXT AND PREVIUS ON LAST PAGE CHANGE NEXT BUTTON TO SUBMIT 
 <button type="button" class="button-base button-blue wow animated" data-wow-duration="2s" data-wow-delay="0s" data-wow-iteration="10" id="prevBtn" onclick="nextPrev(-1)">Назад</button>
    <button type="button" class="button-base button-blue wow animated" data-wow-duration="2s" data-wow-delay="0s" data-wow-iteration="10" id="nextBtn" onclick="nextPrev(1)"><i class="fas fa-cart-plus"></i> Продължете с поръчката</button>
</form>

그리고 내 자바 스크립트는 탭 변경, 제출 탭, 확인 탭과 같은 모든 것에 사용되었습니다 ...

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Към плащане";
  } else {
    document.getElementById("nextBtn").innerHTML = "<i class='fas fa-cart-plus'></i> Продължете с поръчката";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}
function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var  x, b, y, n, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  n = x[currentTab].getElementsByTagName("select");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  for (i = 0; i < n.length; i++) {
    // If a field is empty...
    if (n[i].value == "") {
      // add an "invalid" class to the field:
      n[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}
function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}


  • 답변 # 1

    <input type="checkbox" oninput="this.className = ''"></label>
    
    

    확인란에 id 필드 추가

      <input type="checkbox" id="checkBoxId" oninput="this.className = ''"></label>
    
    

    양식 제출 전에 확인란이 선택되어 있는지 확인할 수 있습니다.

    document.getElementById("regForm").submit();
    
    

    이 줄을 다음과 같이 바꾸십시오

    if(document.getElementById('checkBoxId').is(':checked')){
        document.getElementById("regForm").submit();
    }else{
    //anything you want
    }
    
    

  • 답변 # 2

    이 코드와 지침을 따를 수 있습니다 :

    먼저 제출할 함수를 호출합니다

    <FORM NAME="myForm" onSubmit="return yourFunction()">
    
    

    jquery를 사용하여 확인란이 선택되어 있는지 확인

    function yourFunction(e) {
      e.stopPropagation();
      e.preventDefault();
      return ($('#mycheck').is(':checked'));
    }
    
    

    체크 박스가 선택된 경우 제출을 승인하지 않으면 제출하지 않습니다

    두 번째 프로세스는

    $('#myform').on('submit',  function(event) {
      event.preventDefault();
      event.stopPropagation();
      
      ($('#mycheck').is(':checked'))?console.log('submit allow') : console.log('Not allow submit');
      
      return ($('#mycheck').is(':checked'));
    });
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form action="#" id="myform">
      <input type="text" >
      <input type="checkbox" id="mycheck">
      <button>submit</button>
    </form>
    
    

    == 감사합니다 ==

  • 답변 # 3

    HTML 코드 :

    <form action="./addUser.htm" onsubmit='return myfunction();' method="POST" autocomplete="off">
    <input type="checkbox" id="ABC" name="ParamList" class="clonecheckbox" value="ABC"> ABC
    <input type="checkbox" id="PQR" name="ParamList" class="clonecheckbox" value="PQR"> PQR
    <input type="checkbox" id="XYZ" name="ParamList" class="clonecheckbox" value="XYZ"> XYZ
    ...
    ...
    ...
    ...
        <input class="btn btn-outline-success" type="submit" value="Add " id="adduser" />           
    </form>
    
    
    JS 코드 :

    그중 하나라도

    function myfunction() {
      var selectedCheckbox = $('input:checkbox:checked.clonecheckbox').map(function () {
              return this.value;
            }).get(); 
        if($('.clonecheckbox:checked').length == 0) {
             return false;
        } else {
            return true;
        }
     }
    
    
    또는

    Jquery를 사용하는 단일 ckeckBox의 경우

    if ($('#ABC').prop("checked")) {
            return true;
      }else{
           return false;
    }
    // OR
    if($('#ABC').prop("checked") == true){
             return true;
       }else{
             return false;
    }
    
    

관련 자료

  • 이전 tsql - 송장 품목을 기준으로 반품 송장 (INNER JOIN)
  • 다음 android - CMAKE를 사용하여 c ++ _ shared 또는 c ++ _ static으로 전환하는 방법은 무엇입니까?