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';
}
});