I want to have some form fields mutually exclusive.It is a payment form with a lot of different categories.
Researching I got the code below
$('document').ready( function() {
$("#zero-out :input").each( function() {
$(this).keydown( function() {
$("#zero-out :input").not(this).val("");
});
});
});
This code assumes I could just wrap a div with Id zero-out on the fields I want to be exclusive - that is for those grouped fields only one can have a value. But I have about 4 different field groups. For example one group has textfield and textfield3. Another group has textfield2, textfield4 andtextfield7. Another group has textfield5,textfield6 and textfield8. These fields are not arranged in order(they are arranged in two columns and arranged in some order of convenience) so it is not easy to just wrap a div around a group.
Each textfield already has an onkeyup="javascript:PaySum() function to add up input values.
I need help to get an elegant way to achieve this goal.
I would give each grouping of mutually exclusive inputs some attribute (data-grouping=1, data-grouping=2, etc for example) and then update the code you have above to something like:
$('document').ready( function() {
$("input").each( function() {
$(this).keydown( function() {
$("input").not("[data-grouping='" + this.data("grouping") + "']").val("");
});
});
});
Depending on your page size and usage, blur might be a better event than keydown, and you may be able to further restrict inputs to only those within a particular parent.
Related
I currently have a form that is displaying fields that I do not want it to. There are 3 input fields associated with one form and the same form is being rendered multiple times.
I have my template set up to check for when this was only one value. I need to change it so the template will check for all of the values present & then decide to render.
So for example,
I have,
Div_id_form-0-x,
Div_id_form-0-y,
Div_id_form-0-z,
Div_id_form-0-location__location_category__requires_coordinates
What selector can I use to grab all of these to use in my template?
I need to grab them for each form. Where it says form-0 I have several of these forms repeating.
Then in HTML I have something like this.
$(function () {
// Determine weather we are in a modal window.
var context = $("#{{ contextId }}-form");
console.log("this is the {{ contextId }}" )
// Show required coordinates if location category requires them.
context.find("#id_location__location_category__requires_coordinates").change(function () {
if (context.find("#id_location__location_category__requires_coordinates").val() == 'Y') {
context.find('#id_needs_coordinates').removeClass('hide');
} else {
context.find('#id_needs_coordinates').addClass('hide');
}
});
});
Right now this is only checking for one value to determine whether to hide. I need it to check all of these for this value. Which is why I'm looking for a Jquery selector that can do such.
If you want a selector for IDs, you can use:
$("#Div_id_form-0-x, #Div_id_form-0-y, #Div_id_form-0-z, #Div_id_form-0-location__location_category__requires_coordinates")
Please see: https://api.jquery.com/id-selector/
Update
In the future, please clarify the entire issue and provide a proper example.
You can use the Attribute selectors.
$("[id^='Div_id_form-']")
This will select all IDs like:
Div_id_form-0-x
Div_id_form-1-x
Div_id_form-2-x
You will then select all of those elements.
See More: https://api.jquery.com/category/selectors/attribute-selectors/
I am building a search form that filters the results based on the a text input as well as select options from four separate drop-downs (category, sub-category, location, etc).
The following two functions work well, but I just realized that if I type a search term in the input, make my drop-down selections and then go back and type a different search term, my drop-downs are ignored.
I've found solutions for similar problems across this site, but nothing that pertains to my particular situation.
This is the filter for the drop-downs:
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").hide();
$("div#flatdiv").find("article." + filters).show();
});
and Here is the one the filters based on the search input:
$(document).ready(function(){
$("#title").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#flatdiv article").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
One is using true .filter() and the other is using .find to show() and hide().
I'm not sure where to go from here. I've made various attempts but each results in neither working so I'm hoping someone can help me out.
UPDATE:
Here is the final that ended up working beautifully!
//apply selection form any drop down forms
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").addClass("hidden-by-category-filter");
$("div#flatdiv").find("article." + filters).removeClass("hidden-by-category-filter");
});
//apply text input from search form
$("#title").blur(function(){
var textFilters = $(this).val().toLowerCase();
$("article:contains(" + textFilters +")").removeClass("hidden-by-text-filter");
$("article:not(:contains(" + textFilters +"))").addClass("hidden-by-text-filter");
});
In such cases, instead of using .hide() and .show(), it is often better to just add CSS classes to elements to hide them.
I would create classes such as .hidden-by-text-filter and .hidden-by-category-filter, each would individually hide the elements:
.hidden-by-text-filter, .hidden-by-category-filter {
display: none;
}
Then in the event handler just add or remove a specific class. For example, the event handler on text input would add/remove the class .hidden-by-text-filter, while the category drop-down would add/remove the class .hidden-by-category-filter.
$("select.filterby").change(function() {
var filters = $.map($("select.filterby").toArray(), function(e) {
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").addClass(".hidden-by-text-filter");
$("div#flatdiv").find("article." + filters).removeClass(".hidden-by-text-filter");
});
This way both those filters wouldn't interfere with each other. If an element is meant to be hidden through both criteria, it would have both those classes, and still remain hidden. If one such element is made visible by one of the filters, it would still have the other class, and will remain hidden.
So let us say i have a form with id #form which has two input fields, namely title & price.
I click on the Edit button somewhere in the application which has data attributes (e.g data-title="Apple" data-price="10")that are to be assigned to the #form upon clicking the button.
the obvious solution that works is
$("#name").val($(this).data('name'));
$("#price").val($(this).data('price'));
This obviously looks bad when you have too many fields. So I am trying to get something like this to work $('#form').data($(this).data());, more or less in a single like
Have tried this many ways with no success
Any help is appreciated
You could create a jquery plugin that you can call from the element that contains the data points and have it apply the data based on the key to elements within the form of that same name. Example below
$.fn.applyData = function(form) {
$form = $(form);
$.each($(this).data(), function(i, key) {
$form.find('#' + i).val(key);
});
};
JSFiddle: http://jsfiddle.net/LCM8S/43/
I have the following Table.
What I am trying to do is to disable the "Every ..." columns of checkboxes by default and then enabling them only when the "Weekly" checkbox is selected. As well as that, I want the "Less often", "Monthly" and "Weekly" to be mutually exclusive and "Never" exclusive to the rest.
Fiddle: HTML code
So far I have the following ideas:
make a group of all the "Every ..." disable them.
if checkbox weekly is clicked, given its id, enable the "every" group
give all the less often, monthly and weekly the same name, and make
them mutually exclusive
As far as the coding goes, I have the following scripts:
Enabling set of checkboxes ("Every...") when a specific checkbox is clicked ("Weekly")
This one is for the case of Weekly, enabling the every other day of the week. The question that I'm having is how to apply it to all the rows of the table, not just to one.
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
If all of the "Every" are in a group, and the group id is the first checkbox of Weekly, that would enable all of the checkboxes on the other rows as well. What is there to do about this or what other method should I approach?
Mutually Exclusive
I want three of the checkboxes to be mutually exclusive with eachother. I thought of naming them the same and then just apply the script below. Nevertheless, I want this to apply to all of the rows of the table.
$("input[name=myCheckbox]").click(function() {
var $this = $(this),
wasChecked = $this.attr("checked") === "checked";
$("input[name=myCheckbox]:checked").removeAttr("checked");
if (wasChecked) {
$this.attr("checked", "checked");
}
});
I am a beginner with jQuery so any insight is welcomed.
I should add an id each checkbox. Something like this:
check1_1 check1_2...
check2_1 check2_2...
So you can run in a bucle to check or uncheck each one depending on what you receives in some of them.
$("#check"+i+"_"+X).... //i = row and X = column
Make a for to create all of check functions when page shows and inside call to a unique function with 2 arguments, row and column clicked to make any comparisson.
Situation: multiple forms on page, multiple sets of checkboxes in each form. Checkboxes look like:
<input type="checkbox" class="styled" id="$opt" name="$ID.$opt[]" value="$opt" >
I cant change or add to the class or id because of unrelated but interfering factors. I found some other pieces to this puzzle, but wasnt sure how to use them, esp given that I want to validate multiple groups of checkboxes per form.
I tried this
jQuery.validator.addMethod('validate-checkbox-oneormore', function (value) {
return jQuery('.require-one:checked').size() != 0; }, 'need a value');
I put it under the actual plugin script, just after it in the file. I'm going to use this functionality most of the time i am validating, so it might as well be part of the plugin.
How can I run this validation using data attributes?
Do you mean this:
return jQuery('[data-foo=bar]:checked').size() != 0;
See FIDDLE
UPDATE:
You also need a rule that says that the "checkone" method should be run on some form field:
$(function() {
$("#form1").validate();
$("#form1 input[data-foo=bar]").rules("add", {
checkone: true
});
});
See my update of your fiddle