0

I'm sending a single variable to javascript/ajax via a link, but want to send via a form so I can pass user input as well. (It's for a plugin that interfaces with an Echonest Remix python script to create audio edits). The short question is how can I receive this in a WP ajax javascript:

<form id="receive_me" method="POST">
Username: <input type="text" name="user_variable">
<input type="hidden" name="generated_var" value="'.$arguments.'">
<input type="submit" value="Submit">
</form>

The JS:

function glitch_player_display(generated_var) {
      jQuery.ajax({
        type: 'POST',
        url: ajaxglitch_playerajax.ajaxurl,
        data: {
          action: 'ajaxglitch_player_ajaxhandler',
          mix_name: mix_name
        },
        success: function(data, textStatus, XMLHttpRequest) {
          var showglitchplayer = '#showglitchplayer';
          jQuery(showglitchplayer).html('');
          jQuery(showglitchplayer).append(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
          alert(errorThrown);
        }
      });
    }

This is the PHP current:

function glitch_player_show_make_mix(){
    $result = "";
    $generated_var = wp_create_nonce("ajaxloadpost_nonce");
    $arguments = "'".$nonce."'";
    $link = ' <div id="make_button"><a onclick="glitch_player_display('.$arguments.');">'. "Link Title" .'</a></div>';
    $result .= '<h3>' . $link . '</h3>';
    $result .=  '<div id="showglitchplayer">';
    $result .= '</div>';
    $result .= '<div id="play_button"><a title="The Title" href="'.plugin_URL.$generated_var.'.mp3">First Mix</a></div>';
    return $result;
}


add_action( 'wp_ajax_nopriv_ajaxglitch_player_ajaxhandler', 'ajaxglitch_player_ajaxhandler' );
add_action( 'wp_ajax_ajaxglitch_player_ajaxhandler', 'ajaxglitch_player_ajaxhandler' );

function ajaxglitch_player_ajaxhandler(){
    $generated_var = isset( $_POST['generated_var'] )? $_POST['generated_var'] : false;
    error_log( "The generated_var is $generated_var" ); // write it to the error_log too.)

But I'm not sure how to receive the POST to javascript. Something along these lines?

$('#inputForm').submit(function glitch_player_display(mix_name)

I don't need a second php script do I? I'll be grateful for a point further (or at all) in the right direction.

Thanks and stay well.

ANSWER: Based on input below, here ONE OF THE WAYS to send the variable via form:

<form id="form_id" name="form" method="post">
Field Title: <input type="text" id="user_input" size = 2>
<input type="hidden" id="mix_name" value="'.$arguments.'">
<input id="btn-submit" type="submit" onclick="glitch_player_display()" value="Submit">
</form>

And here's the JS/jQuery

function glitch_player_display() {
        user_input = document.getElementById("user_input").value ? document.getElementById("user_input").value : 2;
        generated_var = document.getElementById("generated_var").value ? document.getElementById("generated_var").value : "Default_Var";
        $(document).on('submit', '#form_id', function(event){
            event.preventDefault();
        });
        jQuery.ajax({ 
            beforeSend: function() {
                alert(generated_var + " in ajax user_input: " + user_input);
            },
            type: 'POST',
            url: ajaxglitch_playerajax.ajaxurl,
            data: {
                action: 'ajaxglitch_player_ajaxhandler',
                generated_var: generated_var,
                user_input: user_input
            },
            success: function(data, textStatus, XMLHttpRequest) {play_button
                var showglitchplayer = '#showglitchplayer';
                jQuery(showglitchplayer).html('');
                jQuery(showglitchplayer).append(data);
            },
            error: function(MLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }

Note that we are not sending the variables to the js function glitch_player_display() as we were in the first case. We are picking it up within the JS function via document.getElementById("user_input").value. Also

beforeSend: function() {
                alert(generated_var + " in ajax user_input: " + user_input);
            },

Is just a way to test and see what the jQuery.ajax function is actually receiving. And since we're not actually calling another script via the submit button, it is necessary to invoke

$(document).on('submit', '#form_id', function(event){
            event.preventDefault();
        });

So jQuery (or JS?) doesn't think it should be finding another script and generate an error, which in this case replaced user_variable with [object Object]. The object could be viewed by using console_log() and I think it was a huge error object.

1

Worked out the answer with input from non WP-oriented forum and edited above to show.

In short the variables were retrieved from WITHIN the js function using getElementByID and prevented error on non-action form with event.preventDefault();

like so:

function glitch_player_display() {
        user_input = document.getElementById("user_input").value ? document.getElementById("user_input").value : 2;
        generated_var = document.getElementById("generated_var").value ? document.getElementById("generated_var").value : "Default_Var";
        $(document).on('submit', '#form_id', function(event){
            event.preventDefault();
        });//etc...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.