码迷,mamicode.com
首页 > 编程语言 > 详细

学习java前端 两种form表单提交方式

时间:2018-04-27 23:58:31      阅读:461      评论:0      收藏:0      [点我收藏+]

标签:eth   UNC   pat   horizon   执行   表单   one   BMI   pos   

第一种:原生方式

注意点:button标签的style为submit

<form action="/trans/doTrans.do" method="post">

    转出卡号:${cardNo}
    <br>
    转出卡号余额:${balance}元
    <br> <br>
    转入卡号:<input name="checkInCardNo" type="text">
    <br>
    转入卡号姓名:<input name="realName" type="text">
    <br>
    转出金额:<input name="money" type="text">

    <br>

    <button type="submit">确定转出</button>


</form>

第二种:Jquery校验方式

注意点:button标签的style为button
流程:点击提交,首先触发submitForm()方法,执行校验及id选择器,最后提交form表单。

 <script type="text/javascript">
    function submitForm() {
        if($("#t_in_cardNo").val().length!=8){
            alert("您输入的卡号位数不对!")
            return;
        }
        $("#transForm").submit();<!--此处是submit方法-->
    }
  </script>
  
  
         
<form id="transForm" class="am-form am-form-horizontal" action="/trans/doTrans.do" method="post">
    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">转出卡号</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_cardNo" readonly placeholder=${cardNo}>

        </div>
    </div>

    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">转入卡号</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_in_cardNo" pattern="[0-9]*" placeholder="请输入8位对方卡号"
                   name="checkInCardNo">
        </div>
    </div>

    <div class="am-form-group">
        <label class="am-u-sm-3 am-form-label">转账金额</label>
        <div class="am-u-sm-9">
            <input type="text" id="t_money" placeholder="输入转账金额" name="money">
        </div>
    </div>


    <div class="am-form-group">
        <div class="am-u-sm-9 am-u-sm-push-3">
            <button type="button" onclick="submitForm()" class="am-btn am-btn-primary">提交</button><!--此处为提交类型为button-->
        </div>
    </div>
</form>

学习java前端 两种form表单提交方式

标签:eth   UNC   pat   horizon   执行   表单   one   BMI   pos   

原文地址:https://www.cnblogs.com/HashMap-Fantasy/p/8965081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!