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