Checkbox onclick not firing - html

I'm at my wit's end with this.
Can anyone see anything wrong with this line? The function won't fire by clicking on the checkbox for some reason, but the calling function works fine (if I copy the exact "onclick" attribute over to the label for the checkbox, it works fine).
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="checkSwap(document.page_form.match_35_0d, document.page_form.match_35_0)"></input>
If anyone can see why on earth this wouldn't be working, I would really appreciate it.
Thanks!
EDIT: Since a couple people asked, here's the checkSwap function (all it does is throw an alert so I can see that my onclicks are working before I add any code):
function checkSwap(radioid, groupid) {
alert("radio: " + radioid + " group: " + groupid);}
And here's the whole sample of the table cell that the checkbox in question is in (apologies for the formatting, the code sample doesn't seem to want to accept my newlines):
<td><label onclick="checkSwap(document.page_form.match_34_0d,document.page_form.match_34_0)" for="match_34_0">N</label><input type="checkbox" name="match_34_0" id="match_34_0d" value="d1" onclick="checkSwap(document.page_form.match_34_0d, document.page_form.match_34_0)"></input></td>
EDIT: Alright, canceling out a separate function that was limiting the checkboxgroup to 1 checked box was the issue.
The code that does the limiting was setting an onclick attribute for each checkbox, and that is apparently overriding the tag-set attribute. I'll have to figure out how to hack around it.

This syntax
document.page_form.match_35_0d
actually searches in the form with name of page_form for an input element with name of match_35_0d. But you have actually set it as an id of the checkbox where the onclick is definied.
You could solve your problem with the following call in the onclick:
checkSwap(this, document.page_form.match_35_0)
By the way, a checkbox is not the same as a radiobutton and you're actually not passing the ID's to the function, but instead the whole elements. Rewrite your function as
function checkSwap(checkbox, group) {
var checkboxId = checkbox.id;
for (var i = 0; i < group.length; i++) {
var element = group[i];
var elementId = element.id;
// ...
}
// ...
}
To obtain an element by ID, just use Document#getElementById().
var element = document.getElementById('someId');

If JQuery's ready method is already defined then Chek box onclick event do not work. You can fire the event if you add a Jquery click event inside ready. Not sure if this is IE issue ..?

Incase you already have Jquery's ready function then Onclick attribute of the ckeckbox will not fire. You have to add the click event in Jquery. Only then it works
Like below. I don't know the reason.
$('#cbFinalAttest').click(function (event) {
...
}

this function does fire - checked in firebug
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="alert('55')"></input>
you have to check 'checkSwap'

It would be easier to pass in this to the function, then the parameter would be a reference to the element that called the function. So you can do:
function checkSwap(self){
alert(self.id);
}
Edit: Also, document.page_form.match_35_0.id will get the id, not the way you have it.

Related

How to trigger a change event on a textarea when setting the value via ngModel Binding

I have a <textarea> within a template driven form of an Angular 7 project.
When editing an object, the form is prefilled with the current values. I want to automatically resize the <textarea> when the content has changed via the [(ngModel)]="property" binding by modifying the element-style.
area.style.overflow = 'hidden';
area.style.height = '0';
area.style.height = area.scrollHeight + 'px';
The code generally is working, but I cannot find a suitable event to trigger it.
Subscribing to the change event of the <textarea> is only working on keyboard input. Using (ngModelChange)="adjustTextAreaSize($event)" has the same behavior.
I tried to execute my resizing code at the end of the ngOnInit() function, but the actual html-control seems to not have any content yet at this point.
Does anyone have an idea which event could do the trick here?
Seemed a rather easy task in the beginning, but I'm breaking my had over this for over an hour now... can not be such a difficult task, can it?
Yes there is a very simple solution for this.
Wrap your textarea inside a form and try the code below:-
HTML
<form #form="ngForm">
<textarea>....</textarea>
</form>
TS
#ViewChild('form') ngForm: NgForm;
ngOnInit() {
this.subscription = this.ngForm.form.valueChanges.subscribe(resp =>
{
console.log(resp); // You get your event here
}
)
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
trigger a change event on a textarea when setting the value via ngModel Binding
This will cause infinite triggering if you do so.
If you don't want to monitor the input model change in a more reactive way, a quicker solution (but a bit hacky) will be simply wrap your code inside setTimeout in ngOnInit() or ngAfterViewInit() where you mentioned it was not working.
setTimeout(() => {
updateSize();
});

Button Function Working Without Click

<script type="text/Javascript">
function phase2Function(){
document.getElementById("0").onclick = buttonChangeFunction();
}
function buttonChangeFunction(){
document.getElementById("1").disabled = "true";
}
</script>
<button id="0" onclick="numberFunction(0)">0</button>
<button id="1" onclick="numberFunction(1)">1</button>
I have a problem with the above code that makes the "buttonChangeFunction" work without me clicking 0. The project im working on is a calculator, where after you press a math operator, it starts phase2Function. Edit: The Question Has been Answered, but I was wondering what to do if I actually want to put something in between the parentheses of buttonChangeFunction?
You need to remove the parenthesis after buttonChangeFunction in phase2Function.
What you are trying to do is make buttonChangeFunction fire each time the button with the ID of '0' is clicked.
Instead, what you're actually doing, is calling buttonChangeFunction, getting back an undefined result (since the function doesn't return anything) and then setting the click handler of the id=0 element to this undefined result.
So, simply change:
document.getElementById("0").onclick = buttonChangeFunction();
to
document.getElementById("0").onclick = buttonChangeFunction;

Toggle switch to pass unchecked value

I'm using a checkbox to create a toggle switch as shown in this tutorial
The switch lives in a form where questions can be added dynamically. On submission the form posts as array of each answer back to the page to be processed however as the off switch doesn't pass a value back to the form the answers get out of sync with the answers for the other text fields. Is there any way to set a value for the off switch, i.e. when a check box is left unchecked?
I've tried to use the following to set my off checkboxes to off however it just seems to animate all the switches to on on form submission, anyone any ideas as to what I'm doing wrong?
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
You probably want to use Javascript to set a value for each checkbox "switch" in one of two ways:
Option 1: in the html of the switch elements/checkboxes, set the value attribute to zero by default. Then add a javascript click handler for the toggle to check its current value and toggle to the opposite state/value.
Option 2: add Javascript to the form's submit handler (on submit) that checks for any switch elements which have no values and set them to zero before processing form.
Either way should pass a value at all times, and your form should be able to keep track of all input states.
This snippet did the trick, as Anson suggested this finds all the checkboxes and sets them to either on or off on form submission:
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});

After Input goes Invalid in HTML5 set error message and prevent default error message from kendo in a grid

I stuck with the inline validation in the kendo grid.
I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:
which event set the input from valid to invalid.
which event displays the error message.
My Current work: https://dojo.telerik.com/OSONo/56
which event set the input from valid to invalid.
...
which event displays the error message.
Just run your kendoValidator with validator.validate();
The error messages are also set with validate().
Something like this should work:
$(document).on('input propertychange', function() {
validator.validate();
});
The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:
errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'
And the whole solution:
https://dojo.telerik.com/OSONo/66
Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.
https://dojo.telerik.com/OSONo/64
my edit:
I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.
In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).
var ValidierungCheckClass = (function () {
return {
AllDOMElements: function () {
$('body').on('input', function () {
var myActiveElement = $(':focus');
if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
var myActiveDOMElement = myActiveElement[0],
start = myActiveDOMElement.selectionStart, //just for IE Support
end = myActiveDOMElement.selectionEnd; //just for IE Support
myActiveElement.trigger("change");
myActiveDOMElement.setSelectionRange(start, end); //just for IE Support
}
})
}
}
});
The change event is allready created from kendo so you dont have to write your own.
At least you have to call the method when creating the website.
<script>
ValidierungCheckClass().AllDOMElements();
</script>
This is my Solution to my problem.
best regards.

How to make two checkboxes required out of three in HTML?

<input type="checkbox" name="Package1" value="packagename">
<input type="checkbox" name="Package2" value="packagename">
<input type="checkbox" name="Package3" value="packagename">
How to make any two checkboxes required for the user to submit the form. The user should not be able to submit the form unless he has checked atleast two checkboxes?
How to achieve that?
Rename checkboxes to name=package[] and values 1, 2, 3.
Then in PHP you'll have o condition (if you send form with GET method, just change POST to GET):
if (isset($_POST['package']) && count($_POST['package']) >= 2) {/* continue */}
If you want to validate it in browser (JS), than:
<script>
var i = 0;
$('[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
i++;
}
});
if (i <= 1) {
return false; // disable sending form when you've checked 1 checkbox in maximum
}
</script>
Add a class that refers only these checkboxes and then count how many are checked.
A quick and dirty way to validate the checkboxes using JavaScript:
JavaScript
checkCheckboxes = function() {
var numberOfCheckedCheckboxes = 0;
var checkbox1 = document.getElementsByName("Package1")[0];
var checkbox2 = document.getElementsByName("Package2")[0];
var checkbox3 = document.getElementsByName("Package3")[0];
if (checkbox1.checked)
{
numberOfCheckedCheckboxes++;
}
if (checkbox2.checked)
{
numberOfCheckedCheckboxes++;
}
if (checkbox3.checked)
{
numberOfCheckedCheckboxes++;
}
alert(numberOfCheckedCheckboxes >= 2);
}
DEMO: JSFiddle
This code isn't the cleanest block of code, however it does get the job done, and will return true if there are at least 2 checkboxes checked, and will return false otherwise. To make it cleaner, you can change the name value of each checkbox to the same name, such as "packages", and then use document.getElementByName("packages"), then use a for-each loop to loop through each element and check its checked state (I would provide a demo in JSFiddle or JSBin, however it seems that Google Chrome is blocking the script in that case). Using the for-each implementation would allow you to use the same amount of code, regardless of the number of checkboxes.
In HTML, you cannot.
You can impose restrictions in client-side JavaScript or in server-side processing of form data, or both. As usual, client-side restrictions are inherently unreliable and should be regarded as convenience to the user, not a reliable method of doing anything. Server-side processing depends on the server-side technology used.