Solved

How can I get a text displayed in web page?

Posted on 2015-01-09
6
429 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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)

622 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