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. :)
Related
Okay, so i successfully toggled a bool and some other options.
But whenever i make another click function for another button to toggle the bool to false, it doesn't work.
My code:
let managementbool = false;
$("#management").on('click', function(){
managementbool = true;
if(managementbool)
{
$(".dot1").hide();
$(".dot2").hide();
$(".topbar").hide();
$(".boostingtext").hide();
$(".mainbar").hide();
$("#container").hide();
$(".dot11").show();
$(".dot22").show();
$(".topbar1").show();
$(".boostingtext1").show();
$(".mainbar1").show();
}
});
$("#contracts").click(function () {
managementbool = false;
$(".dot11").hide();
$(".dot22").hide();
$(".topbar1").hide();
$(".boostingtext1").hide();
$(".mainbar1").hide();
$(".dot1").show();
$(".dot2").show();
$(".topbar").show();
$(".boostingtext").show();
$(".mainbar").show();
$("#container").hide();
});
First button to toggle it to true works, but whenever i click the button that sets it to false. Nothing happens.
You didn't add your function correctly. $("#contracts").on('click', function() { ... }); should work.
Also take a look at whether you really need your managementbool variable. When I click on #management you set it to true and thus always execute the code in your if-statement, making the if-statement redundant. In the code segment you show, it seems you never actually do anything based on the value of managementbool.
$("#show").on('click', function() {
$("#some_element").show();
});
$("#hide").on('click', function() {
$("#some_element").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="some_element">Test</div>
I'm trying to clear the form onClick with react. The event triggers, but when I try to setState to " " it tells me cannot set state of undefined.
I've tried setting the state to empty in several ways.
onHandleChange(e) {
this.setState({
input: e.target.value
});
}
clearForm(e) {
e.preventDefault();
const input = this.state.input;
console.log("input", input);
this.setState({
input: ""
});
}
I've also tried to do it inline, with onClick={(this.form.elements["text-input"].value = "")}.
<button
className="reset btn btn-danger"
type="reset"
id="resetInput"
value="reset"
onChange={this.onHandleChange}
onClick={this.clearForm}
>
Reset
</button>
My expected output is that the value of the input should be nothing. Empty string. However, that's not happening... i'm not resetting the state.
This happens because you are not binding this correctly to clearForm function.
Cannot set State of undefined. This error means in this.state, this is undefined
Use arrow function to correctly bind this context.
Try this code
clearForm = (e) => {
Try This Code
<script>
$(document).ready(function(){
$('#btnClear').click(function(){
if(confirm("Want to clear?")){
/*Clear all input type="text" box*/
$('#form1 input[type="text"]').val('');
}
});
});
</script>
You can set state for all the values of the form input to be empty strings on click of that clear button.
I have the following form:
<form onsubmit="return testform(tolowanswers,emptyAnswers);" class="edit_question" id="edit_question"
I check the Form before submit with the function testform, Is there a possibility to run a second function after testform()
thanks
One easy solution could to call the function like
return testform(tolowanswers,emptyAnswers) && secondmethod();
this will call the second function if testform returns true.
Another solution could to use another function like
onsubmit="return myfunction();"
then
function myfunction() {
if (testfunction()) {
secondfunction();
} else {
return false;
}
}
You just have to put those two functions inside the onsubmit event itself like below
"return (testform(tolowanswers,emptyAnswers) && secondFn())"
It will check if the first function is true and only if it returns true, then the secondFn will be executed.
Another way would be to invoke secondFn() inside testForm function after all validation.
I want to avoid posting back when user clicks an html button. because i want show one pop up using javascript. I dont want postback when the button is clicked.
function ShowEditChoicesPopup() {
// I want to show some pop up here.
$("popupdiv").show();
return false;
}
And the markup am using is:
<button onclick="javascript:ShowEditChoicesPopup();"> Edit Choices </button>
Please suggest some idea.
Apply event.preventDefault();
function ShowEditChoicesPopup(event) {
event.preventDefault();
$("popupdiv").show();
}
Try with the below code snippet.
<button onclick="javascript:return ShowEditChoicesPopup();">
OR
<button onclick="javascript:return ShowEditChoicesPopup(); return false;">
OR
<button onclick="javascript:ShowEditChoicesPopup(); return false;">
Try:
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("popupdiv").show();
return false;
}
return false;
}
You need a second return false for ShowEditChoicesPopup() which should cancel form submission. This assumes the code is in a <form> block.
Use event.preventDefault(); which will prevent default behaviour of the element and performs specified function
Follow the example:
http://jsfiddle.net/guinatal/ct8uS/1/
HTML
<form>
<button onclick="return ShowEditChoicesPopup();"> Edit Choices </button>
<div id="popupdiv" style="display:none">popupdiv</div>
</form>
JS
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("#popupdiv").show();
return false;
}
I need to be able to change the onclick event of an id so that once it has been clicked once it executes a function which changes the onclick event
Here is my code:
Javascript:
function showSearchBar()
{
document.getElementById('search_form').style.display="inline";
document.getElementById('searchForm_arrow').onclick='hideSearchBar()';
}
function hideSearchBar()
{
document.getElementById('search_form').style.display="none";
document.getElementById('searchForm_arrow').onclick='showSearchBar()';
}
and here is the HTML:
<!-- Search bar -->
<div class='search_bar'>
<img id='searchForm_arrow' src="images/icon_arrow_right.png" alt=">" title="Expand" width="10px" height="10px" onclick='showSearchBar()' />
<form id='search_form' method='POST' action='search.php'>
<input type="text" name='search_query' placeholder="Search" required>
<input type='image' src='images/icon_search.png' style='width:20px; height:20px;' alt='S' >
</form>
</div>
Thanks
Change your code in two places to reference the new functions directly, like:
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
Can you try this,
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
You were nearly right. You are settingthe onclick to a string rather than a function. Try:
in showSearchBar()
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
in hideSearchBar()
document.getElementById('searchForm_arrow').onclick=showSearchBar;
You do not need to create two function.
Just create one function and using if condition you can show and hide the form tag..
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display=''; // no need to set inline
}else{
document.getElementById('search_form').style.display='none';
}
}
function searchBar(){
var x = document.getElementById('search_form').style.display;
x = (x == 'inline') ? 'none' : 'inline';
}
You can wrap up both functions into one by adding a check to the current condition of the element and applying your style based on that condition. Doesn't actually change the function but doesn't need to as there is now only one functon performing both actions.
With javascript you can check and perform opration
function SearchBarevent()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
or if you may go for jquery there is better solution toogle
Like:
$("#button_id").click(function(){
$( "#search_form" ).toggle( showOrHide );
});
Fiddle is example
Here is an option that uses jQuery:
$('#searchForm_arrow').click(function() {
$('#search_form').slideToggle();
});
http://jsfiddle.net/PuTq9/