I want to get the value of Buttons I have created:
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
I use this JS to highlight the button if is pressed:
$(document).ready(function(){
$(".btn-outline-primary").click(function(){
$(this).button('toggle');
});
});
Underneath those buttons there is a submit button, which I use to search a database. So how can I get the values of the buttons to use them for search (eg. "MR" value)?
"value" is an attribute on the button elements, so you can access it with .attr():
$(document).ready(function() {
$(".btn-outline-primary").click(function() {
console.log($(this).attr("value"))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
You can try this:
$(".btn-outline-primary").click(function(){
console.log($(this).prop('value'));
});
To get the value of a tag , you could always use the value method.
How :
document.getElementsByClassName('btn-outline-primary")[0].value;
This will get the value of the first element with class btn-outline-primary
If you wish to get the values of all elements :
var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))
In the case you are using JQuery you will need to add
.attr('value')
to get the value
You could find all buttons with active class and get their value
Something like:
var values = [];
$('.btn-outline-primary.active').each(function(key, value){
values.push($(this).val());
});
values array will have all your values of active buttons
To get a value of clicked button you can do this. Just use the value property of the button to get the value associated with the corresponding button.
const buttons = document.querySelectorAll('.btn-outline-primary');
[...buttons].forEach(item => {
item.addEventListener('click', event => {
console.log(item.value);
});
});
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
And if you want to store the value for later use then you can simply assign it to some variable.
const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;
[...buttons].forEach(item => {
item.addEventListener('click', event => {
clickedValue = item.value;
});
});
Related
I want to know how I can save data in firestore as an array. What I mean is: take 3 inputs from the user and save 3 inputs in 1 field of array.
Here I want to show 5 to 6 input boxes and save the data in the boxes save in the facilities array.
<form class="form" #formx="ngForm" (submit)="submit( formx.value)">
<div class="form-body">
<h4 class="form-section">
<i class="icon-user"></i> Basic Details</h4>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="projectinput1">Event Name</label>
<input type="text" id="projectinput1" class="form-control" name="eventname" ngModel>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput3">Price</label>
<input type="text" id="projectinput3" class="form-control" name="price" ngModel>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-raised btn-danger mr-1">
<i class="icon-trash"></i> Cancel
</button>
<button type="submit" class="btn btn-raised btn-success" >
<i class="icon-note"></i> Save
</button>
</div>
</form>
.ts
submit(data){
if(this.img){
data.photo = this.img;
}
console.log(data);
data.timestamp = new Date();
let final = {...data};
console.log(final);
this.api.addDeal(final).then(res=>{console.log(`deal created`);})
}
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
In my modal popup code , I am trying to disable a button if a text box is empty or nothing is entered in it .
<div id="add_account_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalForAddAccount" aria-hidden="true">
<div class="modal-body">
<h3>Add a new Account</h3>
<form class=" " name="addAccountForm">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button class="btn btn-primary " ng-class="{'disabled':vm.addedAccount === ''}" ng-click="vm.submitAddAccount()">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>
</div>
</div>
But the submit button on modal popup load is not disabled.
I also tried :
<button class="btn btn-primary " ng-disabled="vm.addedAccount === ''" ng-click="vm.submitAddAccount()">Submit</button>
But that also did not work.
What am I doing wrong ?
ng-click fires even if ng-disabled is true
use ng-submit with ng-disabled instead.
<form class=" " name="addAccountForm" ng-submit="vm.submitAddAccount()">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button type="submit" class="btn btn-primary " ng-disabled="vm.addedAccount === ''">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>
You could use this way:
<button class="btn btn-primary " ng-disabled="!vm.addedAccount.length" ng-click="vm.submitAddAccount()">Submit</button>
ng-disabled works well: http://codepen.io/DaniloPolani/pen/wgOpPa
Maybe vm.addedAccount is not an empty string? Try with a console log to print vm.addedaccount === '' or inside the angular brackets.
I have the following code:
<div class="modal-body">
<div class="form-group" id="checkDiv_0">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<div class="form-group" id="checkDiv_1">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
I want to set focus on textare with the id textarea_1. Without the focus the user must left-click insisde the textarea and than can start writting inside it.
I tried with $('#textarea_1').focus(), but without success.
SOLUTION:
I solved the problem this way:
$(document).ready(function () {
$('#modal').on('shown.bs.modal',
function () {
var element = document.getElementById("textarea_0");
element.focus();
});
});
You need to wrap your jQuery code inside the .ready() function:
$(document).ready(function(){
$("#textarea_1").focus();
});
You do not need javascript for this question, since you can just do:
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize" autofocus></textarea>
The autofocus attribute focuses the text area as default on the DOM.
You can use this page as reference:
http://www.w3schools.com/tags/att_textarea_autofocus.asp
Two examples without jQuery:
window.onload = function() { document.getElementById('textarea_1').focus(); };
or
window.addEventListener('load', function() { document.getElementById('textarea_1').focus(); }, false);
The second one allows you to assign multiple 'onload' events to single DOM element.
The code necessary really depends on when you need to give it focus. If you need to give it focus when the page loads, you should do what #David Li suggested.
Otherwise, you can do something like this.
document.getElementById('focusButton').onclick = function(){
document.getElementById('textarea_1').focus();
};
<div class="modal-body">
<div class="form-group" id="checkDiv_0">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_0" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<div class="form-group" id="checkDiv_1">
<div class="col-md-2 control-label">
#Translations.ReportCopy
</div>
<div class="col-md-10">
<div class="col-md-1">
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-md-11">
<textarea id="textarea_1" name="Copies" class="form-control textarea-resize"></textarea>
</div>
</div>
</div>
<input type="button" id="focusButton" value="give element focus">
I want to remove the whole <div class="form-group"> when I click on the <span type="button">.
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span onclick="removeRow(this)" class="btn btn-default" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
It must be look like this:
<script>
function removeRow(element){
element.parentNode.remove();
}
</script>
How about something like this
<div class="form-group" id="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-5">
<div class="input-group">
<input required="" placeholder="Voeg een highlight toe" class="form-control" name="highlight[]" type="text">
<div class="input-group-btn">
<span class="btn btn-default" id="clickme" type="button">
Verwijder
</span>
</div>
</div>
</div>
</div>
Then the js
var cm = document.getElementById('clickme');
cm.addEventListener('click',function(){
console.log('clicked');
var fg = document.getElementById('form-group');
fg.parentElement.removeChild(fg);
});
see fiddle
http://jsfiddle.net/X8Cwq/
Just traverse the tree up to that node and remove it.
function removeRow(element){
element.parentNode.parentNode.parentNode.parentNode.remove();
}
DEMO