轉換類型按鈕提交與Ajax和jQuery

Question

問題：當我點擊按鈕類型=「按鈕」它顯示所有數據。但如果我將其更改爲type =「submit」，它不會顯示數據。我想要的是將此類型=「按鈕」轉換爲可顯示數據的type =「submit」。

這裏是我的代碼：

<form name="chatform"> 
           <div class="input-group" id="msg"> 
            <input type="text" class="form-control" name="inputmsg" placeholder="Enter message here. . ." id="inputmsg"> 
            <span class="input-group-btn"> 
             <button class="btn btn-success" type="button" name="btn-send" id="cnd" onClick="submitChat()">Send</button> 
            </span> 
           </div> 
          </form> 

AJAX瓦特/ jQuery的

function submitChat(){ 
      if(chatform.inputmsg.value== ""){ 
       alert("fill in blanks"); 
       return; 
       } 
       var msg = chatform.inputmsg.value; 
       var xhttp = new XMLHttpRequest(); 
       xhttp.onreadystatechange = function(){ 
       if(xhttp.readyState == 4 && xhttp.status==200){ 
        document.getElementById("chatlogs").innerHTML = xhttp.reponseText ? xhttp.reponseText : ""; 
       } 
       }; 
       xhttp.open("GET","insert.php?msg="+msg, true); 
       xhttp.send(); 
       $(document).ready(function(){ 
       $.ajaxSetup({cache:false}); 
       setInterval(function(){ 
        $("#chatlogs").load("logs.php"); 
       }, 2000); 
       }); 
       document.getElementById("inputmsg").value = ""; 
     } 

Answer 1

你需要停止提交的正常執行。這是最後的代碼：

$("#inputmsg").keypress(function(e){ 
    if(e.which == 13){ 
     e.preventDefault(); 
     submitChat(); 
    } 
}); 

$("#cnd").click(function(e){ 
    e.preventDefault(); 
    submitChat(); 
}); 

function submitChat(){ 
    if(chatform.inputmsg.value== ""){ 
     alert("fill in blanks"); 
     return; 
    } 
    var msg = chatform.inputmsg.value; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function(){ 
     if(xhttp.readyState == 4 && xhttp.status==200){ 
      document.getElementById("chatlogs").innerHTML = xhttp.reponseText ? xhttp.reponseText : ""; 
     } 
    }; 
    xhttp.open("GET","insert.php?msg="+msg, true); 
    xhttp.send(); 
    $(document).ready(function(){ 
     $.ajaxSetup({cache:false}); 
     setInterval(function(){ 
      $("#chatlogs").load("logs.php"); 
     }, 2000); 
    }); 
    document.getElementById("inputmsg").value = ""; 
} 

然後在HTML按鈕刪除點擊功能：

<button class="btn btn-success" type="button" name="btn-send" id="cnd">Send</button> 

這應該解決您的問題。