Solved

How can I get a text displayed in web page?

Posted on 2015-01-09
6
407 Views
Last Modified: 2015-01-11
I am a complete newbie to ajax and javascript.
I would like to compare a number that is input on a web page form with a value in a databse and, if the number is greater than the value, I want a text to be displayed.
Please, experts, give me advice how to go about it and if possible give me references to tutorials.
0
Comment
Question by:lericson
  • 3
  • 2
6 Comments
 
LVL 2

Expert Comment

by:Elxn
ID: 40540213
You'll have to make a seperate page on your server that queries your database.
Like this in PHP
<?
$sql = "SELECT value FROM table WHERE id = 5";
$res = mysqli_query($db_connection,$sql);
$row = mysqli_fetch_array($res,MYSQLI_ASSOC);
echo $row[value];
?>

Open in new window


Then you'll need to use jQuery to check the value via an ajax call:
function check_val(el){
$.ajax({ 
  type: "POST", 
  url: "folder/file-name.php",  //this is the path on your server to the PHP file you made with the code in it like i just showed you.
  cache : false,
  data: {'key':'value'}, //if you want to send POST data to the page you can do it here
  success: function(data) {
	var x = parseInt(data);
        if(el.value > x){
        $("#element").html("This is the message to display");
        }

  }, 
  error: function (xhr, status) {  
	alert('Unknown error ' + status);
  }    
});
}

Open in new window


Then use the following HTML
<input type="text" onChange="check_val(this)" />

This is untested but I bet it will work.
0
 

Author Comment

by:lericson
ID: 40541253
nick gross.
Thanks for your reply.
I tried this:

ajax-test-1.php

and this:

ajax-test-2.php

I need to ask you to explain these two line
  data: {'key':'value'}, //if you want to send POST data to the page you can do it here
and
 $("#element").html("This is the message to display");
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40541422
There is an article here that deconstructs the basics of jQuery / AJAX requests to a server.  The article and scripts show how to receive input on the client machine, send it to the server, and get a response back that can be shown on the client browser.  All you would need to add would be the "rules" to compare the number to your value from the database!
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 2

Expert Comment

by:Elxn
ID: 40542247
Sure, figured you might know about jquery selectors.  Basically, when you want to do something with an element on your page; say a <div> with a specific class or id then you can use a selector to "select" this element.

So say I have a div like this <div id="nick">Stuff inside the div</div>.  In jQuery, to do something with this specific div you use the selector (which is just like CSS, say you wanted to put some CSS code to the div, you'd do it in much the same way).  Here is how you select that div that has the id of "nick" with jquery: $("#nick")

You can see this W3 school link for a detailed view of selectors:
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

So the next thing you need to know is the method we are using with the selector.  I'm using the html() method.  You use this to change everything that is inside the selected element.  Read this for more explanation:  http://www.w3schools.com/jquery/html_html.asp

So this line:  $("#element").html("This is the message to display");
That means, get the whatever html entity has the id set to "element" and with that element, use the html() method and change whats inside of it to "This is the message to display"....

So for you, where you want to display this message, say its a div, you set the id of the div, and then use a # sign in the jQuery selector followed directly by the id of your div.  

Concerning the   data: {'key':'value'}, code
This is used to send post data to the page.  So right now that data being sent is going to be posted to the page.  I'm assuming you know how to post data to a page and work with it.  Right now this code is sending post data to the page with a key of "key" and a value of "value".  You would access this in the script via $_POST[key].  

If you did:  
echo $_POST[key];  
you would have the word "value" printed on the page.

So if you want to send some info to your script, you would do it with the data attribute.

Got it?
0
 
LVL 2

Accepted Solution

by:
Elxn earned 500 total points
ID: 40542266
Okay,

Problem was the onChange event in the input box.  Make sure you use the onkeyup which will fire the function each time the key comes up.  It looks like this:
<input type="text" onkeyup="check_val(this)" />

Got a simpler version of this working here:  http://girlzunderground.com/ee.html

All i'm doing in the PHP script is echoing out the number 5.  In your PHP script you'll echo out your database value.

If you have questions about anything with the jquery just google "jquery empty" for example.

Thanks!
0
 

Author Closing Comment

by:lericson
ID: 40543149
Thanks a lot!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question