您的位置:首页 > Web前端 > JavaScript

使用js实现表单提交

2016-08-03 11:00 357 查看
    <form id="formSubmit" action="" method="post" onsubmit="checkMsg()">

            <div class="consigneeadd orderlist-box col-xs-12 pull-left">

                <input type="hidden" name="${customeraddress.customeraddressid}"/>

                <div class="row row-space bg-white">

                    <div class="col-xs-3 bg-white">

                        <span>Name:</span>

                    </div>

                    <div class="col-xs-9 bg-white">

                        <input type="text" id="consigneename" value="${customeraddress.consigneename}" class="form-control" placeholder="User User" aria-describedby="basic-addon2">

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>Country:</span>

                    </div>

                    <div class="col-xs-9 bg-white">

                        <select id="country">

                            <c:forEach items="${countryList}" var="o">

                                <option value="${o.countryid}" <c:if test="${customeraddress.countryid==o.countryid}">selected</c:if>>o.countryname</option>

                            </c:forEach>

                        </select>

                        <span id="countryMsg"></span>

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>City:</span>

                    </div>

                    <div class="col-xs-9 bg-white">

                        <select id="city">

                            <option>1</option>

                            <option>2</option>

                            <option>3</option>

                        </select>

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>Address:</span>

                    </div>

                    <div class="col-xs-9 bg-white">

                        <input type="text" id="address1" class="form-control"  value="${customeraddress.address1}" placeholder="please input consignee address1." aria-describedby="basic-addon2">

                    </div>

                    <div class="col-xs-3 bg-white">

        

                    </div>

                    <div class="col-xs-9 bg-white">

                        <input type="text" id="address2" class="form-control" value="${customeraddress.address2}" placeholder="please input consignee address2." aria-describedby="basic-addon2">

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>ZipCode</span>

                    </div>

                    <div class="col-xs-9 bg-white ">

                        <input type="text" id="zipcode" class="form-control" value="${customeraddress.zipcode}" placeholder="ZipCode" aria-describedby="basic-addon2">

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>Phone</span>

                    </div>

                    <div class="col-xs-9 bg-white ">

                        <input type="text" id="phone" class="form-control" value="${customeraddress.tel}" placeholder="phone" aria-describedby="basic-addon2">

                    </div>

                    <div class="col-xs-3 bg-white">

                        <span>E-Mail</span>

                    </div>

                    <div class="col-xs-9 bg-white">

                        <input type="text" id="email" class="form-control" value="${customeraddress.email}" placeholder="user@user.com" aria-describedby="basic-addon2">

                    </div>

                </div>

            </div>

            <div class="col-xs-12">

                <a href="#"><button type="submit" class="btn btn-success col-xs-12 text-center">Saved</button></a>

            </div>

    </form>    

        <script type="text/javascript">

        

        function checkMsg(){

            var consigneename=$("#consigneename").val();

            var countryId=$("#country").val();

            var cityId=$("#city").val();

            var address1=$("#address1").val();

            var address2=$("#address2").val();

            var zipcode=$("#zipcode").val();

            var phone=$("#phone").val();

            var email=$("#email").val();

            if(consigneename.length<=0){

                $("#consigneename").parent().find("span").html("Please input consignee name.").css("color","red");

                return;

            }

            if(countryId.length<=0){

                $("#countryMsg").html("Please select a country.").css("color","red");

                return;

            }

            if(cityId.length<=0){

                $("#cityMsg").html("Please select a city.").css("color","red");

                return;

            }

            if(address1.length<=0){

                $("#address1").parent().find("span").html("Please input address1.").css("color","red");

                return;

            }

            if(phone.length<=0){

                $("#phone").parent().find("span").html("Please input phone.").css("color","red");

                return;

            }

            if(email.length>0){

                reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  

                if(!reg.test(email)){

                    $("#email").parent().find("span").html("Please enter the correct mailbox format.").css("color","red");

                    return;

                }

                

            }

            //验证通过提交表单

            $('#formSubmit').action="";

            $(#'formSubmit').submit();

            

        }

        

        

        

        

        </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: