In order to change the shortcode value by leveraging ajax, you need to modify the PHP code and jQuery as mentioned below:
function table_generator() {
// Set product providers
$providers = array(
'Provider 1',
'Provider 2',
'Provider 3',
);
// Build provider selection form
$output .= '<form id="submitProvider" action="" method="POST">';
$output .= '<select name="provider_list">';
$output .= '<option value="default" selected disabled hidden>Select a provider...</option>';
// Loop through '$providers' array, creating <select> options
foreach ($providers as $provider) {
$output .= '<option value="' . $provider . '">' . $provider . '</option>';
}
$output .= '</select>';
$output .= '<button type="submit">Submit</button>';
$output .= '</form>';
return $output;
}
// AJAX: Generate/update table
add_action('wp_ajax_updateTable', 'updateTable');
add_action('wp_ajax_nopriv_updateTable', 'updateTable');
// Return output on POST with updated 'child-shortcode'
function updateTable() {
if (isset($_POST['provider_list'])) {
$selected_provider = sanitize_text_field($_POST['provider_list']);
$output .= '<div class="table-container">';
$output .= do_shortcode( '[child-shortcode table="'. $selected_provider . '"]' );
$output .= '</div>';
wp_send_json(array('status' => 'success', 'html' => $output));
}
wp_send_json(array('status' => 'fail'));
}
add_shortcode( 'table_generator', 'table_generator' );
and change your javascript code as following:
$('#submitProvider').submit(function(e){
e.preventDefault();
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
'action': 'updateTable',
'provider_list': $("[name="provider_list"]").val()
},
error: function() {
console.log("Error");
},
success: function(data){
if(data.status == 'success'){
console.log(data.html);
}
},
});
});
Based on the ajax response you can show the html output.