add onchange function to the chosen jquery wordpress

411
May 05, 2017, at 11:54 PM

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(function($) { 
  $('select.Nom').chosen({ width:"50%" }).change(function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","tableau.php?Nom="+str,true);
        xmlhttp.send();
    }
});
});

the tableau.php :

<?php

  $q = intval($_GET['Nom']);

  $query = "select Adresse, Nom from herboristes where Nom = '".$q."'";
  $result = mysqli_query($query);
$row = mysqli_fetch_array($result) {
echo $row['Adresse'];
  }
   }
   ?>

So what i need exactly is to display the Adresse information when i selct a name (Nom) From My dropdown list which i creat with this code :

<select class='Nom' onchange="showUser()" name='Nom' id='Nom'>
<option value="">--- Select ---</option>
[insert_php]
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password, "somapam_bd");
 $sql = mysqli_query($conn, "SELECT Nom FROM herboristes");
while($ligne_liste=mysqli_fetch_array($sql)) {
    echo '<option value="'.$ligne_liste['Nom'].'">'.$ligne_liste['Nom']."</option>\n";
}
echo '</select>';
[/insert_php]
<div id="txtHint"><b>Person info will be listed here...</b></div>

I am using the chosen plugin wordpress for the dropdown list... it's very complicated with wordpress and i really need your help. thank you

Answer 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>
Rent Charter Buses Company
READ ALSO
php send emails to gmail without server-side modifications

php send emails to gmail without server-side modifications

I am trying to create a form to send me a Gmail, with a users message, name, and subjectI can't find a way to do this without changing the server

300
insert into and get Undeclared variable:

insert into and get Undeclared variable:

I do this multi_query and get an error:

307
How to Replace Text Surrounding Text in Notepad++&#39;s Regular Expression Finder Dialog?

How to Replace Text Surrounding Text in Notepad++'s Regular Expression Finder Dialog?

This question is the opposite from other regex notepad++ questionsInstead of changing text between text, I need to replace text that is surrounding, like that:

355
code to insert comments on a post works only on one page and not the next page

code to insert comments on a post works only on one page and not the next page

hey pals am working on a php file to allow users of my website to post updates and other users to comment on iti have fetched the users posts from the database and displayed them using a while() looping function

290