you are trying to return data from the PHP function showTheButton()
. You are directly echoing js code inside the function, which will not be properly handled when returning data from the function.
JavaScript function to toggle button visibility
function showTheButton($dateofReturn, $reportType) {
// Set a flag to indicate whether the button should be shown
$show_button = false;
// Check conditions to determine if button should be shown
if ($dateofReturn && $reportType) {
$show_button = true;
}
// Return the flag value
return $show_button;
}
WordPress action hook for form submission
add_action('elementor_pro/forms/new_record', function($record, $handler) {
// Make sure it's our form
$form_name = $record->get_form_settings('form_name');
// Replace 'reportGenerationForm' with the name you gave your form
if ('reportGenerationForm' !== $form_name) {
return;
}
// Extract submitted fields
$raw_fields = $record->get('fields');
$fields = [];
foreach ($raw_fields as $id => $field) {
// Sanitize field values
$fields[$id] = sanitize_text_field($field['value']);
}
// Get report date and type
$dateofReturn = isset($fields['reportDate']) ? $fields['reportDate'] : '';
$reportType = isset($fields['reportType']) ? $fields['reportType'] : '';
// Call PHP function to determine if button should be shown
$show_button = showTheButton($dateofReturn, $reportType);
// Add response data indicating whether button should be shown
$handler->add_response_data('show_button', $show_button);
}, 10, 2);
In your js code, you can then check the value of the show_button
flag and execute the necessary js code to toggle the button visibility
document.addEventListener('DOMContentLoaded', function() {
var showButton = '<?php echo json_encode($show_button); ?>';
// Check if the show_button flag is true
if (showButton) {
var button = document.getElementById('view-report');
button.style.display = 'block';
}
});