I want to have a form in my checkout page that has an input for billing address and I have also a list of billing address. If the user has added any billing address from their account, it will listed on the checkout. Now if the user is on the checkout page then he/she will have two options, select a billing address from the list or add a new billing address. The "add" form has had spry validation added to it.
My problem was that if the user selects a billing address from the list the spry validation still occurs on the billing address form and the user can't submit the form. What I'd like to have happen is if the user clicks on the link "add the new billing", then the spry validations object will be created and the form is displayed and when the user clicks on the cancel button then the object is destroyed.
I have created an object when the user clicks on the link for the add form. Both the object & validation works perfectly.
UserAddressBookFullNameValid = new Spry.Widget.ValidationTextField("UserAddressBookFullNameValid", "none", {validateOn:["blur"]});
How to I destroy the object or remove the validation when the user clicks on the cancel button. I have tried some ways but it won't work. Examples:
delete UserAddressBookFullNameValid;
UserAddressBookFullNameValid = null;
So can anyone help me to do this or give me some another way?
Thanks
To have this work, make sure UserAddressBookFullNameValid defined in your javascript.
var UserAddressBookFullNameValid;
Create the spry validation for the field as you do now. In the code for the cancel button put:
if (UserAddressBookFullNameValid != undefined) {
UserAddressBookFullNameValid.reset(); //Resets any validation css on the form
//(may not be necessary if hiding the inputs
UserAddressBookFullNameValid.destroy();
UserAddressBookFullNameValid= null;
}
I had a similar problem except I needed my field validated only if a checkbox was checked & it now works for me using this code.
Related
I'm trying to create a visual questionare that works in a way that if a user clicks on a button, that button's data attribute is taken and filled in into the iframe's fields. However, if you try to manually add in any additional info or interact in any way with the iframe, it removes all the auto-filled info.
Also if you try to submit the info it says that the input fields are empty.
Kind of stuck here.
<html>
United States of America
</html>
<script>
function autofill(element)
{
$("#form-iframe").contents().find("#country-field").val(element.dataset.filledValue);
evt.preventDefault();
}
</script>
I'm having a ton of trouble with this form I created on a WordPress site. It uses Gravity Forms, and submissions are handled through AJAX.
The form exists on a modal (using custombox jQuery plugin) which is triggered when you click the "Contact" menu item.
Basically, jQuery events don't work on the form. If you hit submit without filling in the proper fields, the form fails to trigger a validation error message. If the form IS filled out correctly, the entry is saved but no confirmation message is sent.
I've tried handling the validation myself (pasting code below), but I can't get the values of the inputs unless you refresh or hit submit a 2nd time. Upon initial submit, it only returns the initial values, not the new ones.
I have the script loading in the head, and inside a document ready function. I'm completely out of ideas and would really appreciate any help!
$('body').on('submit', '.custombox-content form#gform_1', function(){
console.log('submit');
var inquiry_type = $('.inquiry select').attr('value');
console.log(inquiry_type);
//validateForm();
});
Here, I'm trying to get the value of a select input. When the form is submitted, 'submit' is logged along with the initial select field value. It doesn't log the real selected value until I hit submit a 2nd time.
I want to have alternate required inputs. My goal to my form is to hide and show the inputs regarding with what position (Faculty Member or Student as options) and store to the database. Different input fields for the Student, as well as different fields too for the Faculty Member. I used this code for my javascript hide & show inputs:
<script type="text/javascript">
$(document).ready(function(){
$('#fac').hide();
$('#stud').hide();
$("#thechoices").change(function(){
$("#all").children().show();
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
});
</script>
However, when I choose Student (so Student input fields appear now and Faculty Member input fields are hidden),fill up the fields, and click Submit button, I can't proceed to the form action I put because the hidden fields for faculty member are also required to be filled. And if I eliminate the required attribute on each input, my database could be destroyed (such as multiple inputs, blank inputs). I got almost the same question but I still did not understand the given answer. What should I do?
I suppose you have used JQuery.
Try this approach.
You can intercept the form submission with this event handler.
Add this to your existing script.
$("form").submit(function( event ) {
// check if field is visible
if ( $("field").is(":visible") ) {
// validate it
}
}
For more info, Check JQuery Documentation at below links
Form Submit http://api.jquery.com/submit/
Visible selector : http://api.jquery.com/visible-selector/
HTH
Actually am new to YII, I have a page with Form and JQGrid. whenever the user clicks ADD button, Forms values should be added a row in JQGrid. This functionality I did. But I want to validate the form data while clicking ADD button in JQuery.
Kindly help me to validate form values in client side either javascript or JQuery.
In your form view where your are initializing the form
....
'enableClientValidation' => true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
)
));
Refer to this documentation for more details http://www.yiiframework.com/doc/api/1.1/CActiveForm#enableClientValidation-detail
I have included HTML5 Validations into form and made the ADD button as submit, In JQuery i did the following changes,
$('#btnAdd').submit(function(event){
event.preventDefault();
// Logic to add the form values into grid row.
});
So It works as i expected.
I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.
I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
JS
// if someone clicks on one radio button
$('.formSwitcher').change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();
Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.