<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
<?=$site_title?>
</title>
<style type="text/css">

.guestbook {
	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.guestbook div {
	margin: 0px;
	padding: 0px;
}


.guestbook p{
	margin: 2px;
	padding: 0px;
}

.guestbook p strong{
	margin: 0px;
	padding: 0px;
}

.guestbook p label{
	margin: 0px;
	padding: 0px;
}

.guestbook p label input{

}


.guestbook table tr{
	margin: 2px;
	padding: 0px;
}

.guestbook table td{
	margin: 2px;
	padding: 8px;
}
.guesttable tr{
	margin: 0px;
	padding: 0px;
}

.guesttable tr td{
	margin: 0px;
	padding: 0px;
}


.oline_service {
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;	
}


</style>
<script language="javascript" type="text/javascript" src="<?=SITE_PATH?>/skin/jq/jquery.form.js"></script>
</head>
<body>
<form name ='guestbook' id="guestbook" action ='<?=SITE_PATH?>/tool.php?action=guestbook' method ='post'>
  <div class="guestbook">
    <div>
      <p><strong>留言内容：</strong></p>
      <p>
        <label>
        <textarea name="content" id="content" style="width:98%; height:80px"></textarea>
        </label>
      </p>
    </div>
    <div>
      <table width="98%" border="0" cellpadding="0" cellspacing="0" class="guesttable">
        <tr>
          <td width="220" align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0" class="guesttable">
              <tr>
                <td><p><strong>联系电话：</strong></td>
              </tr>
              <tr>
                <td><label>
                  <input name="tel" type="text" id="tel" style="width:200px; height:20px">
                  </label></td>
              </tr>
              <tr>
                <td><p><strong>电子邮件：</strong></td>
              </tr>
              <tr>
                <td><label>
                  <input name="email" type="text" id="email" style="width:200px; height:20px">
                  </label></td>
              </tr>
              <tr>
                <td><p><strong>即时QQ/MSN：</strong></td>
              </tr>
              <tr>
                <td><label>
                  <input name="im" type="text" id="im" style="width:200px; height:20px">
                  </label></td>
              </tr>
              <tr>
                <td><p><strong>联系地址：</strong></td>
              </tr>
              <tr>
                <td><label>
                  <input name="address" type="text" id="address" style="width:200px; height:20px">
                  </label></td>
              </tr>
            </table></td>
          <td height="200" align="left" valign="top" class="oline_service"><table width="98%" height="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="left" valign="top"><div style="margin:5px; padding:3px">
			  <?php if(isset($online_service) && !empty($online_service)){?>
			  <?=$online_service?>
			  <?php }else{?>
			  请在“网站后台》基本设置》客服信息”设置该项内容

			  <?php }?>
			  </div></td>
            </tr>
          </table></td>
        </tr>
      </table>
    </div>
    <div>
      <p>
        <label>
        <input style="height:28px" name="dosubmit" type="submit" id="dosubmit" value="  提 交 留 言  ">
        </label>
        <input name="postSubmit" type="hidden" id="postSubmit" value="1">
      </p>
    </div>
  </div>
</form>
<script type="text/javascript">

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#guestbook',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind to the form's submit event 
    $('#guestbook').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 
 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
	
	//留言内容
	var val = $("#content").val();
	if(val.length <= 20) {
		alert('留言内容不少于20个汉字长度！');
		$("#content").focus();
		return false;
	}
	
	//电话
	var reg=/^[\d\-]{8,20}$/;
	if(!reg.test($("#tel").val())){
		alert('联系电话只能是数下和“-”组成');
		$("#tel").focus();
		return false;
	}
	
	
	//邮件
	var reg=/^[\w\-_]{2,12}@[\w\-]{1,16}\.[\w]{2,5}$/;
	if(!reg.test($("#email").val())){
		alert('请输入正确的Email！');
		$("#email").focus();
		return false;
	}
	
	//IM
	var reg=/^[\w\-_@\.]{5,32}$/;
	if(!reg.test($("#im").val())){
		alert('请输入正确的QQ或MSN之类的联系方式！');
		$("#im").focus();
		return false;
	}
	
	//联系地址
	var reg=/^[\w]{4,16}$/;
	var val = $("#address").val();
	if(!(val.length >= 5 && val.length <= 32)) {
		alert('联系地址应包含省、市等详细信息！');
		$("#address").focus();
		return false;
	}
	
	
	$("#dosubmit").attr("value", "  提交中，请稍后...  ");
	$("#dosubmit").attr("disabled", "disabled");
	
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
 
    //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); 
} 



</script>
</body>
</html>
