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.
Related
I want to submit different input data using the same pre-generated html form template (they just have different variable names as titles). On my page, I have two buttons which have basically the same popover effects. When I clicked submit (this is the button inside a .popover-content, it appears that I submit both forms even though one of them is hidden.
function handlePopover (button) {
const id = button.attr('id');
$(document).on('click', '#close', function(){
botton.popover('hide');
}
$(document).on('click', '#submit', function(){
if(id === 'button1') alert("button1");
else if(id === 'button2') alert("button2");
}
}
This is how I used this function:
const button1 = $("#button1");
const button2 = $("#button2");
handlePopover(button1);
handlePopover(button2);
It's probably because I added a listener like this $(document).on(...). But I didn't know how to solve this problem. Can I deactivate the listener when the popover content is hidden? Thank you in advance!
I have figured this out. You need to add a listener to the popover button before adding a listener to the submit button.
button.on('shown.bs.popover', function() {
// add a listener to the submit button
$(document).on('click', '#submit', function(){
if(id === 'button1') alert("button1");
else if(id === 'button2') alert("button2");
}
}
I am doing a popup window using Bootstrap modal that is triggered by the click of a checkbox in the main page. The popup window contains several textboxes for searching from the database based on user's input. Then after the input and the click of a search button, a table will display the data retrieved on the same popup window. Then, after the user chooses a row from the table, the chosen data will be displayed in their respective textboxes in the main page and the checkbox will be checked.
My plan is to uncheck the checkbox on a second click (thinking if the user suddenly decided to cancel their decision - checking the checkbox). I tried but it didn't uncheck the checkbox. Instead, the popup window comes out at every click of the checkbox and the checkbox won't uncheck anymore.
$('#inputNew').on('hidden.bs.modal', function (e) {
document.getElementById("inputNewCheckbox").checked = true;
document.getElementById("inputMother").style.display = 'block';
document.getElementById("inputMotherlabel").style.display = 'block';
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
$('#inputNew').on('click', '#SearchMother', function () {
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
$('#inputNewCheckbox').prop('checked', false);
}));
}
This is the checkbox input in the view page:
<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New
For the checkbox unchecking part, i also tried
if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
But when i run, the checkbox is checked by default and unchecking doesn't work. Plus the modal popup window appears.
I also tried
if (document.getElementById("inputNewCheckbox").checked = true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
Also same output as above code..can anyone help me out please? How can i fix this?
You're probably better off listening for a change event on the checkbox, and only showing your modal if the checkbox is checked:
$('#inputNewCheckbox').on('change', function(e){
var _this = $(this);
if(_this.is(':checked')){
/* show your modal */
}
});
See change - Event reference and the :checked pseudo-class on MDN.
I have some tables (more than one), when I select one table by clicking on it, I need that the first radio button is selected.
It works fine, but if I want to change the option of the radio button i cant. It keeps always the first one marked.
Here is a fiddle with the issue:
https://jsfiddle.net/jzbm4j60/
$('table').click(function(event) {
$('table').removeClass('focus');
event.stopPropagation();
$(this).addClass('focus');
var $firstRadio = $(this).find('input:radio[name=rdGoFerrys]:first');
var $secondRadio = $(this).find('input:radio[name=rdBackFerrys]:first');
if ($firstRadio.is(':checked') === false) {
$firstRadio.prop('checked', true);
}
if ($secondRadio.is(':checked') === false) {
$secondRadio.prop('checked', true);
}
});
The click event on your inputs is bubbling up the DOM and triggering the click event you have on your table. Stop that behavior by using:
$('input').click(function(e) {
e.stopPropagation()
})
I have two json files "a.json" and "b.json". I need to show a different form when the user clicks each of the different buttons. My issue is that when I click on the first button it show the first form, but when I click on the second button it doesn't show the second form. I need to show one form at a time, i.e. when I click the second button it removes the first form and shows the second form.
$scope.getFromAFile= function () {
// body...
var inputs=[];
$http.get('a.json').success (function(data){
var a=changeData(data);
$scope.formFields=[]
console.log('pp');
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
$scope.getFromBFile= function () {
// body...
$http.get('b.json').success (function(data){
var a=changeData(data);
console.log('pp');
$scope.formFields=[]
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
here is plunker
http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview
Dont mix JQuery with AngularJs
you can use ng-click and ng-show for achieving such Task
<button ng-click="hideFormOne()">Hide Form One</button><!-- Hides Form One & Shows Form Two -->
<button ng-click="hideFormTwo()">Hide Form Two</button><!-- Hides Form Two & Shows Form One-->
<form ng-show="showFormTwo">
:
:
<form ng-show="showFormOne">
:
:
script
$scope.hideFormOne = function()
{
$scope.showFormOne = false; // Hides Form One
$scope.showFormTwo = true; // Shows Form Two
}
$scope.hideFormTwo = function()
{
$scope.showFormTwo = false; // Hides Form Two
$scope.showFormOne = true; // Shows Form One
}
If i understand u can use hide() function:
on document load u need hide both forms:
$('#form1').hide();
$('#form2').hide();
And on button click:
$('#button1').click(function(){
$('#form1').show();
$('#form2').hide();
});
$('#button2').click(function(){
$('#form1').hide();
$('#form2').show();
});
You can have two forms, eg formA and formB.
And then if user click on formA, hide formB or click on formB then hide formA.
Example if clicked formA:
$('formA').hide();
$('formB').show();
And example if clicked formB:
$('formA').show();
$('formB').hide();
Here is Plunker Demo
I have a form with multiple divs with same names (full-width). They all are on the same level. One of them is hidden (with a class hide). What I want is that if I select Submit, it should not submit, first hide all the brother divs of the hidden div (in this case full-width) and unhide the one with the class hide.
Now when I press again, it should just submit the Form.
JSFiddle is here:- http://jsfiddle.net/xmqvx/2/
Your code had a couple issues:
You used event.preventDefault but passed event in as e - should be e.preventDefault
Your ID selector targeted an ID that didnt exist (changed to #submit-this)
The working code:
$("#submit-this").click(function (e) {
e.preventDefault();
if ($(".full-width").hasClass("hide")) {
$(".full-width").hide();
$(".full-width.hide").removeClass("hide").show();
} else {
alert("Submitting");
$("#this-form").submit();
}
});
http://jsfiddle.net/xmqvx/4/
You could also take advantage of JavaScript's closures like so, to avoid having your behavior be dependent on your UI:
$(document).ready(function () {
var alreadyClicked = false;
$("#submit-this").click(function (e) {
e.preventDefault();
if (alreadyClicked) {
$('#this-form').submit();
} else {
$('.full-width').hide();
$('.hide').show();
alreadyClicked = true;
}
});
});