Hide/unhide section after form submit. Elementor

Question

i want to create a confirmation form on elementor using elementor form but the next section it can shown depends on the user select the button. i.e if i choose button A, section A will shown but if i choose button B, section B will shown. both of them will be hidden if no one fill out the form. i already use this code and it works

<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
</style>

<script>
var btn1 = document.getElementById("submitbutton");
var btn2 = document.getElementById("form-field-nohdr");

//Click Event Handlers for buttons
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("yes");

btn2.onclick = function(event){
event.preventDefault();
toggleDivs("no");
};

//function to hide or show
function toggleDivs(s){

//reset
document.getElementById("yes").classList.remove("shown");
document.getElementById("no").classList.remove("shown");

//show
document.getElementById(s).classList.add("shown");
}
</script>

but the problem is the data on the form not submitted to elementor. can anyone help me to solve this? what script that i need to use to submit the button? if you have another option for submit the data to database/googlsheets is also very nice! thanks

Answer 1

To do something after form submitted, you should add event handler to Elementor jQuery submit_success event.

Example: (submit_success example article)

jQuery(document).on('submit_success', '#your_form_id', ()=>{ 
    jQuery('.some_element_selectors').hide() 
})

Based on your question, I guess you are using some buttons outside of the form for condition checking. I suggest you to add radio input with options "Yes" and "No" to replace it.

Example:

// my radio input id is subscribe, required

var decisionValue = ''; 

// capture the radio input value when changed
jQuery(document).on('change', 'input[name="form_fields[subscribe]"]', ()=>{ 

    // get my subscribe radio input value, possible values are "Yes" or "No"
    decisionValue = jQuery('input[name="form_fields[subscribe]"]:checked').val();
    
})

// custom handler on elementor form submit_success
jQuery(document).on('submit_success', '#your_form_id', ()=>{ 
    // console.log(decisionValue);
    
    if( decisionValue == 'Yes' ) {
        jQuery('.sectionA').hide();
    } else {
        jQuery('.sectionB').hide(); 
    }
})

If you still want to use those buttons, then you might need to add trigger('click') or click() workaround to submit the form.