I have a multi-page gravity forms form with conditional logic setup here
If the user selects on option in a set of radio buttons I'd like to replace the 'next page' button of the form with the 'Submit' button which is not rendered on that current page.
I've approached this a few ways, including getting the onClick and onKeypress values from the submit button and applying them to the next page button, But that gets messy when a user decides to toggle another radio button where the 'Next' page button should be unaltered. I've tried to use .replaceChild() and .insertBefore() so that I could just swap the buttons, or hide the 'Next' button and show the 'Submit' button, but I receive a parentNode.replaceChild is not a function error on both of those attempts.
Am I going about this in an appropriate way? And/or what is happening with the 'is not a function' warnings?
function formLove() {
// disable button until home-size is selected
var nextbutton = document.getElementById("gform_next_button_13_61");
nextbutton.disabled = true;
// Survey Type Selection &
$('li.survey-type input[type=radio]').change(function() {
nextbutton.disabled = false;
if (this.value == 'Give Me a Call') {
console.log('Give Me A Call!');
nextbutton.value = 'Submit';
// Make form submit happen from page #1
var formSubmit = document.getElementById("gform_submit_button_13");
var parentNode = document.querySelectorAll('#gform_page_13_1 .gform_page_footer');
parentNode.replaceChild(formSubmit, nextbutton);
}
else if (this.value == 'Self-Service Virtual Estimate') {
console.log('It\'s Yembo Baby!');
nextbutton.value = 'Start Virtual Survey';
}
else if (this.value == 'Guided In-Home or Virtual Estimate') {
console.log('Get me an appointment!');
nextbutton.value = 'Next';
}
});
}
Thanks!
Can you perhaps use Enable Page Conditional Logic on your page break to handle the radio button options?
So if the following form pages never existed because of the radio options conditional logic, then would this next button not default back to the submit button?
Related
I have the "chips" form link you can see in the attached image here and I want to create a condition such as if someone press "Enter" he can note the item added but what happens here is that form sends the data to backend.
I tried many times to modify the behavior using the "event" but it didn't work you can see the approaches I sticked with:
Approach1:
// input to submit job
const submit_job = document.getElementById("submit-job");
submit_job.onclick = (e) => {
e.preventDefault();
if (e.key !== "") {
console.log(e.currentTarget)
} else if (e.pointerType === "mouse") {
submit_job.onsubmit = () => {
return true
}
}
}
// This approach won't work because I found that "e.key" worked only when typing by Keyboard
Approach 2:
function getEventType(event) {
if (event.type === "keydown") {
event.preventDefault();
}
}
submit_job.addEventListener('keydown', getEventType, true);
submit_job.addEventListener('click', getEventType);
so, any help in that issue, please?
Note:
No need to see the full code because the code is working fine but when I place it into the form this problem occurs so, you can spire me using that variable only "submit_job" in your answer.
Your implementation of the form submission does not seem like a good idea. You should not prevent users from submitting the from when pressing "Enter". Clicking "Enter" should trigger a form submission which is common for most forms. Why not add a unique button beside the input field that when clicked allows the user to enter a note or text? If you take your current approach users will only be able to submit by clicking the submit button which is bad practice. I suggest creating an additional button and adding an event handler to that button so you have a button that adds notes when clicked, so pressing "Enter" will not clash with what you are trying to accomplish.
I have a Paypal Digital Express form which works fine. However, I would like to add a bit of jQuery to the submit button which will fire -before- the Paypal popup window opens and can prevent the Paypal code from firing. Unfortunately, the Paypal window always open first.
jQuery('#buyLink').click( function(e) {
e.preventDefault();
// if no boxes are checked; no songs selected
if ( jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
});
Is there a way to prioritise my code so that it fires -before- the Paypal code?
EDIT: I added e.preventDefault() per the first answer, but what that does is:
a) the popup window still opens but
b) the Paypal site is never reached.
Instead, it displays the calling page in the popup.
So... I want to prevent that Paypal popup window from opening. Perhaps I need to change the 'action' on the form and trigger that action from inside my jQuery? If so, how do I do this?
Look into the preventDefault() function:
jQuery('#buyLink').click( function(event) {
event.preventDefault();
if (jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
else{
// submit form
}
});
I create a multi step form. I add a validation on each step using jquery. If fields are empty then next button is disabled. If fields are not empty next button is enabled.
I used this code for validation
$('form.webform-client-form').bind("change keyup",function(){
var card_name = $('#edit-submitted-first-name1').val();
var card_number = $('#edit-submitted-card-number').val();
var expiration_year = $('#edit-submitted-expiration-year-year').val();
var expiration_month = $('#edit-submitted-expiration-year-month').val();
var cvv = $('#edit-submitted-cvv').val();
if (card_name != "" && card_number != "" && expiration_year != "" && expiration_month !="" && cvv != ""){
$('form.webform-client-form').find('#edit-submit').attr('disabled', false);
$('form.webform-client-form').find('#edit-submit').addClass('active');
}
else {
$('form.webform-client-form').find('#edit-submit').attr('disabled', true);
$('form.webform-client-form').find('#edit-submit').removeClass('active');
}
});
The problem is that when user fill the information in the form he clicks the next button and if he click to prev button and he back to first form all the information are prefilled but next button is not enabled until user enter some value because of keyup function. I want next button is enabled if user back to prev form.
Is there any way to resolve this problem or there is any other approach for this.
Any help would be appreciated.
First move all the logic from the binding in a different function, then call that in the binding, and when pressing the back button call the validation function you used for key-up. That way it will check for the fields and enable the button
You need to decouple your enabling and disabling of the next button from the key up being the only event that calls it. I would move it out to a common function which is called when there is a relevant keyup and a value next button click from the previous step.
we have a submit button with a checkbox and a hyper link in a view in mvc 3. we need validate both the check box and the hyper link on the click of the submit button.
For eaxmple in case the checkbox is not checked and the user hits the submit we need to show the error message "please check the checkbox".
in case if the checkbox is checked and the hyper link is not clicked by the user we need to show the error message "Please click the link".
how to solve this senario using jquery and mvc 3?
You need to have a way to keep track of the clicked action for the hyperlink on the client side. If you wish to keep track of it on the server then that's another thing. So suppose your hyperlink has an id Link1 and the checkbox has an id AcceptMe. You can do something like
<script>
var isLinkClicked = false;
$(function() {
$("Link1").click(function() {
isLinkClicked = true;
});
$("#submitButtonId").click(function(){
if (!isLinkClicked) {
alert("Please click the link"); // or show it somewhere
return;
}
if (!$("#AcceptMe").is(":checked")) {
alert("Please check the checkbox"); // or show it somewhere
return;
}
// else submit your form
});
});
</script>
I am building a form and alerting the user that they can not move to the next step until the input is successful
var location=document.getElementById("zip").value;
if(location==null || location==""){
alert("Please insert a valid location!");
return false;
}
If the user continues to the next step, the submit button is activated. If the user returns to this step, I want to hide the submit button only on this step if the same input is null. How can I do this using only javascript? The class of the submit button is 'btFinish'.
Thanks!
EDIT
I am using jQuery. I have tried
$(btPrevious).click(function(e) {
$(btFinish).hide();
});
$(btNext).click(function(e) {
$(btFinish).show();
});
This hides the Finish button through the progression, but if there is an error in the input box, and the user clicks 'btNext', 'btFinish' will show even if the user must fix their input on the first step.
ok so from my understanding here you have two steps:
1) Zip must be filled in then user clicks to go to next step.
2) User can either submit finished or go back to the zip code step.
I would do something like this:
$(btPrevious).click(function(e) {
$(btFinish).hide();
});
$(btNext).click(function(e) {
$(btFinish).show();
});
$('#zip').keyup(function(){
if ($(this).val() === null || $(this).val() === ""){
$(btFinish).hide();
}
else{
$(btFinish).show();
}
});
this will prevent them from clicking on btFinish unless they have something written in the zip. I'm thinking that since they would hve to press the delete button, it should trigger the event handler. In the event that they can somehow elsewise clear the zip code, you could also check on blur or for whatever other event they can clear the box with.
I would suggest you are trying something like that:
var location = document.formname.inputname.value;
if(location == ""){
alert("No Valid Location")
}