Get value of input field without submitting form

Question

I want to get the current value of the input field, then echo some information from a database based on the fields value, while not using a submit.

Something like when you are filling out a new profile for a site and instead of going through the hassle of clicking submit and going back if your username is already taken, to display an error message next to that field.

This is what I've got so far:

<html>
<body>
<form name='Form'>
Date: <input type='text' id='sheetid' />
<input type='button' onclick='ajaxFunction()' value='Query!' /> <br />
</form>
<div id='content'>Result</div>
</body>

<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
    try{
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
        alert("ERROR!");
        return false;
        }
    }
}
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('content');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var sheetid = document.getElementById('sheetid').value;
    var queryString = "?url=" + sheetid;
    ajaxRequest.open("GET", "test.php" + queryString, true);
    ajaxRequest.send(null); 
}
</script>

</html>

and my php:

<?
$st=$_POST['sheetid'];
require_once('database_connect.php');
$inf = "SELECT * FROM `comments` WHERE date='$st' ORDER BY time ASC";
 $info = mysql_query($inf);
     if(!$info) die(mysql_error());
   $info_rows = mysql_num_rows($info);
     if($info_rows > 0) {
   echo '<table width="95%">';
while($info2 = mysql_fetch_object($info)) {
echo '<tr>';
echo '<td>';echo '<a href="mailto:'.$info2->username.'@mail.com">'.stripslashes($info2->username).'</a>'; echo "("; echo date('H:i', $info2->time)."): "; echo stripslashes($info2->comment).'</td>'.'</tr>';
}
}
?>

I'm not sure why this doesn't display any comments and also can't figure out how to make it work without pressing the query button, but after the user has finished typing or clicked out of the input box.

Any feedback would be appreciated.

Thnaks

Answer 1

Where do you init the XmlHttpRequest object? Something like this :

var ajaxRequest ;
if (window.XMLHttpRequest) 
{ 
ajaxRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) 
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

To complete my answer, I'll add 2 things :

1st : in onreadystatechange function, don't forget to test for the HTTP response code like this :
if (xhr.readyState == 4 && xhr.status == 200)
2nd : you can use a JS framework like jQuery or Prototype to simplify your AJAX calls.

Response 2

Try to add this :

ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded;');

RESPONSE

You use GET method to post data ajaxRequest.open("GET", "test.php" + queryString, true); , but in your PHP, you use POST var to retrieve it $_POST['sheetid'] Just use this instead :

$_GET['sheetid'];

Get value of input field without submitting form

Question

1 answers

solution1
2 ACCPTED 2013-09-23 12:29:13

Get value of input field without submitting form

Question

1 answers

solution1 2 ACCPTED 2013-09-23 12:29:13

solution1
2 ACCPTED 2013-09-23 12:29:13