AJAX PHP function onchange select box

Question

I have a problem about which I am very confused. I have a select box with s dynamically generated using a mysqli query:

$result = mysqli_query($db, "SELECT * FROM `users` WHERE `user_id` > 0");
echo '<html><form name="contacts" method="post"><select name="contacts"><option value="Contact list" onchange="func()">Contact List</option>';
while($row = $result->fetch_assoc()){
    echo '<option value = '.$row['user_name'].'>'.$row['user_name'] . '</option>';
}
echo '</select></form>';

I am completely new to AJAX, but I need to use jquery and ajax to pass the this.value variable to a php variable for use in a later query.

Here is my script (most of which was found online):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$("#contacts").change(function() {
    //get the selected value
    var selectedValue = this.value;

    //make the ajax call
    $.ajax({
        url: 'function.php',
        type: 'POST',
        data: {option : selectedValue},
        success: function() {
            console.log("Data sent!");
        }
    });
});
</script>

Now, when I click a value in the select box, nothing happens. There are no warnings or errors, etc.

Please help me.

p.s. function.php does exist. It is just a simple echo for now (for testing purposes)

UPDATE: HERE IS FUNCION.PHP:

<?php
/*$val = $_REQUEST['selectedValue'];
echo $val;*/

function function(){
$val = $_REQUEST['selectedValue'];
echo $val;
}
?>

UPDATE: Thank you everyone for all your help. I have now got it to work in that the network section of chrome inspect shows the function.php being requested however I still don't get the echo (I used external .js files to get it to work). My J query function is also successful (the success function echoes into the console)

Pop open your console (F12 usually) - and check the Network tab when you change an option -- see if anything is happening. — tymeJV
– tymeJV, Commented Mar 13, 2014 at 16:20
@tymeJV yep, I get this: Uncaught ReferenceError: func is not defined — user3411896
– user3411896, Commented Mar 13, 2014 at 16:30
@user3411896 You should remove that event handler, see my answer. — jeroen
– jeroen, Commented Mar 13, 2014 at 16:32
You cannot call your function function and you need to call it for it to do something... — jeroen
– jeroen, Commented Mar 13, 2014 at 16:42

jeroen · Accepted Answer · 2014-03-13 16:41:08Z

6

Your select box has no ID and you are watching the change event of $("#contacts").

Change:

echo '<html><form name="contacts" method="post"><select name="contacts"><option value="Contact list" onchange="func()">Contact List</option>';

to:

echo '<html><form name="contacts" method="post"><select name="contacts" id="contacts"><option value="Contact list">Contact List</option>';
                                                                        ^^^^^^^^^^^^^ here

You also only need one event handler, so I have removed the inline one which doesn't seem to do anything anyway.

Edit: If the select is created using ajax as well, you need event delegation:

$("body").on('change', '#contacts', function() {
   ^^^^ for example

Edit 2: Your variable is called $_REQUEST['option'] and not $_REQUEST['selectedValue']. You are also not calling your -badly named - function so you will not get any output from php except from an error like Parse error: syntax error, unexpected 'function' ....

edited Mar 13, 2014 at 16:41

answered Mar 13, 2014 at 16:20

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3411896 Over a year ago

Thanks. Obviously, that doesn't immediately solve the problem, but thanks anyway

jeroen Over a year ago

@user3411896 How is it obvious that it does not solve the problem? It should. And if it doesn't, is the select created using ajax as well? In that case you need event delegation: $("body").on('change', '#contacts', function() {

user3411896 Over a year ago

The created select is just using php and mysqli, sorry that I didn't think it would solve the problem (I am a n00b)

jeroen Over a year ago

@user3411896 Is the html well-formed? If the names contain ' characters they will break your html so you should (normally always...) use htmlspecialchars($row['user_name']) instead of just $row['user_name'].

user3411896 Over a year ago

OK, I will bear that in mind, however the users do not contain special characters

SIBHI S · Accepted Answer · 2014-03-14 11:26:47Z

3

Call onchange function in select tag as below

echo '<form name="contacts" method="post"><select name="contacts" onchange="func(this.value)"><option value="Contact list">Contact List</option></form>';

Javascript src should be in head of the html page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Add the above one in head of html. Update javacript as below

As onchange function is called in the select tag itself, following is enough

<script>

function func(selectedValue)
 {
    //make the ajax call
    $.ajax({
        url: 'function.php',
        type: 'POST',
        data: {option : selectedValue},
        success: function() {
            console.log("Data sent!");
        }
    });
}
</script>

Updated php: If you must want to get value from function, you must call it. Otherwise, simply, you can make as below

    <?php
    if($_REQUEST['option'])
    {
    $val=$_REQUEST['option'];
echo $val;
     }
    ?>

edited Mar 14, 2014 at 11:26

answered Mar 13, 2014 at 16:45

SIBHI S

6671 gold badge12 silver badges19 bronze badges

10 Comments

user3411896 Over a year ago

Thank you, I have copied and pasted this, however there is still no visible change when I select a different option

SIBHI S Over a year ago

Try to add alert(selectedValue); in the success function

SIBHI S Over a year ago

If you are able to get selectedValue in the alert box, there should be a problem with server side php. Have you copied above updated php?

user3411896 Over a year ago

yes, I still have the error: Uncaught ReferenceError: func is not defined index.php?page=inbox:53 onchange(on the line of PHP)

SIBHI S Over a year ago

Have you changed the select tag like this <select name="contacts" onchange="func(this.value)">

|

halkujabra · Accepted Answer · 2014-03-13 16:21:50Z

0

In .php file, receive it first-

$val = $_REQUEST['selectedValue'];
echo $val;

answered Mar 13, 2014 at 16:21

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

1 Comment

user3411896 Over a year ago

I have copied that code in instead of the original echo, still nothing happens

alex · Accepted Answer · 2014-03-13 16:23:27Z

0

set an id attribute in your php code for the select tag and

please don't use the same value for the name attribute in form and select tags !!

answered Mar 13, 2014 at 16:23

alex

6489 silver badges19 bronze badges

Comments

Gisheri · Accepted Answer · 2014-03-13 16:39:00Z

0

just change your function to a 'body'.on, and give your elements an id of 'contacts'

$("body").on('change', '#contacts', function() {
    //get the selected value
    var selectedValue = $(this).val();

    //make the ajax call
    $.ajax({
        url: 'function.php',
        type: 'POST',
        data: {option : selectedValue},
        success: function() {
            console.log("Data sent!");
        }
    });
});

answered Mar 13, 2014 at 16:39

Gisheri

1,7154 gold badges19 silver badges28 bronze badges

1 Comment

Gisheri Over a year ago

yah, I guess @jeroen 's answer is the same thing.

Collectives™ on Stack Overflow

AJAX PHP function onchange select box

5 Answers 5

5 Comments

10 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

10 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related