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

创建日期: 2024-03-27 11:31 | 作者: 风波 | 浏览次数: 12 | 分类: 前端

来源:https://blog.csdn.net/Hello_mengkebao/article/details/119144953

单选框

<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;
            }
        });
12 浏览
0 评论