Changing textbox value from dropdown list using Ajax and PHP

Yesterday Tarquin macey asked me how can we change the value of the textbox based using Ajax and PHP based on the changing value of the dropdown list.Today, I’ve come up with a solution from him.In this post, you’ll see how to get the currency code of a country from PHP using Ajax and this currency code will replace the value of textbox each time the dropdown list changes.

View Live Demo

Writing Code for changing textbox value from dropdown list using Ajax and PHP

After looking at the above demo, let’s start writing code for the changing the currency code value in the textbox form Ajax using PHP when you changes the country from the dropdown list.


<select name="country" onChange="getCurrencyCode('find_ccode.php?country='+this.value)">
 <option value="">Select Country</option>
	<option value="1">USA</option>
	<option value="2">UK</option>
	<option value="3">Nepal</option>
<input type="text" name="cur_code" id="cur_code" >

As you can in the above code, there are two main components one dropdown list whose name is country and contains the list country in it.The JavaScript function getCurrencyCode() is called when user change value in the list. Note down the name and id of textbox which will have the currency code fetched from Ajax.

JavaScript Code for changing textbox value without refreshing the page

function getCurrencyCode(strURL)
  var req = getXMLHTTP();
  if (req)
	//function to be called when state is changed
	req.onreadystatechange = function()
  	  //when state is completed i.e 4
	  if (req.readyState == 4)
		// only if http status is "OK"
		if (req.status == 200)
			alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }"GET", strURL, true);

In the first line of the above code, the XMLHTTPRequest object is created using getXMLHTTP() function. To look at the the structure of this function, take a look at this old post change the value of dropdown list using Ajax and PHP . After checking the appropriate value of readystate(4 means completed) and status(200 means ok) property of XMLHTTPRequest object, the value of textbox is replaced with the returned value from PHP using Ajax . The response ,which is can be accessed via req.responseText property, is written to textbox via the value property of textbox.

PHP code for changing the value of textbox using Ajax and PHP

	case "1" :
		echo "USD";
	case "2" :
		echo "GBP";
	case "3" :
		echo "NPR";

As you can see the above PHP code, it is fairly simple which just print the currency code value according to the name of country. The value which is in the echo statement is going to returned from PHP via Ajax.

Download Full Source Code

21 thoughts on “Changing textbox value from dropdown list using Ajax and PHP

  1. Ohh, thank you very much :) this is extremly useful, and soo quick!

    seems very easy to adapt into a database powered system, very nice indeed :)

  2. Hum

    Nice to landed in this page after googling. How can I add extra output values, lets say add country code in your example. Furthermore, show the results in plain area, not in box (form).
    Thanks in advance.

  3. @Hum- you can change the value of div with id “divid” like below


    and regarding adding two values, you have to make a string with these two values separated by a symbol for example string like “1#USA” can be returned and then separate the two part from JavaScript

  4. I adapted this a little bit differently. If your using a database for example and your having the data post to this form you can instead use a query like these:

    if($_POST[‘data’] == “var1″){
    echo “output content”;
    }elseif… etc

    or you can use a MySQL statement to grab data and simply echo the results you want.

    The brialliant and simple part of this code is you can do ANYTHING you want, cause it will display anything that you output in the echo statement.

    Again thanks, im using this for several projects now, very awsome and easy to use script.

  5. Sorry to double post but ive decided to post the code im using incase you wish to use a database query. As i said very easy;


    $movie_list = @mysql_query(“SELECT * FROM movies WHERE `id` = ‘”.$obtain_ID.”‘”);
    $movie_size = $movielisting[‘size’];

    echo “”.$movie_size.””;


    As you can see all i need to be displayed is the movie size, therefore thats all being displayed.

  6. @Tarquin-thanks for sharing the code but always sanitize the input..change the following code to


    why checkout this post..

  7. Yeah its just an example, the database this particular code is on, is on my local server and is for testing purposes only. but thx for that, will keep that particular thing in mind.

  8. selvi

    hi, i want to know that mysql data should be displayed on textbox after selected the combobox selected value…..Pls help me genious….

  9. Pacleb Aphryl

    whats tha appropriate field for cooment and how to make the cooment not to be expand , what i mean is the fix field for comment . . email me please this is my e-mail

  10. vinoth

    hi, in java scrip xmlHttp.readyState value 0,1,2,3,4. in my program i got only 1 is my value means what is the err and how i can change plz tell me.

  11. adinda

    how can we change the value of the multiple textbox based using Ajax and PHP based on the changing value of the multiple dropdown list ???

  12. Caksono

    Thanks .. really really useful for me :)

  13. ones

    how to with mysql ???

  14. thanks!!!!
    it’s excelente.
    very good work

  15. Jones

    It’s great and it solved my problem struggling for 3 hours in this morning.

  16. Hello,

    I use it for a while now, but it comes to my attention that
    its working with firefox, but not with IE8 even not in compatability mode on
    Is there a fix?

  17. APC

    How shoul I modify this example to make it change the values in 3 ore more textareas (not only one) ?


  18. Hello Roshan Thanks Dear for nice script. I use it and it’s working perfectly .
    However i have one query in this script we can fill one text box value after dropdown selection suppose we have to fill more than one text field ..then how can we do that .
    I tried it but it is giving me a combined strings of all value .
    Plz reply

  19. Dear Roshan Thanks for nice script ;
    I just wana know that how we can populate more than one textfield with the same dropdown selection

  20. Mwathi

    Thanks for this, really appreciate…

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>