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

})

本文出自 “13226327” 博客，請務必保留此出處http://13236327.blog.51cto.com/13226327/1982727

前端向後臺傳表單數據(有下拉菜單的表單)