I need to send the value of input element when user clicks on the button. What is the best way to accomplish this in Angular2?
<input type="text" class="form-control" placeholder="Search for images..." />
<span class="input-group-btn">
<button (click)="onClick($event)" class="btn btn-default" type="button">Go!</button>
</span>
You can define refference to input using #name then you can use it name.value
<input type="text" class="form-control" placeholder="Search for images..." #inputElement />
<span class="input-group-btn">
<button (click)="onClick($event, inputElement.value)" class="btn btn-default" type="button">Go!</button>
</span>
Its not the best its the easiest i would say
you can bind the click function as:
<input type="text" [(ngModel)]="value" placeholder="Enter the name" />
<span class="input-group-btn">
<button (click)="onClick(value)">Go!</button>
</span>
on .ts file you have to create onClick function
onClick(valueRecieved){
// do what you want
}
Related
I got a problem I need to fill two fields in a form with diffrent values and I would like to do that with an button onClick function.
I genererat buttons and the output looks like this:
<button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)">1</button>
Now I want to fill my form with the values
the first value I want to be placed in the first field id="areaname_fill" and the secound value should fill the field id="squarename_fill".
Just to clarify, If I click on the first button
id="areaname_fill" should set the value to "Test" AND
id="squarename_fill" should set the value to 1.
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" />
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" />
</div>
I came up with this JS but I can't get it to work, any ides?
function fillsquare(area,square)
{
var area = area;
var square = square;
document.getElementById(areaname_fill).value = area;
document.getElementById(squarename_fill).value = square;
}
You can achieve it in this way
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
And here
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
function fillsquare(area,square)
{
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="">
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="">
</div>
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
It's generally recommended that you avoid using inline javascript like onClick="foo"
If possible, you should change your markup to to include the values in the button markup and then add a click event listener to extract and the data and use it in the form. Here's an example of that.
const buttons = document.querySelectorAll("button");
const areaField = document.getElementById("areaname_fill");
const squareField = document.getElementById("squarename_fill");
buttons.forEach(button => {
button.addEventListener("click", () => {
areaField.value = button.dataset.area;
squareField.value = button.dataset.square;
});
});
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
>
</div>
<button class="btn btn-primary" type="button" data-area="test" data-square="1">
First button
</button>
<button class="btn btn-primary" type="button" data-area="test2" data-square="3">
Second button
</button>
Try the below code. The quotes are missing in onclick and in the document.getElementById as the test and test2 are string, and the document.getElementById expects a string argument (the element id).
function fillsquare(area, square) {
var area = area;
var square = square;
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<body>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test', 1)"
>
1
</button>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test2', 3)"
>
1
</button>
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
/>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
/>
</div>
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
You should Add double quotes to fix it.
I just want to ask on how to put a value in an input field without reloading the page. Heres my code. What i want to happen is that when i click the button, "1234567" will automatically be inside or value of the input fields but without refreshing the page. This how my code is but nothing is happening. Thank you in advance!
This is for my input fields
<div class="form-group">
<label for="password">{{ $edit ? trans("app.new_password") : trans('app.password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">{{ $edit ? trans("app.confirm_new_password") : trans('app.confirm_password') }} <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="#lang('app.leave_blank_if_you_dont_want_to_change')" #endif>
</div>
Then this for my button that when click it will trigger the event
<input type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" onclick="myFunction()">
<i class="glyphicon glyphicon-filter"></i> Default Pass
</input>
Then this is the javascript
<script type="text/javascript">
$(document).on('click', 'default_pass', function myFunction() {
document.getElementById("password").value = "1234567";
document.getElementById("password_confirmation").value = "1234567";
});
</script>
PS Im really no good at javascript. Thanks for the help!
The problem is that your HTML is invalid. <input> isn't a container, so Default Pass is not inside it. Clicking on that doesn't trigger a click on the button.
You should use <button> instead.
And in the jQuery you need to use #default_pass as the selector. You don't need the onclick attribute in the button, since you're using jQuery to bind the event handler. You never defined the function as a global name; using function myFunction() in the jQuery event handler only defines the name in the local scope of the function; see Why JavaScript function declaration (and expression)?
$(document).on('click', '#default_pass', function myFunction() {
$("#password, #password_confirmation").val("1234567");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="password">Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password" name="password" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password <text class="text-danger">*</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" #if ($edit) placeholder="Leave blank if you don't want to change" #endif>
</div>
<button type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" >
<i class="glyphicon glyphicon-filter"></i>
Default Pass
</button>
I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.
So how do I make it submit a form? If you can give me a script to do it, that would be fine too.
(I don't know javascript myself)
My current code:
<form action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
If I understand you correctly you want to submit the form when you press the button using javascript?
<form id="test" action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.
Here is your solution,
<form action="myloc" method="post" id="myForm">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Javascript code
var button=document.getElementById('sub');
button.onclick=function(){
document.getElementById("myForm").submit();
}
Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.
I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.
Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.
$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});
As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>