Using AJAX to retrieve values from <select> dropdown?

Question

I want to retrieve the value of my dropdown on change, and post it to my PHP (at the moment, the PHP is just var_dump, for debugging purposes)

I'm stuck at posting the selected value to my AJAX, seemingly there no change.

I Using WP framework to load scripts and run them through admin-ajax.php -- I've been using this approach for others AJAX functions, and it is working.

I have a dropdown list, like this:

HTML

<form action="" method="post">                        
 <select name="count" class="count">
  <option value='1'>1</option>  
  <option value='2'>2</option>  
  <option value='3'>3</option>  
  <option value='4'>4</option>  
  <option value='5'>5</option>  
 </select>
<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">     
</form>

AJAX

$(document).ready(function () {
    $('select.count').change(function () {

        alert("Whyunoalert?");

        $.ajax({
            type: "POST",
            url: (my_ajax_script.ajaxurl),
            data: ({
                action: 'generate',
                koordinator_id: $('input[name=$"koordinator_id"]').val(),
                id: $('select.count').val()
            }),
            success: function (msg) {
                alert("Data changed:" + msg);
            }
        });
    });
});

PHP

function generate() {     
    $count = $_POST['id'];
    var_dump($count);
    $koordinator_id = $_POST['koordinator_id'];
    var_dump($koordinator_id);
}

EDIT

I've changed the code accordingly to the first three comments. Now my code executes the AJAX but still no var_dump are made in the php file. Thanks for the help so far, hope you can do a bit more. Also i've added the functions.php code , where the php function is bound and the redirect to ajax-admin.php is setup.

functions.php

function load_scripts() {

wp_enqueue_script('local_jquery', '/wp-content/themes/tutorial_theme/scripts/scripts.js');
wp_enqueue_script('ajax_func', get_template_directory_uri() . '/scripts/ajax_implementation.js');

}
if (!is_admin())
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('template_redirect', 'load_scripts');

$dirName = dirname(__FILE__);
$baseName = basename(realpath($dirName));
require_once ("$dirName/ajax_functions.php");

add_action("wp_ajax_nopriv_approve", "generate");
add_action("wp_ajax_approve", "generate");

2nd EDIT

removed this from the ajax: (was from old copy-paste)

     dataType: 'html',

Amal · Accepted Answer · 2013-10-30 13:53:24Z

2

The selector $('input[name=$"koordinator_id"]') is wrong in your data line. The syntax for input name ending with some string is $('input[name$=somestring]'].

Use this instead:

$('input[name$="koordinator_id"]') // '$' needs to be before '='
             ^

edited Oct 30, 2013 at 13:53

Amal

76.8k18 gold badges133 silver badges154 bronze badges

answered Oct 30, 2013 at 13:47

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

Comments

Rahil Wazir · Accepted Answer · 2016-02-18 12:52:40Z

1

First of all if you are firing ajax onchange event why did you wrap them in the form tag? remove it if no use other than onchange event.

Second is you're using action: 'generate' in your ajax function but you're not hooking the right action in your functions file of php

add_action("wp_ajax_nopriv_YOUR_ACTION", "METHOD");
add_action("wp_ajax_YOUR_ACTION", "METHOD");

So it would be

add_action("wp_ajax_nopriv_generate", "generate");
add_action("wp_ajax_generate", "generate");

Last but not least always exit your ajax method call, so make sure it won't fall below.

function generate() {     
    $count = $_POST['id'];
    var_dump($count);
    $koordinator_id = $_POST['koordinator_id'];
    var_dump($koordinator_id);
    exit;
}

Also as @Krishna answer remove the $ sign unexpected expression

koordinator_id: jQuery('input[name=$"koordinator_id"]').val(),

Need to be:

koordinator_id: jQuery('input[name="koordinator_id"]').val(),

edited Feb 18, 2016 at 12:52

answered Oct 31, 2013 at 21:20

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

1 Comment

Pjust Over a year ago

Thansk for taking your time and writing a good explanation. very helpfull and solved everything. Thx alot! <3

Minoru · Accepted Answer · 2013-10-30 13:53:42Z

1

You're missing the { after the .ready(function(). Fix it like this:

$(document).ready(function () {
    $('select.count').change(function () {
        alert("Whyunoalert?");

        $.ajax({
            type: "POST",
            url: 'my_ajax_script.ajaxurl',
            data: ({
                action: 'generate',
                koordinator_id: $('input[name=$"koordinator_id"]').val(),
                id: $('select.count').val()
            }),
            dataType: 'html',
            success: function (msg) {
                alert("Data changed:" + msg);
            }
        });
    });
});

answered Oct 30, 2013 at 13:53

Minoru

1,7303 gold badges21 silver badges45 bronze badges

2 Comments

Minoru Over a year ago

@Pjust Did you change the url? If yes, edit your post to the current code, please.

Pjust Over a year ago

Yes i did, that had no effect, and i have a function, with brackets() around the url, and that works. so i dont think that's it.

웃웃웃웃웃 · Accepted Answer · 2013-10-30 13:50:20Z

0

Try like this

$(document).ready(function()
$('.count').change(function() {
    $.ajax({
        type: "POST",
        url: 'my_ajax_script.ajaxurl',
        data: {'action': 'generate', 'koordinator_id': $('input[name=koordinator_id]').val(), 'id': $('.count').val()}),
        dataType: 'html',
        success: function(msg) {
            alert("Data changed:" + msg);
        }
    });       
});
});

Also avoid using of php short tags.Sometimes it cause problems if your php version doesnt support short tags.So change this

<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">

answered Oct 30, 2013 at 13:50

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

Collectives™ on Stack Overflow

Using AJAX to retrieve values from <select> dropdown?

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related