0

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>";  
}  
?>
Kate Gregory
  • 18,808
  • 8
  • 56
  • 85
Vidavalapati Akhilesh
  • 13
  • 5
  • 3
    oh, dear Amazon, please, let kindle help us! – STT LCU Apr 24 '13 at 11:45
  • on a more serious note, we need to see your code to check how to remove the error – STT LCU Apr 24 '13 at 11:46
  • @svetlio thanks a ton. :) i just did as it is in that tutorial... but got this error.. – Vidavalapati Akhilesh Apr 24 '13 at 11:49
  • @STTLCU have updated my question with the code... – Vidavalapati Akhilesh Apr 24 '13 at 11:50
  • first study the basic theory THEN learn through tutorials. You can't skip basic theory. Anyway, I removed the downvote – STT LCU Apr 24 '13 at 11:50
  • (It's spelled *kindly* :) ) – What have you tried Apr 24 '13 at 11:50
  • @VidavalapatiAkhilesh You may think using jQuery and in your case jQuery.ajax . Its a lot easier for use if you are not familiar with pure Javascript.. – Svetoslav Apr 24 '13 at 11:52
  • Try to request the book-suggestion.php script yourself (from the browser) and see what kind of error you get. I expect you get an error 404 or 500. – Veda Apr 24 '13 at 11:53
  • 1
    Welcome to Stack Overflow! [Please, don't use `mysql_*` functions](http://stackoverflow.com/q/12859942/1190388) in new code. They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). See the red box? Learn about prepared statements instead, and use [tag:PDO] or [tag:MySQLi]. – hjpotter92 Apr 24 '13 at 11:53
  • @Veda yes i have tied :) it is not showing me any error, but it is showing my complete DB there :O – Vidavalapati Akhilesh Apr 24 '13 at 11:56
  • 1
    You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. – Quentin Apr 24 '13 at 13:14
  • @KateGregory I didn't edit any code formatting here – Spec Apr 24 '13 at 13:54
  • @KateGregory no, I can edit what I can edit at the moment, if you notice other errors you're free to give your contribution too. – Spec Apr 24 '13 at 14:57
  • @KateGregory I'll leave it alone. – Spec Apr 24 '13 at 15:01

1 Answers1

0

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.

user2306700
  • 21
  • 4