I am new to Javascript and trying to add a and Query to a js file.
I have added a checkbox this is required to be checked for the submit button to show.
In the original there was already one checkbox with the js query but I have added a second. How do I make the js only allow the button to be clicked when both are checked?
The current code for the js is
jQuery('.check_policy').on('click', function(){
if(jQuery('#policycheck') .is(':checked')){
jQuery("#listingsubmitBTN").prop('disabled',false);
jQuery("#listingsubmitBTN").removeClass('dissablebutton');
}
else{
jQuery("#listingsubmitBTN").prop('disabled',true);
jQuery("#listingsubmitBTN").addClass('dissablebutton');
}
});
The second check box I have added is called policycheck_2
Thanks in advance for any help. I think this could be one of many js questions
Mark
jQuery('.check_policy').on('click', function(){
if(jQuery('#policycheck').is(':checked') && jQuery('#policycheck_2').is(':checked')){
jQuery("#listingsubmitBTN").prop('disabled',false).removeClass('dissablebutton');
}
else{
jQuery("#listingsubmitBTN").prop('disabled',true).addClass('dissablebutton');
}
});
Edit: Just add an AND (&&) operator with the same syntax with the new ID as the first one in the if statement.
I'll also shortened the rest a little bit, looks nicer. :-)
Separate the responsibilities.
Bind the click event to the checkboxes. The handler only has to trigger the event on the specific button.
Bind a custom event to your button which validates the checked boxes.
Use this condition to disable or enable:
$('.check_policy').length !== $('.check_policy:checked').length
$('.check_policy').on('click', function() {
// Here we trigger the custom event.
$('#listingsubmitBTN').trigger('validatechecked');
// Now this handler only trigger events to specific elements and not
// everything mixed here.
});
$('#listingsubmitBTN').on('validatechecked', function() {
$(this).prop('disabled', $('.check_policy').length !== $('.check_policy:checked').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='check_policy' type='checkbox'>Check policy#1
<p>
<input class='check_policy' type='checkbox'>Check policy#2
<p>
<input type='button' id='listingsubmitBTN' value="Click me!" disabled>
Your main issue is that your if statement is not checking if both checkboxes are checked - it still only checks to see if #policycheck is checked to determine the disabled status of the button. A simple fix would be to add the jQuery("#policycheck_2").is(":checked") to your if statement, and your code will work - however, you can leverage using an expression in the prop setter function, as well as the toggleClass function to simplify/shorten/clean-up your code a bit.
Here's an example of what that would look like:
jQuery('.check_policy').on('click', function() {
var bothChecked = jQuery("#policycheck").is(":checked") && jQuery("#policycheck_2").is(":checked");
jQuery("#listingsubmitBTN").prop("disabled", !bothChecked).toggleClass("dissablebutton", !bothChecked);
console.log("button", bothChecked ? "enabled" : "disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="policycheck" />
<input type="checkbox" id="policycheck_2" />
<button class="check_policy">Check Policy</button>
Related
I am new to coding and I need to use Javascript in my code. I have a checkbox within an HTML table (below).
<td><input type="checkbox" id="check1"/>
<label th:text="${item.contents}"> </label>
</td>
I am trying to use Javascript to alert me when I have checked the box with the code below.
<script>
$('#check1').click(function() {
if($(this).not(':checked'))
alert('unchecked');
else
alert('checked');
});
</script>
Why isn't it working? I don't get an error, but nothing happens either.
Thank you.
Ok, first, you have some syntax that is not HTML here:
<label **th:text="${item.contents}"**>
And, if that non-HTML code is incorrect, that could be enough for the page to stop processing. You say you don't get an error, but do you mean that you've checked your developer tools console window and don't see an error there?
As for the checkbox, neither the table cell, nor the label are related to your goal.
Next, JQuery is a great thing, but it sometimes makes things that are already easy, harder. Your code is actually EXCLUDING any checked elements from the wrapped set that will be examined because you are using not().
Here is a solution that doesn't rely on JQuery:
var chk = document.getElementById("check1");
chk.addEventListener("click", function(){
// The following is not part of your question, but is
// added just for completeness:
// Because the alert() is modal, it will block the UI
// from updating and it will most likely appear before
// the UI updates the checkbox to the latest appearance.
// To solve this, we add a short delay before making the
// alert using a timer and we need to store the checked
// status of the checkbox outside of the timer's callback
// function.
var on = this.checked;
setTimeout(function(){
var message = "checked";
if(!on){
message = "un" + message;
}
alert(message);
}, 50);
});
<input type="checkbox" id="check1">
I don't think it's normally very wise to listen to click events on things like checkboxes and radio buttons. From what I understand they may be triggered before the value of the input is updated, depending on where you catch the event in the dom.
I'm not sure what the html syntax is on your label, the th:text part, but it seems to be some sort of templating syntax and also may be unrelated. To help simplify the problem also I will give you an example without using jQuery, jQuery often adds unnecessary complexity to simple problems.
A properly working example of your code using vanilla javascript (without jquery) would be,
document.getElementById("check1").addEventListener('change', function(e) {
var checked = this.checked;
if(checked) { alert("Checked"); }
else { alert("Unchecked"); }
});
And with jquery, a working example is:
$("#check1").on("change", function(e) {
var checked = this.checked;
if(checked) { alert("Checked"); }
else { alert("Unchecked"); }
});
I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.
I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:
<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('It worked');
}
}
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>
I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/
If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.
But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.
I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.
I've tried the simple stuff, like calling
searchBox.onchange();
searchBox.focus();
searchBox.click();
And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.
Any help would be appreciated.
Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.
My implementation of Dorian's answer
https://jsfiddle.net/josephfedor42/zaakd3dj/
My implementation of Alsciende's answer
https://jsfiddle.net/josephfedor42/xhs6L6u2/
emphasize mine
According to the mdn page about the change event,
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
and to whatwg specs :
When the input and change events apply (which is the case for all
input controls other than buttons and those with the type attribute in
the Hidden state), the events are fired to indicate that the user has
interacted with the control.
Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.
So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.
Something like this should work:
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
//fire the event
if (document.createEvent) {
searchBox.dispatchEvent('change');
} else {
searchBox.fireEvent("onchange");
}
}
Here is the code I needed to add to my function addTextCallListener:
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);
I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/
Replace onchange with change in this part:
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
The problem I am having is that the radio buttons in my scenario are not being selected when they are clicked. I have created a JSFiddle to show the code and the issue.
For whatever reason, I have an entire area that is surrounded in an element.
<a href="/link">
//some stuff
<div class="protected">
<input type="radio" name="b1" value="1" /> Button 1
<input type="radio" name="b1" value="2" /> Button 2
</div>
//some stuff
</a>
There is a small section within this tag that needs to be protected from the default behaviour of the link. This section contains some radio inputs which need to be selectable.
The way I currently have it, I am protecting the "protected" section with an event listener and:
$('.protected').off('click').on('click', function (e) {
e.preventDefault();
});
I also have an event listener on the radio buttons so that I can perform the change of property when they are clicked.
$('.protected > :radio').off('click').on('click', function (e) {
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
});
Unfortunately, this is setting the checked attribute in the dom however the radio button is not being filled in on the screen for the user.
Any help would be greatly appreciated.
You need to add stopPropagation()
$('.protected > :radio').off('click').on('click', function (e) {
e.stopPropagation();
//$(this).siblings(':radio').removeAttr('checked');
//$(this).attr('checked', 'checked');
});
Also, make sure to comment out
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
You don't need them as the browser handles this for you.
DEMO
What was happening is, since you had preventDefault in the container click handler, the nested click event was propagating to that click handler and was preventing the radio button from being set.
I have page with around 20 to 30 controls based on the query string values. I need to change a button as disabled based on the value changes in the controls. For examble in the list of Check boxes if something is checked or unchecked, some texts added or removed etc... for all the controls.
The controls are textbox, option buttons, check boxes, select controls and list boxes.
I don't want to add static methods to all controls. I do have an idea of doing the late binding to all the controls and to attach events. And that events will disable the button whenever the event gets fired.
Is there any other way to do this functionality in a simple way(Like Keypress or using event property window object)?
As #ekhaled pointed out you can use the same handler to handle all the click and change events.
Here's a somewhat convoluted example:
<div id="container">
<input id="input1" type="text" value="" />
<select>
<option value="1">ABC</option>
<option value="2">EFG</option>
</select>
<input type="button" value="Submit" />
</div>
and the javascript for it:
$('#container').on("change click", ":input", function (event) {
if (event.target.nodeName == "SELECT") {
if ($(event.target).val() == "2") {
console.log("disable");
$(":button").prop("disabled", true);
} else {
$(":button").prop("disabled", false);
console.log("enable");
}
}
if (event.target.id == "input1" && $(event.target).val() == "") {
$(":button").prop("disabled", true);
}
});
See it working here.
However if you main concern is validation you should have a look at jquery validation
With jQuery validation you can set specific rules for each of the inputs that will make up the validation of the whole form. It is very customizable, you can change where and how the errors are displayed, when is the validation triggered, etc.
You can use event delegation and bind your event to the parent element, and then write all your logic inside that one event handler.
Can't really show you much, because you haven't included any examples or code. But something along the lines of:
$("body").on('change click', 'input, select', function(){
var _this = $(this);
if(_this.is('input[type=checkbox].className')){
//follow one logic
}
if(_this.is('input[type=radio].className')){
//follow another logic
}
//etc, etc
})
I'm using checkboxes to toggle the enabled and disabled state of some multi-lists on a registration form. The checkbox is labeled with the category, and the multi-list contains the items that belong to that category.
I'm using jQuery 1.7.2.
$('#sch_cat_hockeyschools').toggle(function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools").prop("disabled", false);
$("#type_select_hockeyschools").removeProp("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", true);
$("#sch_cat_hockeyschools").prop("checked", "checked");
}, function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools option:selected").removeAttr("selected");
$("#type_select_hockeyschools").prop("disabled", true);
$("#type_select_hockeyschools").prop("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", false);
$("#sch_cat_hockeyschools").removeProp("checked");
});
Sample of corresponding checkbox HTML:
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey
The problem is that the upon clicking the checkbox, the checkbox does not become ticked or checked; it immediately returns to an unchecked state, which I thought the stopPropagation() function would help with. Apparently not. The multi-lists get enabled and disabled as expected, but the checkbox doesn't get ticked.
The result of this problem is that when the form is submitted, the array containing the selected categories is empty; thus, because at least one checked category is a required field in the form, the PHP script that processes the form throws one of my errors which tells me a required field was left blank.
Any ideas on how to make sure that the checkbox actually gets checked, and by extension, POSTS actual data to the processing script?
Thanks guys.
The problem is the use of toggle -- per the documentation:
The implementation also calls .preventDefault() on the event, so links
will not be followed and buttons will not be clicked if .toggle() has
been called on the element.
toggle itself is calling preventDefault, which is stopping the default behavior of the event, checking/unchecking the box.
Rather than toggle, use bind or on (see edit note below) to add a listener for the change event, in which you can examine the state:
$('#sch_cat_hockeyschools').on('change', function () {
if (this.checked) {
// do stuff for a checked box
console.log('check is on');
} else {
// do stuff for an unchecked box
console.log('check is off');
}
});
Try it out at jsFiddle.
EDIT
Please note, this code shows use of the on method, whereas the jsFiddle example uses bind. As pointed out by Sam Sehnert, on is the preferred method for attaching events with > jQuery 1.7. If you are using an older version of jQuery, use bind as in the jsFiddle example.
Documentation
jQuery.toggle
jQuery.bind
jQuery.on