表单将我发送到php页面

时间:2017-03-11 14:14:25

标签: jquery html ajax

我尝试用我的代码和ajax和jquery组合,以及如何通过提交将表单发送到动作中的php页面请帮助我,我不明白它保持hapen。我打破了它。

第一部分是jquery ajax代码 第二个是html代码

$( document ).ready(function() {

$("button#RegisterB").click(function(){

     var error = '';
    if( $('#username').val().length == 0 ) { error += 'fill name<br />'; }
    if( $('#password').val().length == 0 ) { error += 'fill pass<br />'; }
    if( $('#repassword').val().length == 0 ) { error += 'match pass<br />'; }
    if( $('#password').val() != $('#repassword').val() ) { error += 'notmatch<br />'; }
    var phonenum=$('#phonenum').val()+$('#select').val();
    if( phonenum.length == 0 ) { error += 'fill phone num <br />'; }
    else if ( $.isNumeric(phonenum) == false || phonenum.length != 10 ) { error += 'phone not good<br />'; }
     $("form_reg").submit(function(e){
        e.preventdefault;
        return false;
    });
    if( error != '' ) {
        $('#result').html( error );
    }

    else {

       $.ajax({
                url:$("form_reg").attr('action'),
                data: $("form_reg : input").serializeArray(),
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(result) {
                    $("#result").html(result);
                }

                } );


    }
});
});

        </script>   


      </head>
      <body>

        <div style="width:300px;margin:0 auto; margin-top:70px;text-align:center;"> <img src="photos/logo2.png"/></div>
        <div id="Register">

           <form id="form_reg" action="AddUser.php" method="post" onsubmit="e.preventdefault;" >
            <div class="head_div"> <span> register</span> </div>    
            <div id="main_reg">
                <div class="login_line"> 
                        <label for="username"> full name</label>
                        <input type="text" name="username" id="username" placeholder="full name" /> 
                </div>  

                <div class="login_line"> 
                     <label for="password">  pass </label> 
                     <input type="password" name="password" id="password" placeholder=pass" /> 
                </div> 

                <div class="login_line"> 
                    <label for="repassword"> repass </label> 
                    <input type="password" name="repassword" id="repassword" placeholder="repass" /> 
                </div>

                <div class="login_line"> 
                    <label for="email"> email </label> 
                    <input type="email" name="email" id="email" placeholder="email" />  
                </div> 

                <div class="login_line">  

                    <label for="phonenum" > phonenum </label>
                </div> 
                <div class="login_line"> 
                        <input  type="text" id ="phonenum" name="phonenum" placeholder="phonenum" />
                        <select id="select">
                            <option value="050"> 050</option>
                            <option value="054"> 054</option>
                            <option value="052"> 052</option>
                            <option value="053"> 053</option>
                            <option value="058"> 058</option>
                            </select>

                    </div>
                </div>

                <div class="login_line">
                    <div id="result"> </div>
                </div>

                <div class="send_line">     
                     <button type="submit" name="send"  id="RegisterB" > registerw </button> 
                </div>

2 个答案:

答案 0 :(得分:0)

表单元素的选择器不正确。改变这个(你的代码中有几次):

$("form_reg")

到此:

$("#form_reg")

#选择器用于选择具有匹配id属性的元素。

Here's a working JS fiddle with you code

答案 1 :(得分:0)

从表单中删除操作路径...仅使用带有id的操作路径 像:::

<form id="myForm">
  //Form Content
</form>

在ajax中,喜欢

$("#myForm").submit(function(e){
  e.preventDefault();
  url: "actionpath",
  data: //serialized data,
  type: //GET/POST,
  success: function(success){
    alert("Login Successful");
  },
  error: function(error){
    alert(error);
  }
});