I'm looking for some JS or jQuery (either plugin or otherwise) to help me with manipulating the class="required" that jQuery's validation plugin uses for form validation in the form fields. I need to be able to toggle that class to equal nothing when a Delete button is clicked.
Here's more context on why I need to be able to toggle that class "required on or off:
1) This is a registration form for more than one attendee for an event
2) there is a control in the form allowing the registrant to "Delete" an attendee (if s/he decides to bring 2 instead of 4 people). This toggles the visibility of that DIV where that attendee's form elements live. I can see what attendee the form elements belong to since my PHP loop created them with first_name_1 (for the first attendee) and then the second attendee would have first_name_2. Then each div_attendee_1 or 2 or 3 has their form fields with this counter appended to the end of each field.
3) When a div is rendered visibility="hidden" I also reset the form elements in that div. BUT I think I need to also access the class="required" to render it class="".
What's the best way to do that? Here's the jQuery I have so far to toggle the visibility and reset the field values:
Validation:
<script>
$(document).ready(function(){
$("#the_form").validate();
});
</script>
And then:
<script language="JavaScript">
function showhidefield(hideablearea){
document.getElementById(hideablearea).style.visibility = "hidden";
var el = document.getElementById(hideablearea);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
$('#' + hideablearea).hide().find("input").val("");
$('#' + hideablearea).attr('disabled', true);
}
</script>
Should I just try and rewrite the elements using inner.html?
Thanks!
Change
$('#' + hideablearea).hide().find("input").val("");
to
$('#' + hideablearea).hide().find("input").val("").removeClass("required");
You can use addClass and removeClass. You can also use .css and set the value to something, or set it to nothing, and that will add and remove a style rather than a class... just looks like you need class level.
Related
I am using Sitecore 7.2 with Web Forms for Marketers 2.4.
Using wffm form designer I created a form that has a droplist in it.
I want to be able to hide or unhide another field in the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form.
I then added and onChange event to the droplist.
<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">
I then added a javascript to the bottom of the page.
function checkField() {
alert("Hello! I am an alert box!!");
var a = document.getElementById("field_xyz");
alert(a.options[a.selectedIndex].value);
var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
if (a == "United States") {
cityTextBox.style.display = "block";
} else {
cityTextBox.style.display = "none";
}
alert("Ending Script");
}
I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.
Is what I'm trying to do even possible in Sitecore?
I read something else that said they had a problem because of encapsulation and protection levels.
I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.
Any help/advice/direction would be appreciated.
I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.
Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
Add the following Javascript to your own sites js file.
The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.
(function ($) {
var HideDependentFied = function (value) {
var condition = (value == "USA");
$(".dependent-field.field-border").toggle(condition);
};
$(document).ready(function() {
var $field = $(".hide-dependent.field-border select");
$field.on("change", function() {
HideDependentFied(this.value)
});
HideDependentFied($field.val());
});
})($scw);
The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.
You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.
I have a payment form,in which when I click on the internet banking ,all the input field be disabled and instead show some images. this is the fiddle upto which i have done http://jsfiddle.net/f8Fd3/4/ No where I cant hide the input text field using their class id.
this is the js
function cc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("visa");
}
function dc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
function ib()
{
}
please check the fiddle to get a clear picture
It is because, by default, when 'button' tag inside a 'form' is clicked, 'form' will be submitted.
It's not redirecting for the other two because there's a HTML5 form validation that prevents the form from being submitted. (that's why you will see an error message when you click Visa/Mastercard)
if you insist on binding events in the dom...you can pass an event object to the handler:
<button onclick="javascript:ib(event)" class="btn btn-1 btn-1c">Internet Banking</button>
and in your function:
function ib(event) {
event.preventDefault();
}
you may wanna do the same to the other two handlers as well.
so the default submit action will be prevented.
and to disable all the text fields:
$('#cards input[type=text]').prop('disabled', true);
to hide them:
$('#cards input[type=text]').hide();
EDIT
by the way. you don't have to use selectors like $('#cards.credit-card'), 'id' should be unique in the DOM, just by using $('#cards') you will get the same element.
The syntax class="class=tokenex_data full gr-input" is incorrect.
Instead use, class="tokenex_data full gr-input"
Then use :
`function ib()
{
$(".tokenex_data").hide();
$(".monthgr-input").hide();
}
`
You want to select all input & select elements and set their property disabled to true:
$('#cards input, #cards select').prop('disabled', true);
Fiddle
I have multiple DIV's on a page,which contain form fields.Some of them are required and some not.When a user jumps from one div to other by entering data.I have to validate the required fields are satisfied and change the CSS of that completed DIV.If required fields are not met,i should not change the css effect.I would like to approach this with Jquery.So,Can someone provide a good and clean design to approach.
Thanks
You can use jQuery validator
plugin for validating your content.
Once your div looses focus you can then check if validation has passed or not, if not then dont apply the css or else apply css.
Sample code:
$("#divid").validate({
onfocusout: false, //once div looses focus validate
rules: {
//your rules go here
}
});
Take a look at the jquery validate plugin
Using jQuery validation you can create your own method to validate a group of controls, I use this approach to wrap elements in a div or fieldset with the class name "validationGroup". Then, when I trigger an event from within the group I navigate up the DOM to the parent element with the class name and validate everything underneath. Using this approach, you can control/limit the validation to the controls in the current div being edited.
function ValidateAndSubmit(evt)
{
var isValid = true;
// Get Validator & Settings
var validator = $("#aspnetForm").validate();
var settings = validator.settings;
// Find the parent control that contains the elements to be validated
var $group = $(evt.currentTarget).parents('.validationGroup');
// Grab all the input elements (minus items listed below)
$group
.find(":input")
.not(":submit, :reset, :image, [disabled]")
.not(settings.ignore)
.each(function (i, item)
{
// Don't validate items without rules
if (!validator.objectLength($(item).rules()))
return true;
if (!$(item).valid())
isValid = false;
});
// If any control is the group fails, prevent default actions (aka: Submit)
if (!isValid) {
evt.preventDefault();
}
return isValid;
}
I'd like to have a field that doesn't show at first, but if the user decided to input to it, then it will appear in the form.
I can use Jquery and do something like
$('input[example]')
.bind('click', function() {
$('#clickfield')
.append('<input id="new_field" name="MODEL[new_field]" size="30" type="text">');
However, I'd like to add this field in several different forms for different models.
Since the model name is in the field, how would I write the Jquery script to be modular so I can use the same script for all my forms?
One solution is to make a function with the names you want as input parameters:
addInput(form, id, modelName) {
$(form).append(
'<input id="'+id+'" name="'+modelName+'['+id+']" size="30" type="text">'
);
}
Where form would be the selector of the field ('#clickfield' in the example case), id would be the id of the new input field, and modelName would be the name of the model you mentioned.
Other solution, assuming 'input[example]' selects some button or clickable area that triggers the event of showing the field; and '#clickfield' is some div or span or some area where you will show your field, is to load these hidden fields from the server, styled as display:none, with a mnemonic class, so you could do something like define a function:
showField(clickable, class) {
$(clickable).click(
function(){
$(class).show();
}
);
}
and then:
$(document).ready(
showField('input[example1]', '.class1');
showField('input[example2]', '.class2');
showField('input[example3]', '.class3');
// .
// .
// .
// One line for every clickable area that triggers
// the event of showing a field, and the class of the
// field to show
);
this way you could add some user friendly features like fading the field in with the fadeIn() Jquery function (instead of show()), or any other animation on appearing.
Hope you could use it! good luck!
I am doing the following to toggle the display of an element:
$("*[id^=" + id + "_]").toggle(); // id is the element to toggle
This then toggles everything of the form id_* where * is any string.
I now realized, that I don't want to simply toggle each element, but show or hide it based on the state of the clicked element. How can I conditionally show() or hide() all those elements of the form 'id_*' depending on some other boolean? My problem is that the selector automatically selects multple id's, so how I can I trigger a show() or hide() selectively on each id that is selected?
You can pass a bool to .toggle() to tell it whether to show and hide, so just look through, like this:
$("*[id^=" + id + "_]").each(function() {
var someBool = condition; //figure out each one here, depending on...whatever
$(this).toggle(someBool);
});