Replace link with form to pass variables to javascript / ajax

Question

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.

Answer 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...