2013-02-22 141 views
1

首先这里是我的代码jquery不被称为

好吧,我的问题是,当试图使用注册表单时,它不会调用代码。

我已经检查了几次,似乎无法找到一个问题,我在同一页面上使用登录脚本,似乎很好。

login.js

$(function() { 

    // Expand 
    $("#open").click(function(){ 
     $("div#panel").slideDown("slow"); 

    }); 

    // Collapse 
    $("#close").click(function(){ 
     $("div#panel").slideUp("slow"); 
    });  

    // Change Text 
    $("#toggle a").click(function() { 
     $("#toggle a").toggle(); 
    });  

// Login proccess Start 
    $('.error').hide(); 
    $(".bt_login").click(function() { 
     // validate input 
     $('.error').hide(); 
     var username = $("input#username").val(); 
     if (username == "") { 
     $("label#username_error").show(); 
     $("input#username").focus(); 
     return false; 
     } 

     var password = $("input#password").val(); 
     if (password == "") { 
     $("label#password_error").show(); 
     $("input#password").focus(); 
     return false; 
     } 
     var rememberMe = $("input#rememberMe").val(); 

// correct data sent 
    var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe; 
    alert (dataString);return false; 
    $.ajax({ 
    type: "POST", 
    url: "../../inc/files/login.php", 
    data: dataString, 
    success: function() { 

    return false; 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     $('#login_form').html("<div id='message'></div>"); 
     $('#message').html("<h2>!</h2>") 
     .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>") 
     .hide() 
     .fadeIn(1500, function() { 
     $('#message').append("<img id='cross' src='images/cross.png' />"); 
     }); 
    return false;; 
} 
    }); 
    }); 

// End login proccess 

//Registration Process start 

    $("bt_register").click(function() { 
     // validate inpu 
     $('.error').hide(); 
     var username2 = $("input#username2").val(); 
     if (username2 == "") { 
     $("label#username2_error").show(); 
     $("input#username2").focus(); 
     return false; 
     } 
//  var re = new RegExp("/[^a-z0-9\-\_\.]+/i"); 
//  if(re.test(username2) = true) { 
//  $("label#username2_error2").show(); 
//  $("input#username2").focus(); 
//  return false; 
// } 
     var password2 = $("input#password2").val(); 
     if (password2 == "") { 
     $("label#password2_error").show(); 
     $("input#password2").focus(); 
     return false; 
     } 
     var email = $("input#email").val(); 
     if (password == "") { 
     $("label#email_error").show(); 
     $("input#email").focus(); 
     return false; 
     } 

// correct data sent 
    var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email; 
    alert (dataString);return false; 
    $.ajax({ 
    type: "POST", 
    url: "../../inc/files/login.php", 
    data: dataString, 
    success: function() { 

    return false; 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     $('#reg_form').html("<div id='message'></div>"); 
     $('#message').html("<h2>!</h2>") 
     .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>") 
     .hide() 
     .fadeIn(1500, function() { 
     $('#message').append("<img id='cross' src='images/cross.png' />"); 
     }); 
return false; 
    } 

}); 


    }); 
}); 

HTML表单调用Jquery的

<div id="reg_form"> 
    <form class="clearfix" action="" > 
     <h1>Register Here!</h1>    
     <label class="grey" for="username">Username:</label> 
     <input class="text-input" type="text" name="username2" id="username2" value="" size="23" /> 
     <label class="error" for="username2" id="usernamename2_error">This field is required.</label> 
     <label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label> 
     <label class="grey" for="email">Email:</label> 
     <input class="text-input" type="text" name="email" id="email" size="23" /> 
     <label class="error" for="email" id="email_error">This field is required.</label> 
     <label class="grey" for="password2">Password:</label> 
     <input class="text-input" type="password" name="password2" id="password2" size="23" /> 
     <label class="error" for="password2" id="password2_error">This field is required.</label> 
     <input type="submit" name="submit" value="Register" class="bt_register" /> 
    </form> 
</div> 
+1

萤火虫中的错误是什么? – 2013-02-22 08:28:28

+0

尝试使用 '$( “#开”)生活( “点击”,函数(){' _your代码here_ '});' _Please投票,如果你遇见牛逼useful_ – 2013-02-22 08:35:34

+0

感谢维涅什但问题已解决 – Ciaran 2013-02-22 10:10:56

回答

1

变化

$("bt_register").click(function() { 

TO

$(".bt_register").click(function(event) { 
    event.preventDefault(); 

第二个错误是if (password == "") {因为对于.bt_register单击事件您没有定义password变量。

你可以做的是将var password;定义为global,所以每个点击事件函数都可以使用它。

我在这里修改了你的代码是我做了什么以及哪些是警告传递的字符串。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    var password; 
    $("#open").click(function() 
    { 
     $("div#panel").slideDown("slow"); 
    }); 

    $("#close").click(function() 
    { 
     $("div#panel").slideUp("slow"); 
    });  

    $("#toggle a").click(function() 
    { 
     $("#toggle a").toggle(); 
    });  

    $('.error').hide(); 

    // Start login proccess 

    $(".bt_login").click(function(event) 
    { 
     event.preventDefault(); 
     $('.error').hide(); 

     var username = $("input#username").val(); 
     if (username == "") 
     { 
      $("label#username_error").show(); 
      $("input#username").focus(); 
      return false; 
     } 

     password = $("input#password").val(); 

     if (password == "") 
     { 
      $("label#password_error").show(); 
      $("input#password").focus(); 
      return false; 
     } 
     var rememberMe = $("input#rememberMe").val(); 

     var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe; 
     alert (dataString);return false; 

     $.ajax(
     { 
      type: "POST", 
      url: "../../inc/files/login.php", 
      data: dataString, 
      success: function() 
      { 
       return false; 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) 
      { 
       $('#login_form').html("<div id='message'></div>"); 
       $('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function() { 
        $('#message').append("<img id='cross' src='images/cross.png' />"); 
       }); 
       return false;; 
      } 
     }); 
    }); 

    // End login proccess 

    //Registration Process start 

    $(".bt_register").click(function(event) 
    { 
     event.preventDefault(); 
     // validate inpu 
     $('.error').hide(); 
     var username2 = $("input#username2").val(); 

     if (username2 == "") 
     { 
      $("label#username2_error").show(); 
      $("input#username2").focus(); 
      return false; 
     } 

     var password2 = $("input#password2").val(); 
     if (password2 == "") 
     { 
      $("label#password2_error").show(); 
      $("input#password2").focus(); 
      return false; 
     } 

     var email = $("input#email").val(); 
     if (password == "") 
     { 
      $("label#email_error").show(); 
      $("input#email").focus(); 
      return false; 
     } 

     // correct data sent 
     var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email; 
     alert (dataString);return false; 

     $.ajax(
     { 
      type: "POST", 
      url: "../../inc/files/login.php", 
      data: dataString, 
      success: function() 
      { 
       return false; 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) 
      { 
       $('#reg_form').html("<div id='message'></div>"); 
       $('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function() 
       { 
        $('#message').append("<img id='cross' src='images/cross.png' />"); 
       }); 
       return false; 
      } 
     }); 

    }); 
}); 

</script> 
<div id="reg_form"> 
    <form class="clearfix" action="" > 
     <h1>Register Here!</h1>    
     <label class="grey" for="username">Username:</label> 
     <input class="text-input" type="text" name="username2" id="username2" value="" size="23" /> 
     <label class="error" for="username2" id="usernamename2_error">This field is required.</label> 
     <label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label> 
     <label class="grey" for="email">Email:</label> 
     <input class="text-input" type="text" name="email" id="email" size="23" /> 
     <label class="error" for="email" id="email_error">This field is required.</label> 
     <label class="grey" for="password2">Password:</label> 
     <input class="text-input" type="password" name="password2" id="password2" size="23" /> 
     <label class="error" for="password2" id="password2_error">This field is required.</label> 
     <input type="submit" name="submit" value="Register" class="bt_register" /> 
    </form> 
</div>
+0

谢谢:)不能相信我没有看到 – Ciaran 2013-02-22 08:34:36

+0

@Ciaran看到所有更新的代码格式正确。 – 2013-02-22 08:41:42

+0

@Ciaran随时欢迎。你应该接受这个答案。 – 2013-02-22 08:43:03

-1

这让我创建一个标签并让它链接到一个预定义的函数。将函数包含在文档正文和标签之前。

<label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters! 
功能(开)

0

相反i suggest you to do this with submit form

$("#reg_form").children('form').submit(function (e) { 
    e.preventDefault(); //<------------stops the submission 
    // validate inpu 
    $('.error').hide(); 
    var username2 = $("input#username2").val(); 
    if (username2 == "") { 
     $("label#username2_error").show(); 
     $("input#username2").focus(); 
     return false; 
    } 

    var password2 = $("input#password2").val(); 
    if (password2 == "") { 
     $("label#password2_error").show(); 
     $("input#password2").focus(); 
     return false; 
    } 

    var email = $("input#email").val(); 
    if (password == "") { 
     $("label#email_error").show(); 
     $("input#email").focus(); 
     return false; 
    } 

    // correct data sent 
    var dataString = $(this).serialize(); 
    alert(dataString); 

    $.ajax({ 
     type: "POST", 
     url: "../../inc/files/login.php", 
     data: dataString, 
     success: function() { 
      alert('success.'); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $('#reg_form').html("<div id='message'></div>"); 
      $('#message').html("<h2>!</h2>") 
       .append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown, "</p>") 
       .hide() 
       .fadeIn(1500, function() { 
        $('#message').append("<img id='cross' src='images/cross.png' />"); 
       }); 
       return false; 
     } 

    }); 
}); 
+0

感谢您的这一点,但即时通讯错误,现在不再接收我的错误消息。 – Ciaran 2013-02-22 09:41:11

0

确定 我THIK您的VAR dataString的格式不正确

你可以试试这个语法

data: '{LiveID: "' + Live_ID + '", CategoryID: "' + Category_ID + '"}',