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.
Related
I have a textarea that I want to show/hide when ever I click a button
and also I need it to target this way because ill be using it in an undefined number of times
SAMPLE IMAGE HERE
SAMPLE IMAGE HERE
here is the HTML that I want to
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2"><i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq"></textarea>
and here is the script I try to use hiding/Showing it
$('body').on('click', '.buttonMultipleNameReq',function(){
const element1 = $(this);
const target1 = element1.parent().parent().find("#multipleNameReq");
console.log(target1);
if (target1.style.display === "none") {
target1.style.display = "block";
} else {
target1.style.display = "none";
}
})
the accepted answer will work fine for nonduplicate id of textarea or any other elements, but as you have shown in your image if you want to work this for multiple textarea or any elements I suggest you use the class attribute instead of the id attribute, here is the explanation for why to not use same id multiple times,
Duplicate IDs are common validation errors that may break the accessibility of labels, e.g., form fields, and table header cells.
To fix the problem, change an ID value if it is used more than once to be sure each is unique.
here below is some piece of code that may help you to get what are you looking for
$('body').on('click', '.buttonMultipleNameReq',function(e){
let textArea = $(e.target).parent().parent().find('textarea');
if(textArea.css('display') == "block"){
textArea.hide()
}else{
textArea.show()
}
})
.multipleNameReq{
display:block
}
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Using toggle function
here below is simpler code using jquery toggle, here you can read about toggle
$('body').on('click', '.buttonMultipleNameReq',function(e){
$(e.target).parent().parent().find('textarea').toggle();
})
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Since you're using jQuery you could use it's syntax:
To get element:
$('#multipleNameReq');
To Check if element is visible and not hidden:
$('#multipleNameReq').is(":visible");
To Show:
$('#multipleNameReq').show();
To Hide:
$('#multipleNameReq').hide();
A solution to add into your click function would look like:
if ($('#multipleNameReq').is(":visible")) {
$('#multipleNameReq').hide();
} else {
$('#multipleNameReq').show();
}
To access and change the style of an element you need to use the css function.
$('body').on('click', '.buttonMultipleNameReq', function() {
const element1 = $(this);
const target1 = element1.parent().parent().find("#multipleNameReq");
if (target1.css('display') === "none") {
target1.css('display', "block");
} else {
target1.css('display', "none");
}
})
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">Click<i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq" style="display: block;"></textarea>
</div>
Can anyone explain why the "onclick" part won't fire?
function displayHello() {
let helloName = document.getElementByID('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementByID("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
PS:
I'm just learning JS, so, I'm not too familiar with a lot of stuff yet. (We just finished the HTML stuff last semester)
not getElementByID. use getElementById.
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
It does work, you just had a typo with getElementByID, it should be getElementById
function displayHello() {
let helloName = document.getElementById('helloNameInput').value;
// prints out the variable, to the button >>
document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
<label for="helloNameInput" class="form-label">Name:</label>
<input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>
<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>
<!--Display Hello! & Reset buttons-->
<div>
<button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
<button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>
In case others run into this same issue, I've uploaded a screenshot of the "git change log", that has all the corrections to the above, so that it worked as intended. ^_^
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
how can i take the parameter(number) on a bootstrap input element when i click on the button??
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber"> <input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." > </div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
my js code... Then i use the number for some math operation
function myFunction() {
var x = document.getElementById("myNumber").value;
You are reading value property of div element while it is a property of the input.
Use id of input and it will work.
function myFunction() {
var x = document.getElementById("focusedInput").value;
console.log(x);
}
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber">
<input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." >
</div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
var x = document.getElementById("focusedInput").value;
You need to reference the input element, not its container.
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);