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

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

这是我关于付款的脚本.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>

我相信

你想验证你的表单。因此，请按照代码进行操作。您首先检查是否选中了任何复选框。如果选中，则您的表单有效，在这种情况下，您提交表单，否则会显示警报并阻止表单提交。

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

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();
    }
});
});

下面是 JS 伪代码：

if(checkbox:selected){
  document.location.href = /*new url*/
}
return false;

我没有

读过你的代码，但我会为你提供"我的方式"。

1( 创建按钮(但不使用提交类型(

2( 为按钮制作点击事件：

event.preventDefault(); validation_function()

3( 验证表单

4(如果表格确定，则提交如下表格：

document.getElementById('form_id').submit()

相关内容

最新更新

热门标签：