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',

Solution 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(),

Solution 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 '='
             ^

Solution 3

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);
            }
        });
    });
});

Comments

[Minoru]

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

[Pjust]

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.

[Pjust]

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