如何在“提交”或“输入”按钮上提交表单

Question

I am trying to follow a tutorial and demo . But when I press SUBMIT or ENTER button, it is not submitting, it is just refreshing the page :( and showing an error.

It shows an alert

There was a problem with the request.

And the page refreshes.

My form

<form class="well-home span6 form-horizontal" name="ajax-demo" id="ajax-demo"> <div class="control-group">
              <label class="control-label" for="book">Book</label>
              <div class="controls">
                <input type="text" id="book" onKeyUp="book_suggestion()">
                <div id="suggestion"></div>
             </div>  </div>  <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>  
       </div> 
</form>

And my Javascript

<script>
function book_suggestion()
{
var book = document.getElementById("book").value;
var xhr;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book;
     xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
     xhr.onreadystatechange = display_data;
    function display_data() {
     if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       //alert(xhr.responseText);      
      document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
    }
}
</script>

book-suggestion.php

<?php  
include('../includes/dbopen.php');  
$book_name = $_POST['book_name'];  
$sql = "select book_name from book_mast where book_name LIKE '$book_name%'";  
$result = mysql_query($sql);  
while($row=mysql_fetch_array($result))  
{  
echo "<p>".$row['book_name']."</p>";  
}  
?>  

Answer 1

The submit button used there is not participating in the demo. The purpose of the demo is to show how to fetch data with ajax when user types data in the text box . It may, for sure be extended so that the submit button acts upon and adds some more functions, but for now, that has not been added to the demo.