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

JoDev · Accepted Answer · 2013-09-23 12:53:04Z

2

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'];

edited Sep 23, 2013 at 12:53

answered Sep 23, 2013 at 12:29

JoDev

6,9331 gold badge25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2743057 Over a year ago

Thanks for the feedback, but it seems I must have misscopied my code. Updated with what I have right now. I still get nothing returned.

Collectives™ on Stack Overflow

Get value of input field without submitting form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related