Add Onchange Function To The Chosen Jquery Wordpress
I have problems when i tried to add the onchange function to the js file Onchange i got it from :https://www.w3schools.com/php/php_ajax_database.asp : jQuery(document).ready(funct
Solution 1:
I don't use jQuery at all so this might not be either correct or the way to do it but in essence you can either create an anonymous function or use a named function ( but not as you had tried ) This approach uses a named function but called differently.
<script>functionshowUser( event ) {
var el=event.targetvar value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=newXMLHttpRequest();
xhr.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
document.getElementById("txtHint").innerHTML = this.response;
}
};
xhr.open("GET","tableau.php?Nom="+value,true);
xhr.send();
}
}
jQuery(document).ready(function($) {
$('select.Nom').chosen({ width:"50%" }).change( showUser );
});
</script>Because you are binding an event listener to the SELECT menu using jQuery you don't need an inline event handler.
<selectclass='Nom' name='Nom' id='Nom'>
.... rest of code
Update: the above code was not tested at all, the following however has been so I'm sure you can make use of it. One thing of note was when I tried initially with the code $('select.Nom').chosen({ width:"50%" }).change it threw errors so I removed the .chosen({ width:"50%" }) from that and what follows appears to work ok.
<?php/*
this emulates the database calls you would make when calling tableau.php
*/if( $_SERVER['REQUEST_METHOD']=='GET' ){
if( !empty( $_GET['Nom'] ) ){
exit( $_GET['Nom'] );
}
}
?><html><head><scriptsrc="//code.jquery.com/jquery-latest.js"type="text/javascript"></script><script>functionshowUser( event ) {
var el=event.targetvar value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=newXMLHttpRequest();
xhr.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
document.getElementById("txtHint").innerHTML = this.response;
}
};
/* url has been edited for the demo */
xhr.open("GET","?Nom="+value,true);
xhr.send();
}
}
jQuery(document).ready(function($) {
$('select.Nom').change( showUser );
});
</script></head><body><form><selectclass='Nom'name='Nom'id='Nom'><optionvalue='name_1'>Name 1
<optionvalue='name_2'>Name 2
<optionvalue='name_3'>Name 3
<optionvalue='name_4'>Name 4
</select><divid="txtHint"><b>Person info will be listed here...</b></div></form></body></html>
Post a Comment for "Add Onchange Function To The Chosen Jquery Wordpress"