Question

我无法理解如何在jquery中编写代码。我有一个注册和付款表单（两个相同的形式）附带用户名可用性检查使用jquery这是很好的。

接下来我想在表单中成功提交后添加fadeout fadein并说“谢谢你加入我们”。对于同一次点击按钮，它将淡出同一页面中的表格并淡入新文本说“谢谢你加入我们”。

我用于用户名可用性检查的第一个jquery代码使用我使用此javascripts

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() { 

var usr = $("#username").val();

if(usr.length >= 3)
{
$("#status").html('<img align="absmiddle" src="loader.gif" /> Checking availability...');

$.ajax({ 
type: "POST", 

url: "check.php", 

data: "username="+ usr, 

success: function(msg){ 


$("#status").ajaxComplete(function(event, request, settings){ 


if(msg == 'OK')

{ 

$("#username").removeClass('object_error'); // if necessary

$("#username").addClass("object_ok");

$(this).html(' <img align="absmiddle" src="accepted.png" /> ');

}

然后我的下一个jquery代码发送消息说谢谢你使用fadeout和fadein

$.ajax({
      type: "POST",

      url: "bin/process.php",

      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});

我的问题是如何使用

编写jquery代码

$.ajax({
      type: "POST",

      url: "bin/process.php",

      data: dataString,

      success: function() {

当两个代码都附带时，我怎样才能结合起来制作作品！

AM

Answer 1

Html页面：

$(document).ready(function()
{
    $("#username").blur(function()
    {
        //remove all the class add the messagebox classes and start fading
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        //check the username exists or not from ajax
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='no') //if username not avaiable
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
            });     
          }
          else
          {
            $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);    
            });
          }

        });

    });
});

CSS：

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
    position:absolute;
    width:100px;
    margin-left:30px;
    border:1px solid #c93;
    background:#ffc;
    padding:3px;
}
.messageboxok{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #349534;
    background:#C9FFCA;
    padding:3px;
    font-weight:bold;
    color:#008000;

}
.messageboxerror{
    position:absolute;
    width:auto;
    margin-left:30px;
    border:1px solid #CC0000;
    background:#F7CBCA;
    padding:3px;
    font-weight:bold;
    color:#CC0000;
}

</style>

文字框

User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
   <span id="msgbox" style="display:none"></span>

Php页

$existing_users=array('test1','test2','test3'); 
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
    //user name is not availble
    echo "no";
} 
else
{
    //user name is available
    echo "yes";
}

jquery用户名可用性

1 个答案: