form表单实现点击一个按钮根据不同条件跳转到不同的action

需求:点击确认支付按钮时,根据单选框,选择的支付方式的不同,跳转不同的action(对应不同的后台接口)

单选框

<div class="method"><span>支付方式</span></div>
<div  id="payMethod">
   <label for="weixin" ><div class="pay payOn"><input type="radio" name="payMethod" id="weixin" value="0" checked><img src="/images/payWeixin.png" style="width: 230px; height: 55px;margin-top: 10px;margin-left: 15px;"></div></label>
   <label for="zfb"><div class="pay "><input type="radio" name="payMethod" id="zfb" value="1"><img  src="/images/zhi.png" style="width: 240px; height: 80px;"></div></label>
   <script src="/js/jquery.js"></script>
   <script>
   //动态的添加class属性
       $(document).ready(function() {
           $('input[type=radio][name=payMethod]').change(function() {
               $(".pay").removeClass("payOn");
               $(":checked").parent().addClass("payOn")
           });
       });
   </script>
</div>

form

<form class="operate" action="/wxpay/perOrder">
                <input type="hidden" name="projectName" id="projectNameH">
                <input type="hidden" name="sysOrderId" id="sysOrderIdH">
                <input type="hidden" name="payMoney" id="payMoneyH">
                <input type="button" id="pay" value="确认支付">
                <input type="button" id="cancelPay" value="取消捐赠">
                <input type="button" id="flash" value="刷新">
            </form>

js 根据单选框的状态自动监听

$(document).ready(function () {
        $('input[type=radio][name=payMethod]').change(function() {
            var payType=$('input:radio[name="payMethod"]:checked').val();
            if(payType==0){
                $(".operate").attr("action","/wxpay/perOrder");
            }
            else if(payType==1){
                $(".operate").attr("action",null);
            }else {
                $(".operate").attr("action",null);
            }
        });
    })

js 点击按钮时手动监听

$("#pay").on("click",function (){
            var payType=$('input:radio[name="payMethod"]:checked').val();
            if(payType==0){
                $(".operate").attr("action","/wxpay/perOrder");
                $(".operate").submit();
            }
            else if(payType==1){
                $(".operate").attr("action",null);
                alert("程序猿正在努力研发中......");
                return false;
            }else {
                $(".operate").attr("action",null);
                alert("出错了!");
                return false;
            }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值