我需要在提交表单之前验证复选框字段，并创建显示“请选择一个项目”的验证消息。作为警报。
但现在警报显示，但页面将我重定向到另一个页面。相反，如果没有选择任何项目，我需要留在当前页面上。
这是我在Payment.htm上的脚本：
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault();
alert();
$('#form').submit();
var name="";
var add = 0;
var form = document.getElementById('form');
var flag1=0;
var flag2=0;
var checkboxes = form.getElementsByClassName('sum');
for (var i=0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
name+="#"+checkboxes[i].name;
flag1=1;
}
else
{
name="No items selected";
flag2=1;
}
}
if(flag1==0 && flag2==1)
{
alert(name);
}
else
{
alert("name and amount set");
var p = add;
var price = p ;
var text=name ;
localStorage.setItem("text", text);
localStorage.setItem("price", price);
$('#form').submit();
}
});
});
//this is my form on payment.htm
<form method="post" action="makepayment.php" id="form">
<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
<th style="width:200px;text-align:left;">Select Items</th>
<th align="center"></th>
</tr>
<tr>
<td>3 ヶ月コース契約 450,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id1" name="3 ヶ月コース契約 450,000 円" value="450000" ></td>
</tr>
<tr>
<td>6 ヶ月コース契約 750,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id2" name="6 ヶ月コース契約 750,000 円" value="750000" ></td>
</tr>
<tr>
<td>12 ヶ月コース契約 1,200,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id3" name="12 ヶ月コース契約 1,200,000 円" value="1200000" ></td>
</tr>
<tr>
<td>100 ポイント付与契約 10,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id4" name="100 ポイント付与契約 10,000 円" value="10000" ></td>
</tr>
<tr>
<td>300 ポイント付与契約 30,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id5" name="300 ポイント付与契約 30,000 円" value="30000" ></td>
</tr>
<tr>
<td>500 ポイント付与契約 50,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id6" name="500 ポイント付与契約 50,000 円" value="50000" ></td>
</tr>
</table>
<span id="error"></span>
<p style="text-align:center;">
<button class="button" id="btnsubmit" > Make Payment </button>
<!--<input class="button" type="submit" name="submit" id="submit" value="SUBMIT"> -->
<!--<a href="makepayment.php" class="button" onclick="check();">Make Payment</a></p>-->
</form>
答案 0 :(得分：1)
我相信您要验证自己的表单。所以请遵循代码。如果选中任何复选框，请先检查。如果选中，则表单有效，在这种情况下，您提交表单，否则您会显示提醒并阻止表单提交。
$(document).ready(function(){
$('#btnsubmit').on('click', function(e){
var name="";
var add = 0;
var form = document.getElementById('form');
var flag1=0;
var flag2=0;
var checkboxes = form.getElementsByClassName('sum');
if ($('.sum:checked').length > 0) {
alert("name and amount set");
var p = add;
var price = p ;
var text=name ;
localStorage.setItem("text", text);
localStorage.setItem("price", price);
$('#form').submit();
}else{
name="No items selected";
alert("No item selected");
return;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="makepayment.php" id="form">
<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
<th style="width:200px;text-align:left;">Select Items</th>
<th align="center"></th>
</tr>
<tr>
<td>3 ヶ月コース契約 450,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id1" name="3 ヶ月コース契約 450,000 円" value="450000" ></td>
</tr>
<tr>
<td>6 ヶ月コース契約 750,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id2" name="6 ヶ月コース契約 750,000 円" value="750000" ></td>
</tr>
<tr>
<td>12 ヶ月コース契約 1,200,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id3" name="12 ヶ月コース契約 1,200,000 円" value="1200000" ></td>
</tr>
<tr>
<td>100 ポイント付与契約 10,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id4" name="100 ポイント付与契約 10,000 円" value="10000" ></td>
</tr>
<tr>
<td>300 ポイント付与契約 30,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id5" name="300 ポイント付与契約 30,000 円" value="30000" ></td>
</tr>
<tr>
<td>500 ポイント付与契約 50,000 円</td>
<td align="center"><input type="checkbox" class="sum" id="id6" name="500 ポイント付与契約 50,000 円" value="50000" ></td>
</tr>
</table>
<span id="error"></span>
<p style="text-align:center;">
<input type="button" class="button" id="btnsubmit" value="Make Payment" >
<!--<input class="button" type="submit" name="submit" id="submit" value="SUBMIT"> -->
<!--<a href="makepayment.php" class="button" onclick="check();">Make Payment</a></p>-->
</form>
答案 1 :(得分：0)
i changed the code like this,but it does not redirect me to makepayment.php after selecting checkbox
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault();
//alert();
var name="";
var add = 0;
var form = document.getElementById('form');
var flag1=0;
var flag2=0;
var checkboxes = form.getElementsByClassName('sum');
for (var i=0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
name+="#"+checkboxes[i].name;
flag1=1;
}
else
{
name="No items selected";
flag2=1;
}
}
if(flag1==0 && flag2==1)
{
alert(name);
return false;
}
else
{
alert("name and amount set");
var p = add;
var price = p ;
var text=name ;
localStorage.setItem("text", text);
localStorage.setItem("price", price);
$('#form').submit();
}
});
});
答案 2 :(得分：0)
我没有阅读您的代码，但我会以“我的方式”为您提供。
1）创建按钮（但不是提交类型）
2）为按钮制作onclick事件：
event.preventDefault(); validation_function()
3）验证表格
4）如果表格确定，则提交表格如下：
document.getElementById('form_id').submit()
答案 3 :(得分：0)
这是JS伪代码：
if(checkbox:selected){
document.location.href = /*new url*/
}
return false;