Using AJAX to retrieve values from <select> dropdown?

0 Views

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.

Read More

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',
Post Views: 0

Related posts

Leave a Reply

4 comments

  1. 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 '='
             ^

  2. 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(),

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

  4. 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'] ?>">