继续在创建用户上获取null

时间:2015-02-07 22:47:11

标签: javascript php jquery html ajax

大家好我有这个php jquery ajax创建用户表单,将创建详细信息传递给php脚本,但我继续在post变量上获取null anyhelp将不胜感激!代码

HTML:

<form method="post" action="" id="createForm">
<input type="text" name="createUser" class="form-control" placeholder="Brugernavn*" id="createUser">
 <input type="email" name="createUserEmail" class="form-control" placeholder="Email*" id="createUserEmail">
<input type="password" name="createUserPass" id="createUserPass" class="form-control" placeholder="Kodeord*" id="createUserPass">
<input type="password" name="confirmUserPass" id="confirmUserPass" class="form-control" placeholder="Bekræft Kodeord*" id="createUserPass">
<h4 id="newsletterText">Vil du have vores nyhedsbrev?</h4>
<select name="newsletter" id="newsletter" class="form-control"><option value="yes">Ja tak!</option><option value="nej" selected="">Nej tak</option></select>
<input type="submit" name="submitCreateUser" class="btn btn-success" id="submitCreateUser" value="Opret!">
    </form>

jquery的:

$(document).ready(function(){
 $("#submitCreateUser").click(function(){
 var username = $("#createUser").val();
   var email = $("#createUserEmail").val();
    var pass = $("#createUserPass").val();
      var cPass = $("#createUserPassC").val();
        var newsletter = $("#newsletter").val();

   $.ajax({
 type: "POST",
 url: "createuserajax.php",
 data: "username="+username+"&email="+email+"&pass="+pass+"&cPass="+cPass,
 success: function(html){
  if(html=='true')
  {
alert(username);


 }
 else
  {

  }
 },

 }
  );

});

});

PHP:

 <?php
 $username = $_POST['username'];
 $email = $_POST['email'];
 $password = $_POST['pass'];


var_dump($username);
 $securePassword = md5(($password));
    $sqlInsertUser = "INSERT INTO users (username,email,password) VALUES ('$username','$email','$securePassword')";
    $result = mysqli_query($con,$sqlInsertUser);

1 个答案:

答案 0 :(得分:1)

正如adeneo所说,你的html表单很可能在进行ajax调用之前以标准方式提交,因为你没有阻止默认行为。请尝试以下代码:


或者,您可以移除<input type="submit" name="submitCreateUser" class="btn btn-success" id="submitCreateUser" value="Opret!">并将id="submitCreateUser"提供给其他元素,例如自定义按钮或链接。当您点击input标签并使用submit类型时,它会默认以正常方式提交随附表单。发生这种情况之前点击处理程序会听到点击,以便在您的代码调用ajax之前提交表单。使用不同的元素进行点击,这不会发生

并且不要忘记让这个工作完全起作用,您的php文件必须回显一些将在html变量中返回的内容,而不是html绝不会是真的,什么都不会发生。

问题的一部分是你的输入元素,特别是用于密码和密码检查的输入元素都有两个独立的id标签,第一个是重复的,第二个是完全不同的id。同样在你的jquery中,当你尝试获取id检查值时,你会使用另一个不同的id。

这是一个测试页面,解决了所有这些问题并按预期工作:

http://dodsoftware.com/sotests/createuserajax.html

测试php代码:

<?php

  if( isset($_POST) )
  {
     $username = $_POST['username'];
     $email = $_POST['email'];
     $password = $_POST['pass'];

     echo   'username --'.$username.', email --'.$email.', password --'.$password;
  }

?>

HTML代码:

<form method="post" action="" id="createForm">
  <input type="text" name="createUser" class="form-control" placeholder="Brugernavn*" id="createUser">
  <input type="email" name="createUserEmail" class="form-control" placeholder="Email*" id="createUserEmail">
  <input type="password" name="createUserPass" id="createUserPass" class="form-control" placeholder="Kodeord*">
  <input type="password" name="confirmUserPass" id="confirmUserPass" class="form-control" placeholder="Bekræft Kodeord*" >
  <!-- these lines had duplicated id tags-->
  <h4 id="newsletterText">Vil du have vores nyhedsbrev?</h4>
  <select name="newsletter" id="newsletter" class="form-control">
    <option value="yes">Ja tak!</option>
    <option value="nej" selected="">Nej tak</option>
  </select>
  <input type="submit" name="submitCreateUser" class="btn btn-success" id="submitCreateUser" value="Opret!">
</form> 

jQuery代码:

  <script>
 $(document).ready(function() {
    $("#submitCreateUser").click(function( event ) { // add event var here
        event.preventDefault(); // add this line to stop the form from submitting the normal way before the ajax call
        var username = $("#createUser").val();
        var email = $("#createUserEmail").val();
        var pass = $("#createUserPass").val();
        var cPass = $("#confirmUserPass").val(); // you were using "#createUserPassC" here in error
        var newsletter = $("#newsletter").val();
        var datastring = "username=" + username + "&email=" + email + "&pass=" + pass + "&cPass=" + cPass +"&newsletter=" + newsletter;

        $.ajax({
            type: "POST",
            url: "createuserajax.php",
            data: datastring,
            success: function(html) {
                if (html) { // changed this line from "if (html == 'true')" just for testing  
                    alert(html); // changed this line from "alert(username);" just for testing  


                } else {
                    alert('something went wrong!');
                }
            },

        });

    });

});
</script>