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

1.表单排版一般效果

        
            
                
姓名：
                
手机：
            

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();                
        }
               
    
    })

})