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.
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 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?
I'm trying to create a simple submit form in WYSIWYG Web Designer 10 but I have a BIG problem with Enter key. There are several edit boxes on the form and I'd like to have the following functionality (via JavaScript):
1. Enter key on an Edit Box should not submit the form.
2. Enter key on an Edit Box should set focus to the following element (edit box or a submit button). Submit button is the last element in tabIndex order.
3. To submit the form user must:
either click the submit button,
or press Enter when the submit button has the focus.
4. Must work in any browser.
This is a snippet that works quite good (it sets focus to the next element):
var elem = document.activeElement;
var tidx = +(elem.getAttribute('tabindex')) +1,
elems = document.getElementsByTagName('input');
for (var i=elems.length; i--;)
{
var tidx2 = elems[i].getAttribute('tabindex');
if (tidx2 == tidx) elems[i].focus();
}
The only problem I have is Enter key (keyCode) validation which should precede the code to change focus. I have been testing in FF 32, PaleMoon 25 (FF clone), Chrome 38 & IE 10.
Thank you very much for your time in advance.
P.S. I'm a newbie in JavaScript. I use to work with MS Access where similar problem would be solved within two minutes.
I have spent several hours on this simple task but no luck. I have tried many examples that I've found on the web (incl. stackoverflow.com). As to event handling (where I'm trying to test the keyCode) various browsers behave differently.
I tried and mixed a lot of found in web and created this one.
So far it's working for me... just give it a try
$(document).on('keypress', 'input, select, checkbox, radio, button', function (e) {
return focusNextOnEnter(e, this);
})
and the function somewhere in your JS file.
function focusNextOnEnter(e, selector) {
var longSelector = 'input:visible:enabled:not([readonly="readonly"]), textarea:visible:enabled:not([readonly="readonly"]), select:visible:enabled, button:visible:enabled';
var keyCode = e.keyCode || e.which;
if ($(selector).is(':not(textarea)') // it's not a textarea - enter in text area
&& keyCode === 13 // it's enter key
&& !($(selector).attr('id') === 'submitButton')) // it's not submitButton, save-on-enter here
{
e.preventDefault();
$(longSelector)[$(longSelector).index($(selector)) + 1].focus();
return true;
}
}
instead of the last check
$(selector).attr('id') === 'submitButton'
you can always check
$(selector).is('[type="submit"]')
this will hopefully return what you are looking for i.e. submit on enter on submit button
I have a form with 2 buttons - one is the submit button and the other is a button to apply a discount code. The problem is the Return key always activates the submit button at the bottom of the form.
Is there any way to have the Return key activate the discount code button when the discount code text field is active?
The long and the short is that you'll need to capture either the keyboard event or the submit event of the form. Personally, I think you're better off with keyup.
var discountInput = document.getElementById('discount-input');
var form = document.getElementById('my-form');
function keyupHandler(evt)
{
if(evt.keyCode == 13 && document.activeElement == discountInput)
{
evt.preventDefault();
evt.stopImmediatePropagation();
// either trigger the event handler which adds the discount,
// or call that function here.
}
}
form.addEventListener('keyup',keyupHandler);
Check out this thread:
Trigger a button click with JavaScript on the Enter key in a text box
basically, you attach a key-up listener to the button you want to respond.
Use autofocus attribute
<input type = "submit" autofocus>
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")
}