[英]Check if checkbox is checked before submit
I have form with steps. 我有步骤的形式。 On last step I have to send form to another page. 在最后一步,我必须将表单发送到另一页。 On my script, I have checked inputs and select. 在我的脚本上,我检查了输入并选择。 But how can I add a check if checkbox is checked, and if not checked restrict sending? 但是,如何添加复选框是否选中复选框,如果未选中则限制发送?
I am trying this: 我正在尝试:
<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>
And my javascript used for everything like change tab, submit tab, check tab... 我的javascript用于更改标签,提交标签,检查标签等所有内容。
<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";
}
<input type="checkbox" oninput="this.className = ''"></label>
Add id field in the checkbox 在复选框中添加ID字段
<input type="checkbox" id="checkBoxId" oninput="this.className = ''"></label>
You can verify check box is checked before form submit. 您可以在提交表单之前确认已选中复选框。
document.getElementById("regForm").submit();
Replace this line by the following 将该行替换为以下内容
if(document.getElementById('checkBoxId').is(':checked')){
document.getElementById("regForm").submit();
}else{
//anything you want
}
You can follow this code and instructions: 您可以按照以下代码和说明进行操作:
first, you call a function in submit 首先,您在Submit中调用一个函数
<FORM NAME="myForm" onSubmit="return yourFunction()">
Check the checkbox is checked by using jquery 使用jquery选中复选框
function yourFunction(e) {
e.stopPropagation();
e.preventDefault();
return ($('#mycheck').is(':checked'));
}
when the checkbox is checked then approve submit otherwise not submit 选中复选框后,批准提交,否则不提交
2nd process is 第二个过程是
$('#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>
== Thanks == ==谢谢==
<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>
For any one of them 对于其中任何一个
function myfunction() {
var selectedCheckbox = $('input:checkbox:checked.clonecheckbox').map(function () {
return this.value;
}).get();
if($('.clonecheckbox:checked').length == 0) {
return false;
} else {
return true;
}
}
For single ckeckBox using Jquery 对于使用jQuery的单个ckeckBox
if ($('#ABC').prop("checked")) {
return true;
}else{
return false;
}
// OR
if($('#ABC').prop("checked") == true){
return true;
}else{
return false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.