javascript - 如果未选中复选框需要保留在同一页面上，否则重定向到另一个页面

Question

我需要在提交表单之前验证复选框字段并创建一条显示“请选择一项”的验证消息。作为警报。
但现在警报已显示，但页面将我重定向到另一个页面。相反，如果没有选择任何项目，我需要留在当前页面。

这是我在 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>

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