Solved

How can I get a text displayed in web page?

Posted on 2015-01-09
6
411 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 110

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

679 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