Geek Answers Handbook

OnChange event on two web pages

I have two web pages. One of them is main.php and the other is combo.php. combo.php contains a dropdown, and I have included this page in my main.php.

What I want to do is when someone selects an option from my drop-down list, there should be a warning field indicating my selected item.

main.php

<html> <body> <form> //some elements <?php include 'combo.php';?> </form> </body> </html>

combo.php

 <html> <body> <form> //some elements <select name="combo"> <option value="1">America</option> <option value="2">England</option> <option value="3">India</option> <option value="4">Japan</option> </select> //some elements </form> </body> </html>

I cannot make any changes to my combo.php. onChange, and the script should be in my main.php. I don’t know how to do this, and I don’t know if this is possible. Any help on this would be greatly appreciated. Thanx.

+4
source share
4 answers

If you can use jQuery, you just need to add a piece of code to your main.php

 $(document).ready(function() { $("#idOfYourSelect").change(function(changeEvent) { alert("Your value : " + $(this).val()); }); });

Assuming your <select> has at least id idOfYourSelect (or css class name or name is somthing, which allows you to extract it from javascript code)

This will add a listener to the change event and trigger a callback each time the value changes.

If you cannot use jQuery, it will be a little more complicated, you will have to play with browser differences and use addEventLister or attachEvent to add a listener.

attachEvent documentation (for old IE)

addEventListener for Firefox, webkit, etc.

I recommend you use jQuery, which will handle all these differences for you.

+1
source

You can use jquery for this because you have to include this script,

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#getSelect").change(function() { alert($(this).val()); }); }); </script>

where getSelect is the identifier of the selected control.

after that add below php code.

 <form> //some elements <select name="combo" id="getSelect" onChange="return getSelect(this.value)"> <option value="1">America</option> <option value="2">England</option> <option value="3">India</option> <option value="4">Japan</option> </select> //some elements </form>
+3
source

Add the javascript function as follows:

 function getValue(val) { alert(val); }

And in the dropdown list add this function to the onChange property like this

 <select name="combo" onchange="getValue(this.value);"> <option value="1">America</option> <option value="2">England</option> <option value="3">India</option> <option value="4">Japan</option> </select>

When changing the values ​​of the drop-down menu, you should see the values ​​in the warning field.

+2
source

Well, if you can’t change this, then if you use jQuery you can add like this

 $('select[name*="combo"]').change(function() { var str = $('select[name*="combo"]').val(); alert (str); });

Add this to $ (document) .ready (function)

0
source

More articles:


All Articles