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.