I am currently working with a JQuery function that determines if there are any checkboxes checked in my form. I'm using JQuery v1.10.2
This code works fine whenever I execute it with a button, but when I try to use a checkbox within the form to execute it, it does nothing. I've tested with a JFiddle, and that worked, but in my form, the alert does not fire. I've checked for redundant names, and my form id is unique. Could it be the div/table structures within the form causing some sort of conflict? The form is wrapped inside of a hidden div. Thanks for any help.
Below is the code:
<script>
$(document).ready(function(){
//$(".ksa_button_check").click(function(){
$(".ksa_check_k, .ksa_check_s").click(function(){
if ($("#ksaChecks input:checkbox:checked").length > 0) {
alert('is checked');
}
});
});
</script>
You could use something like this.
var checkboxes = $("input[type='checkbox']");
checkboxes.click(function() {
alert("Checkbox Is Checked");
});
http://jsfiddle.net/bowenac/aTDj6/1/
Not sure which language you are using. If you are using PHP you could check if $_POST has a value etc. If a checkbox is checked it would have $_POST data if not it would not.
Something like this.
if(isset($_POST['submit'])) {
$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {
Do something
);
};
};
Other than that I am wondering if your checkboxes are losing its state on your form submit. So yea as others said would help to see the code.
Related
I would like to disable the Submit button on a search form that only contains select dropdowns. There are several similar questions here but I most of them deal with fields. The closest thing to my case is Disable submit button if all three of three specific dropdown fields are empty. I modified the solution supplied in JSFiddle to feature an empty option, and did get it working -- but only in JSFiddle, not on my page.
I use the same code from the proposed answer (only changed IDs):
$('#submit').attr('disabled','disabled');
$('select').change(function(){
if ( $(this).hasClass('require_one') ){
$('#submit').removeAttr('disabled');
}
});
$('#submit').click(function() {
$('#searchform').submit();
});
I add the above code right after I include the jquery.js (v. 1.9.1).
I generate the form dynamically, but in JSFiddle I use exactly what is seen in the page source: http://jsfiddle.net/cheeseus/d5xz6aw8/8/
I have no idea why I can't get it to work on the actual page, hope those more knowledgeable can help sort it out.
And, if possible, I would also like the Submit button to be disabled again if all three selects are set to blank values again.
I usually don't like using the ID(3) for CSS selector since you can have only one ID selector with that name on the document and there might be another element already with the same ID. How about using the class hierarchy instead to pinpoint the button element?
In any case you need to re-check the count everytime what you select on what is empty:
var $submitButton=$('.selector .btn');
var $selectors=$('.selector select.require_one');
$submitButton.attr('disabled','disabled');
$('.selector select.require_one').change(function(){
var $empty=$selectors.filter(function() { return this.value == ""; });
if ( $selectors.filter(function() { return this.value == ""; }).length == $selectors.length ){
$submitButton.attr('disabled','disabled');
} else
{
$submitButton.removeAttr('disabled');
}
});
$submitButton.click(function() {
$('#searchform').submit();
});
JSFiddle code here
You can just use a simple count to see if you should display the button or not. Here is jQuery code.
var count = 0;
$('.require_one').change(function() {
count++;
if (count >= 3) {
$('#submit').removeAttr('disabled');
}
});
$('#submit').attr('disabled','disabled');
I think this is because you didn't check is your document ready.
I added few improvements:
caching jquery object in variables, makes your code a bit faster (you don't look for it everytime select is beeing changes).
used recommended way of binding events - 'on' function
'disabled' is property not an attribute, jQuery has dedicated method to use
on select change - check all selects if there is any not selected, it there is - set prop disabled to true, otherwise set false.
instead of disabling submit at initialization, trigger same action you do when selected is beeing changed (if you start with option selected in all select initial state won't be disabled).
$(document).ready(function () {
var $submit = $('#submit');
var $selects = $('select.require_one');
$submit.on("click", function() {
$('#searchform').submit();
});
$selects
.on("change", function(){
var $not_selected = $selects.filter(function() {
return !$(this).val();
});
$submit.prop('disabled', $not_selected.length ? true : false);
})
.first()
.triggerHandler('change');
});
. .On click button the checkbox gets disabled, but i have also added a function for getting checked or unchecked when clicked on row. .but the problem is after clicking the button the checkbox gets disabled but when i click the row . . .it gets unchecked. I have added the code in JSfiddle. .its not functioning at all.I dono much in .js.So please help me
this is the code
function selectRow(row){
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
if(firstInput.disabled==false && firstInput.checked==true){firstInput.checked =true;}
else if(firstInput.disabled==true){firstInput.checked=true;}}
html code is
in js fiidle
jsfiddle
It can be as simple as
function selectRow(row) {
var chk = row.getElementsByTagName('input')[0];
if (!chk.disabled) {
chk.checked = !chk.checked;
}
}
Demo: Fiddle, jQuery
Note: even though you have used jQuery tag there is no jQuery used in the script
I have a form on which there are 20 radio buttons. I need to store the state of the radio buttons if there are errors on the page(whereby page would refresh). I managed to get it working 50%. However, if i select different radio buttons on the second refresh, it would still retain the sate of the first submit.
Here is my code:
var x= $("input[id^='question-']");
$(x).click(function(){
localStorage['radios'] = this.checked;
});
$(x).prop('checked', localStorage['radios'] == 'true');
Any help would much be appreciated!
I think the unique form of getting the values after refreshing the page is send the information with POST or GET, after sending the form. It's recomendable using PHP script to process the form, and make validations.
If you have any doubt, you can see here how to catch information of the forms
Your code looks like its just overwriting the same value again and again regardless of what input it's for, and also should use the change event rather than click. Try something like (untested):
var $x = $("input[id^='question-']");
// Set localstorage on change event per radio button
$x.on('change', function(){
localStorage[$(this).attr('name')] = this.checked;
});
// Check all radio buttons on page load against localStorage
$x.each(function(){
$(this).prop('checked', localStorage[$(this).attr('name')] == 'true');
}
We have a form where a user can move items from one multi-select box to another. We are using MVC 4.5 and jquery validate with Microsoft's unobtrusive javascript.
The problem is, when submitting the form, the values within the select boxes don't get submitted because the user doesn't know after moving items that they have to also select all those items for submission.
So the solution sounds easy: use jquery to select all items upon submit.
After doing some research (thanks stackoverflow community), we were able to discover the necessary jquery code to intercept the submit process. However, the problem arises in that when the code selects the items, only pre-existing items in a select box are selected. Live (dynamic) items that have been moved do not get selected.
Here is the code that we first used:
$('#UserProfileForm').bind('invalid-form.validate',function(){
$(this).find('.selectbox option').each(function (i) {
$(this).attr("selected", "selected");
});
});
We discovered that using bind doesn't work but live should:
$('#UserProfileForm').live('invalid-form.validate',function(){
$(this).find('.selectbox option').each(function (i) {
$(this).attr("selected", "selected");
});
});
However, we are using jquery 1.9 and the live function has been removed. It has been replaced with this:
$(document).on('invalid-form.validate', 'form', function () {
$(this).find('.selectbox option').each(function (i) {
$(this).attr("selected", "selected");
});
});
However, this still doesn't work. So I replaced the selection function with an alert to see if it works at all:
$(document).on('invalid-form.validate', 'form', function () {
alert('test');
});
An alert does not pop up. Any ideas?
ADDITIONAL INFO
For those wondering why I'm referencing invalid-form.validate is because I am testing with invalid form data. The same scenario would apply if it was valid form data. I just haven't gotten to the point on how to bind live data to the valid form submission process either.
After inspecting the elements, I noticed that the jquery was adding the selected attribute to the options. However, the options weren't highlighted. This had me thinking that maybe the jquery call to add the selected attribute was wrong.
After some experimentation, I discovered that it was wrong. It appears that if you use the attr function of jquery, it doesn't actually set the option to selected in the DOM. Using the prop function does.
Here is the code:
$(document).on('submit', 'form', function (e) {
$(this).find('.selectbox option').each(function (i) {
$(this).prop("selected", true);
});
});
This allows the form to select all options as selected upon form submission whether the submit handler is valid or not. If you just want to select based on invalid info, use this:
$('form').bind('invalid-form.validate', function () {
$(this).find('.selectbox option').each(function (i) {
$(this).prop("selected", true);
});
});
Enjoy!
I'm new to JQuery in general and I want to have a function activate when ANY checkbox on the page is checked or not. Then it should check what state the checkbox is "checked" or not.
I'm not sure how to do this as all the examples I'd seen require the name of the checkbox in order to work. I'd be fine if this was in Javascript aswell.
Anyone have any ideas?
$('input[type="checkbox"]') would select all checkboxes on your page.
The following would run a function when any of your checkboxes are changed, and when checked:
$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')) {//do something}
})
Bind dynamically your checkboxes to change event, and check if they are checked, then do a function of your choice.
$(document).on("change", ".chkelement", function(){
if( $(this).is(":checked") )
{
//DO SOMETHING
}
});
I recommend use a container other than "document", as close as possible to where checkboxes will be, but you get the idea right?