Solved

How can I get a text displayed in web page?

Posted on 2015-01-09
6
242 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 2

Expert Comment

by:Elxn
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks a lot!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Hidden Field Value 10 34
Apostophes in PHP generated form 6 13
spservices different results in IE and Chrome. 11 23
sql sentence 2 10
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

744 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

21 Experts available now in Live!

Get 1:1 Help Now