前端向后台传表单数据(有下拉菜单的表单)

1.表单排版一般效果

<div class="index-pg submit-form">        <form action="" method="post" id="form1">            <div class="input-box">                <p><span>姓名：</span><input name="username" type="text" placeholder="请输入您的姓名"></p>                <p><span>手机：</span><input name="tel" type="text" placeholder="请输入您的手机号码"></p>            </div>            <div class="input-box input-box1">                <p><span>意向国家：</span>                    <select name="country_id">                        <option value="1">美国</option>                        <option value="2">加拿大</option>                        <option value="3">匈牙利</option>                        <option value="4">西班牙</option>                        <option value="5">葡萄牙</option>                    </select>                </p>            </div>             <p class="pg-btn">                           <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/btns.png">            </p>        </form>    </div>

2.css样式

.index-pg{padding-bottom:20px;padding-top: 20px;}.index-pg .text1{font-size:16px;color:333;text-align:center;padding:10px 0}.index-pg .text2{font-size:14px;color:333;text-align:center}.index-pg .text1 span,.index-pg .text2 span{color:#2681d9}.index-pg .input-box p{    display: -webkit-box;    display: box;    display:  -webkit-flex;    display: flex;    margin-bottom:15px}.index-pg .input-box p span{width:45px;line-height:30px;}.index-pg .input-box p input{padding:0 5px;color:#666;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9;line-height:25px;}.index-pg .text3{padding:0 35px;color:#2681d9;font-size:14px;}.index-pg .input-box1 p span{width:70px;}.index-pg .input-box1 p select{height:30px;line-height:30px;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9}.index-pg .pg-btn img{width:160px;height:40px;display:block;margin:0 auto;}

3.js代码

$('#form1').on('click','.pg-btn',function(){        var form=$('this).data('target-id');    var myform=$('#'+form);    var name=myform.find("[name='username']");    var tel=myform.find("[name='tel']");    //下拉列表选中的选中项文字    var country=myform.find("[name='country_id']").find("option:selected").text();      //检测手机号码   function checkphone(num){      var re = /^1[358][0-9]{9}$/;       if(!re.test(num)){         alert('请您输入正确的手机号码')；         return false;       }      }   //非空验证    if (!$.trim(name.val())) {            layer.msg('请填写姓名');            return false;        };        if (!$.trim(tel.val())) {            layer.msg('请输入电话号码');            return false;        };            var formdata={        name:name,        tel:tel,        country:country        };           $.post(form.attr('action'),formdata,function(res){        var res=JSON.parse(res);        if(res.status==1){            alert('您已经提交成功')；            form.reset();                }else{            alert(‘不好意思，服务器出了点小错误，请您重新提交一次')；            form.reset();                        }                       })})