For example. You got 1 list with 3 options.
a
b
c
once someone select a
it instantly appears a text through php under the list or above it.
Without to reload or anything else. I have seen it before 100%.
pseudo code

<li>
<option 1> a</o>
<option 2> b</o>
<option 3> c</o>
</li>
<?php 
if(option 1 is selected)
{
echo "YEAH B1tch";
}
else if(option 2 is selected)
{
echo "NO Sh1TZ";
}
else if(option 3 is selected)
{
echo "DaMn uR rIgHt";
}

Recommended Answers

All 6 Replies

Can't be done with PHP as it's executed server side and the result is then sent to the browser.

You CAN do it with CSS or with Javascript however, by send the info and hiding it, then the CSS or javascript reveals the hidden info.

If you visit the ukfolkfestivals site in my signature, go to one of the country pages, and click on any festival name that does not have its data visible, javascript will reveal it for you. I've deliberately got a slow reveal rather than a fast one, but it can be instant.

But you can't run PHP on the client's computer, so PHP can't do this..

Can't be done with PHP as it's executed server side and the result is then sent to the browser.

You CAN do it with CSS or with Javascript however, by send the info and hiding it, then the CSS or javascript reveals the hidden info.

If you visit the ukfolkfestivals site in my signature, go to one of the country pages, and click on any festival name that does not have its data visible, javascript will reveal it for you. I've deliberately got a slow reveal rather than a fast one, but it can be instant.

But you can't run PHP on the client's computer, so PHP can't do this..

Mind sharing the code you used for that? I would like to implement that in something I'm doing.

This could be done with jquery

Yep, jquery would do it using AJAX.(if you want it done without your page loading)

//ex: <li class = "click">a</li>
$(".click").click(function(){
	  $.ajax({
	type: "GET",
	url: "create another page to display what you want from the database",

	success: function(text){
					   							                           $("#display_details").html(text);
					}
				  });
			return false;
		});

//remember to download jquery before using this function.

of course you can still use this with simple javascript

to initiate AJAX you need to initiate XMLHttpRequest

//not my code

var xhr = false;

function makeRequest(url, callback_function, return_txt) {
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}

	   if (!xhr) {
       alert('Your browser doesn\'t support this feature.');
       return false;
   }
   xhr.onreadystatechange = function() {
   		/* The request can go through a number of states but we only care about 4
   		 	0 (uninitialized)
			1 (loading)
			2 (loaded)
			3 (interactive)
			4 (complete)
   		*/
       if (xhr.readyState == 4) {
           if (xhr.status == 200) { //200 is sucess. The page brought results back
               if (return_txt) {
                   eval(callback_function + '(xhr.responseText)');
               } else {
                   eval(callback_function + '(xhr.responseXML)');
               }
           } else if (xhr.status != 0){ //some versions of IE can return 0
        //Stephan added this line above, BUT all it does is possibly prevent the alert.
        //it doesn't call eval as if the status was 200, so perhaps this needs more research
               alert('There was a problem with the request.(Code: ' + xhr.status + ')');
           }
       }   	
	   
   }
xhr.open("GET", url, true);
		xhr.send(null);
}

You can assign ID to your text fields. Hide those fields as default and when you click any option show your required field by using javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.