We Keep Coding

How call a function in an subimit button

I have this function to hide and show a div
Aoba(){
if(this.fill == false){
return this.fill = true
}else if(this.fill == true){
return this.fill = false
}
return console.log(this.fill)
}
and it's working in my filter button, but i need use it again when i click to filter
but it´s a subimit button and the subimit dont work when i put the function there.
<div class="col-6">
<button type="submit" (click)="Aoba()" class="btn btn-primary-color w-100">{{'Filtrar' | translate}}</button>
</div>

Use the onclick attribute to specify the function to be called
function HandleClick() {
alert("I've been clicked");
}
<button onclick="HandleClick()">Click me!</button>

HTML
<form [formGroup]="XXXXX" (ngSubmit)="onSubmit()">
<button type="submit">Continuer</button>
</form>
TS
onSubmit(): {
}

First off,
return this.fill = true
is the same as just
return;
since this.fill = true doesn't return a value. So I would leave out the return keyword.
Secondly, your console.log will not be hit because you're returning before you get to it, regardless of what this.fill is.
You also don't need that second if, since this.fill is boolean, if it's not true, it's false. No other options. If it's not specifically a boolean, then ignore this paragraph, although I strongly suggest you cast it to something specific.
Third, if the function returns false, I believe it will stop form submission. It may not work at all with a (click) handler. I can't remember and I don't have time to recreate your test case (use StackBlitz for that).
What I would do is use a Reactive Form, and submit it in code. https://angular.io/guide/reactive-forms
Hope that helps. :)

Do html validation without calling javascript function on submission of form.

I have a form which has a textarea:
<form id="hello">
<textarea id="Testarea" required></textarea>
</form>
<button id="myButton" type="submit" value="Submit">Click me!
</button>
When the user submits the form, I listen to it via a jquery handler:
$("#myButton").click(function () {
alert("blah");
});
However if the textarea is empty, I want an error to be thrown without calling my function. Right now, my function is called even if the textarea is empty.
https://jsfiddle.net/8dtsfqp0/

Use a submit handler on the form, not a click handler on the button.
Here is the order of execution when you click on a submit button:
Button's click handler is called. If it calls event.preventDefault(), the process stops.
The form is submitted, which performs the following steps:
Validate input fields. If any validation fails, the process stops.
Call the form's submit handler. If it calls event.preventDefault(), the process stops.
The form data is sent to the server.
So if you want to prevent your function from being called, it has to be after the "Validate input fields" step. So change your code to:
$("#hello").submit(function () {
//Throw error if textarea is empty
alert("Her");
});
Fiddle

you can try this:
$("#myButton").click(function () {
if($('#Testarea').val().trim().length > 0)
{
return true;
}
else
{
alert("empty text box");
return false;
}
});

<script type="text/javascript">
document.getElementById("myButton").addEventListener("click", myFunction);
var problem_desc = document.getElementById("Testarea");
function myFunction() {
if (problem_desc.value == '') {
alert("blank");
return false;
}
else{
alert("working");
}
}
</script>

How to run a function just before the form post happens?

I have a form which posts some data to the server
<form action="action.html" method="post" id="formComments">
// controls, etc
</form>
<script>
function validateFormJustBeforePost()
{
//
return true;
}
</script>
Just before the form is posted, I'd like to run a script which returns true or false.
If true it should continue with the post, otherwise not (an error message will be shown)
The form post can happen on clicking a button inside or outside (page menu) the form above.
How to achieve that?
I ran the below but it never alerts:
$(document).ready(function(){
$('form').submit( function()
{
alert("Something");
});
});

onsubmit event handler, for example
<form onsubmit="return validateFormJustBeforePost()" ... >
or in <script>:
document.getElementById('formComments').onsubmit = validateFormJustBeforePost;
or, the most proper way
function validateFormJustBeforePost(e){
if( invalid ){
e.preventDefault()
return false;
}
}
document.getElementById('formComments').addEventListener( 'submit', validateFormJustBeforePost);

How to prevent default on form submit?

If I do this I can prevent default on form submit just fine:
document.getElementById('my-form').onsubmit(function(e) {
e.preventDefault();
// do something
});
But since I am organizing my code in a modular way I am handling events like this:
document.getElementById('my-form').addEventListener('onsubmit', my_func);
var my_func = function() {
// HOW DO I PREVENT DEFAULT HERE???
// do something
}
How can I prevent default now?

The same way, actually!
// your function
var my_func = function(event) {
alert("me and all my relatives are owned by China");
event.preventDefault();
};
// your form
var form = document.getElementById("panda");
// attach event listener
form.addEventListener("submit", my_func, true);
<form id="panda" method="post">
<input type="submit" value="The Panda says..."/>
</form>
Note: when using .addEventListener you should use submit not onsubmit.
Note 2: Because of the way you're defining my_func, it's important that you call addEventListener after you define the function. JavaScript uses hoisting so you need to be careful of order of things when using var to define functions.
Read more about addEventListener and the EventListener interface.

All you have to do is add a parameter to your function and use it inside.
var my_func = function(event) {
event.preventDefault();
}
The parameter inside now represents the parameter from the addEventListener.

i known this is old, but just for the sake of it.
try
document.getElementById('my-form').addEventListener('onsubmit',
function(event){event.preventDefault();my_func();});
var my_func = function() {
// HOW DO I PREVENT DEFAULT HERE???
// do something
}

Call Javascript function only when checkbox is NOT checked

I'm trying to figure out how to call a Javascript function only when a checkbox is NOT checked.
Here is my checkbox:
<input type="checkbox" id="icd" name="icd" value="icd" />
Here is the name of the function:
planhide();

document.getElementById('icd').onchange = function() {
if ( document.getElementById('icd').checked === false ) {
planhide();
}
};​

Include onchange option in the input tag and then add an intermediate function that checks and calls planhide() accordingly as follows:
<input type="checkbox" id="icd" name="icd" value="icd" onchange=check()/>
Then define the check() to do check the state and call the function as follows:
function check()
{
if(document.getElementById("icd").checked==false)
planhide();
}
Also instead of onchange you can also use onclick on the submit button option to call the check() function as like follows:
<input type="button" onclick=check()/>

$(document).ready(function () {
$('#icd').change(function () {
if (!this.checked) {
planhide();
}
});
});

just register an onchange handler on your input, check the 'checked' property when the handler is call, and call the method if checked is false.
Here is a fiddle.