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>
function showUser( event ) {
var el=event.target
var value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=new XMLHttpRequest();
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.
<select class='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>
<script src="//code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
function showUser( event ) {
var el=event.target
var value=el.options[ el.options.selectedIndex ].value;
if ( value == "" ) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xhr=new XMLHttpRequest();
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>
<select class='Nom' name='Nom' id='Nom'>
<option value='name_1'>Name 1
<option value='name_2'>Name 2
<option value='name_3'>Name 3
<option value='name_4'>Name 4
</select>
<div id="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"