Solved

How can I get a text displayed in web page?

Posted on 2015-01-09
6
345 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 108

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

930 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now