使用js实现表单提交



    <form id="formSubmit" action="" method="post" οnsubmit="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>

你可以使用 HTML 表单和 JavaScript 来实现表单提交。下面是一个简单的例子,假设你有一个包含用户名和密码输入框的表单: ```html <form id="my-form"> <label>用户名:</label> <input type="text" name="username"><br> <label>密码:</label> <input type="password" name="password"><br> <input type="submit" value="提交"> </form> ``` 然后使用 JavaScript 代码来拦截表单提交事件,并通过 AJAX 发送表单数据到服务器端: ```javascript document.getElementById("my-form").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 var xhr = new XMLHttpRequest(); xhr.open("POST", "/submit-form"); // 替换成服务器端接口地址 xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 在控制台输出响应结果 } }; xhr.send(JSON.stringify({ username: document.getElementsByName("username")[0].value, password: document.getElementsByName("password")[0].value })); // 将表单数据转换为 JSON 字符串并发送到服务器端 }); ``` 上面的代码中,我们使用了 `preventDefault()` 方法来阻止表单的默认提交行为,然后创建了一个 XMLHttpRequest 对象,设置请求头和回调函数,并使用 `send()` 方法将表单数据发送到服务器端。在服务器端,你需要解析请求体中的 JSON 数据并进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值