Develop Reference

Execute custom Javascript function on button click in Angular 4

I am beginner in Angular 4 and writing a login component in Angular 4. On click of a Forgot password I want to flip the controls on page to show Reset password elements. I have a javascript function created called rotateCard(this) which I want to call on button click. It is inline javascript in html. I have added html in component.html. below is the code.
but it is giving error as "ReferenceError: rotateCard is not defined"
<form (ngSubmit)="doLoginUser()" #login="ngForm" >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="content">
<div class="main">
<img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
<form>
<div class="form-group">
<input type="text" class="form-control crm-field" placeholder="Email"
id="inputEmail" name="username" ngControl="username" required
autofocus [(ngModel)]="username">
</div>
<div class="form-group">
<input type="password" class="form-control crm-field" name="password" placeholder="Password"
id="inputPassword" ngControl="password" required [(ngModel)]="password">
</div>
<button type="button" class="btn btn-primary btn-block orange-btn">LOGIN</button>
</form>
<button class="btn btn-simple login-link" onClick="rotateCard(this)">
Forgot Password
</button>
</div>
</div>
</div> <!-- end login -->
<div class="back">
<div class="content">
<div class="main">
<img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
<p class="title">Forgot Password</p>
<form>
<div class="form-group">
<input type="text" class="form-control crm-field" name="email" placeholder="Email">
</div>
<button type="button" class="btn btn-primary btn-block orange-btn">RESET PASSWORD</button>
</form>
<button class="btn btn-simple login-link" onClick="rotateCard(this)">
Login
</button>
</div>
</div>
</div> <!-- end forgot password -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col md 5 -->
</div> <!-- end row -->
<div class="space-200"></div>
</div>
</form>
<script src="../../../../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../../../js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
function rotateCard(btn){
var $card = $(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
</script>

If you want to execute functions if someone clicks on a element, you could add the (click) listener to your element.
Like this:
<button (click)="yourFunction()">Send</button>
Then add the function in your component:
yourFunction() {
//your logic
}
I hope that helps you out.
Like to official documentation:
https://angular.io/guide/user-input

It is inline javascript in html
You shouldn't really do this. Looking at your function it looks pretty trivial to move this into the component definition rather than have it in the HTML.
Without seeing the component though I can't be much more help

Why don' t put it in the component.ts file? .. and also remember in Angular 4 you can set css animation directly from Component.ts (https://angular.io/guide/animations) ..
So for example in your component.html .. something like:
<button class="btn btn-simple login-link" (click)="rotateCard()">
Login
</button>
then in you Component.ts file:
in the header section (near import ) ..
declare var $:any;
then after in your ComponentClass
rotateCard(){
var $card = $("#USE ID NOT THIS FOR SELECTOR").closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
Hope it helps you!!

I was able to resolve this in 3 steps.
I changed binding to (click)="rotateCard(this).
Added type="button" property to button.
Installed jquery through npm install and added those in to angular-cli.json
This helped loading the jquery and now the inner method written in component.ts is getting called.
Thank you everyone for responding.

Save Signature when Form is Submitted

I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?

You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!

HTML Javascript - Replace a button with a search field onclick

I have a simple button:
<p><button class="btn btn-lg btn-success btn-parks"
onclick="search()">Get started today</a></p>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>

Use element.outerHTML='NEW HTML'
To get the current element, pass this as argument
To replace p element as well, Use elem.parentElement.outerHTML => parentElement will return parent node of the owner node..
Try this:
var html = '<div class="box">\
<div class="container-1">\
<span class="icon"><i class="fa fa-search"></i></span>\
<input type="search" id="search" placeholder="Search..." />\
</div>\
</div>';
function search(elem) {
elem.outerHTML = html;
}
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>

First of all - your code is not valid: tag starts as <button> but ends as </a>.
To hide initial search .box you can place it in <script> tag and set it's type attribute to unrecognizable (random text). After clicking button take this template inner html and replace it with your code.
Also I have passed this to function to get element you clicked, so you can have multiple same purpose elements.
function search(el) {
$(el)
.parents()
.eq(1)
.html($('#box-tpl').html())
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
</div>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<script type="text/tmpl" id="box-tpl">
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</script>

you can use onclick
$('#id').on('click', function(e){
$('#id').replaceWith('<input type="text" name="q" size="25" id="newelement" value=""/>');
});
if you want cursor in input field in onclick event
$("newelement").focus();

Try this:
function search(){
var button = document.getElementsByClassName('btn btn-lg btn-success btn-parks');
var button0 = button[0];
button0.outerHTML = ('<div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..."/> </div></div>');
}

Use jQuery's hide() and show() functions:
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
.box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="button">
<button class="btn btn-lg btn-success btn-parks" onclick="search()">Get started today</button>
</p>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
jsFiddle with Bootstrap styles

UIkit dropdown hide and appears again if hide it by javascript

Here is the form in dropdown with button that should close this dropdown
<div id="kupit" >
<div class="uk-width-1-1 uk-button-dropdown drop"
data-uk-dropdown="{pos: 'left-center', mode:'click'}">
<button href="#" class="uk-button uk-button-primary tm-add-to-cart uk-margin-top uk-width-1-1">Купить в один клик</button>
<div class="uk-dropdown uk-dropdown-small">
<p>ПОЖАЛУЙСТА, ОСТАВЬТЕ <br> СВОЙ НОМЕР ТЕЛЕФОНА.</p>
<p>НАШИ СОТРУДНИКИ СВЯЖУТСЯ<br> С ВАМИ В БЛИЖАЙШЕЕ ВРЕМЯ.</p>
<form class="uk-form" action="/" method="post">
<div class="uk-form-row">
<input class="uk-width-1-1" name="username" size="18" placeholder="Имя"
type="text">
</div>
<div class="uk-form-row">
<input class="uk-width-1-1" name="phone" size="18" placeholder="Телефон"
type="text">
</div>
<div class="uk-form-row">
<button class="uk-button uk-button-primary uk-width-1-1" value="Войти" name="Submit" type="submit" onclick="popup(this); return false;">ЗАКАЗАТЬ ТОВАР</button>
</div>
</form>
</div>
</div>
</div>
and here is the code for closing dropdown
function popup(here) {
var test = jQuery(here).closest('.drop');
UIkit.dropdown(test).hide();
}
but when I click on the button dropdown hides and then immediately appears again.

This is because of your mouse is still over the dropdown. The system show the window again beause mouse still there. So if you need to close this dropdown by this button you need to add uk-dropdown-close class to this button.
Also you can use this code to add some functionality when dropdown closed
jQuery('[data-uk-dropdown]').on('beforehide.uk.dropdown', function () {
// custom code here
})

jQuery post function with radio buttons

In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.
Here is my buttons:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match">
I would like to get the information from those radio button and create an object match with it in a view:
def test(request):
user=request.user
if request.method == 'POST':
style = request.POST['style']
supporting = request.POST['supporting']
match = Match.objects.create(user=user, style=style, supporting=supporting)
return HttpResponse(test)
The thing is that I don't know JavaScript well, so I didn't find how to get the value from the button.
Then, I think I have to use:
$.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});
But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?
Thank you very much for your help.

taking my last answer, let's use your own code... in your HTML you have something like:
<form action="/sportdub/points_dub/" method="post" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
and you just have to add one hidden field per block, in your case, add 2. Your form would then match:
<form action="/page" method="post" class="form-horizontal">
<input type="hidden" id="supporting_team" value="" />
<input type="hidden" id="supporting_type" value="" />
<div class="btn-group supporting_team" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
add a jQuery helper that will set the values of those hidden fields upon buttons click:
// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
$("#supporting_type").val($(this).text());
});
$(".supporting_type .btn").click(function() {
$("#supporting_team").val($(this).text());
});
when you click the create your match the entire form will be posted to the page set as the action attribute of the form, you have to do nothing more...
If you want to submit it manually by invoking post in javascript you need to remember to prevent the form to be submitted again as that's the input type="submit" element task, you can invoke your post and serializing the entire form data, instead one by one as in your example...
like:
// when the form is submited...
$("form").submit(function() {
// submit it using `post`
$.post('/sportdub/points_dub/', $("form").serialize());
// prevent the form to actually follow it's own action
return false;
});
in your dynamic code, you will have those variables as:
supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']
and this, will be valid, no matter if you have the manually form submit script or not...

After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.
Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):
<div>
<input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
<input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
</div>
<div>
<input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
<input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
</div>
I can get which selections have been made using this:
$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();
If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:
$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();
To put this value into a hidden input, do the following:
$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());