converting type button to submit with ajax and jquery

Question

Problem: When I clicked the button type="button" it displays all data. But if I change it to type="submit" it doesn't displays the data. What I want is to convert this type="button" to type="submit" that would display data.

here's my code:

<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 w/ 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

You need to stop the normal execution of submit. This is the final code:

$("#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 = "";
}

Then remove click function in html button:

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

This should be solve your issue.