利用JS實現表單的自動提交

        今天需要將一個chat整合到客戶的網站上去，實現網站的注冊用戶登錄本網站之后點擊某個鏈接能夠直接登錄到chat上去。我保留了chat原有的登錄界面，采用JS技術當頁面跳轉過來的時候自動填充表單，並自動提交表單，從而實現網站用戶無需再次登錄即可進入chat。具體代碼實現如下

JS代碼

 

<script> 
//取得cookie值 
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
    if(arr=document.cookie.match(reg)){
        return unescape(arr[2]); 
    }else{
        return null; 
    } 
} 

//表單自動提交函數
function tijiao(){ 
     function sub(){ 
         var a = document.getElementById('loginForm');
         a.elements[2].value = getCookie('username');
         a.elements[3].value = getCookie('username');
         var opts = document.getElementById("channelField");
         opts[1].selected = 'selected';
         opts[0].selected = '';
         a.submit();
    }
setTimeout(sub,0);//以毫秒為單位的.1000代表一秒鍾.根據你需要修改這個時間. 
}

//點擊button提交表單
function clickbutton(obj){ 
    obj.onclick = function(){ 
        obj.submit(); 
    } 
}
</script>

 

HTML代碼

 

<form id="loginForm" name="loginForm" action="[LOGIN_URL/]" method="post" enctype="application/x-www-form-urlencoded">
    <div id="loginFormContainer" style="margin:0px;padding-bottom: 10px;">
        <input type="hidden" name="login" id="loginField" value="login"/>
        <input type="hidden" name="redirect" id="redirectField" value="[REDIRECT_URL/]"/>
        <div><label for="userNameField">[LANG]userName[/LANG]：</label>
        <input type="text" name="userName" id="userNameField" maxlength="[USER_NAME_MAX_LENGTH/]"/></div><br />
        <div><label for="passwordField">[LANG]password[/LANG]*：</label>
        <input type="password" name="password" id="passwordField"/><span style="margin-left:4px; color: #339900;">默認是您的用戶名</span></div><br />
        <div><label for="channelField">[LANG]channel[/LANG]：</label>
        <select name="channelName" id="channelField">[CHANNEL_OPTIONS/]</select></div><br />
        <div><label for="languageSelection">[LANG]language[/LANG]：</label>
        <select id="languageSelection" name="lang" onchange="ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div><br />
        <!--
        <div><input type="submit" name="submit" style="width: 240px;height: 50px;background: url(../chat/img/bglogin2.png);background-repeat: no-repeat;border: 0px;" id="loginButton" value=""/></div>
        -->
        <div><button name="subButton" onclick="clickbutton(this);" style="width: 240px;height: 50px;background: url(../chat/img/bglogin2.png);background-repeat: no-repeat;border: 0px;" id="loginButton" value=""></button></div>
    </div>
</form>

 

 

 

PS：

1. 要在body中加入onload="tijiao();"

2. 另外表單的提交按鈕（submit）需要隱去，不然會和js的submit()方法沖突，這里采用button提交，避免在自動登錄失敗時沒有提交按鈕