How to add number value when i click button?
For example
If i click 100,000 twice,
200,000 will be entered in the input.
$(document).ready(function() {
$('#myform button').on('click', function() {
$('#cvalue').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
Not trivial
const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
$(document).ready(function() {
const $cvalue = $('#cvalue');
$('#myform .button1').on('click', function() {
const val = +$(this).val().replace(/\D/g, "") + +$cvalue.val().replace(/\D/g, "")
$cvalue.val(fmt.format(val));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money" value="0">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
Related
I'm a beginner at programming.
When I click the button,
The value of the button...
I want it to be displayed as input.
And, when i click it several times,
The corresponding value is added.
I want to mark it.
I'm searching the Internet, but it's not working.
Please help me. Thank you.
<script>
$(document).ready(function(){
$('#myform input').on('change',function(){
var cvalue=$("[type='button']:onclick").val();
$('#cvalue').val($("[type='button']:onclick").val());
});
});
</script> <div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type = "button" value="100,000">100,000</button>
<button class="button1" type = "button" value="200,000">200,000</button>
<button class="button1" type = "button" value="300,000">300,000</button>
<button class="button1" type = "button" value="500,000">500,000</button>
<button class="button1" type = "button" value="1,000,000">1,000,000</button>
this could help you:
$(document).ready(function() {
$('#myform button').on('click', function() {
$('#cvalue').val($(this).val());
});
});
<!DOCTYPE html>
<html>
<body>
<h1>The button Element</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var value = $(this).attr("value");
$('#cvalue').val(value);
});
});
</script>
<div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type = "button" value="100,000">100,000</button>
<button class="button1" type = "button" value="200,000">200,000</button>
<button class="button1" type = "button" value="300,000">300,000</button>
<button class="button1" type = "button" value="500,000">500,000</button>
<button class="button1" type = "button" value="1,000,000">1,000,000</button>
</body>
</html>
Use this approach.
Vanilla Javascript Solution:
After clicking on any button you provided, the value of the clicked button will be copied to the input.
"use strict";
let input = document.getElementById("cvalue");
let button = document.querySelectorAll(".button1");
button.forEach(item => {
item.addEventListener("click", () => {
input.value = item.value;
});
});
<div class="inputdiv">
<input type="text" id="cvalue" class="money" />
</div>
<form>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
I have trying to create a calculator using the eval() function. But for some reason my numbers and operator buttons wont show on the screen(form). Below is my html and js code.
const btns = document.querySelectorAll('.btn');
var screenView = document.querySelector('.screen');
const equalBtn = document.querySelector('.btn-equal');
const clearBtn = document.querySelector('.btn-clear');
for (let i = 0; i < btns.lenght; i++) {
btns[i].addEventListener('click', function() {
let number = btns[i].getAttribute('data-num');
screenView.value += number;
})
}
equalBtn.addEventListener('click', function() {
let value = eval(screenView.value);
screenView.value = value;
})
clearBtn.addEventListener('click', function() {
screenView.value = '';
})
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<button type="button" class="btn btn-digits" data-num="7">7</button>
<button type="button" class="btn btn-digits" data-num="8">8</button>
<button type="button" class="btn btn-digits" data-num="9">9</button>
<button type="button" class="btn btn-operators" data-num="/">/</button>
<button type="button" class="btn btn-digits" data-num="4">4</button>
<button type="button" class="btn btn-digits" data-num="5">5</button>
<button type="button" class="btn btn-digits" data-num="6">6</button>
<button type="button" class="btn btn-operators" data-num="*">*</button>
<button type="button" class="btn btn-digits" data-num="1">1</button>
<button type="button" class="btn btn-digits" data-num="2">2</button>
<button type="button" class="btn btn-digits" data-num="3">3</button>
<button type="button" class="btn btn-operators" data-num="-">-</button>
<button type="button" class="btn btn-digits" data-num=".">.</button>
<button type="button" class="btn btn-digits" data-num="0">0</button>
<button type="button" class="btn-clear btn-digits">C</button>
<button type="button" class="btn btn-operators" data-num="+">+</button>
<button type="button" class="btn-equal btn-digits">=</button>
</div>
</section>
You have a typo there: lenght instead of length.
Also, I feel obliged to say, that eval() should always be considered after everything
else failed, as the last resort.
When I click on .add-btn, I change the .add-btn's style to background:#cccccc and change the val() to "-".
Now when I remove the added text with tr td .list that is a row in a list, I want that .add-btn button that added the deleted row to style back to background:#232323 with val() "+".
The problem I have is that there is 10 buttons with classname .add-btn, and how will I now which of the 10 buttons that has been clicked, to add text?
jQuery("tr td .list").live('click', function() {
jQuery(this).closest("tr td").remove();
});
jQuery(".add-btn").click(function(event) {
jQuery(this).val("-");
jQuery(this).css("background", "#cccccc");
event.stopImmediatePropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr></tr><tr><td><div class="list"><p class="delete-list-domains">X</p>added text in a list</div></td></tr><tr></tr>
</tbody>
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn">
You have to assign different id for each button, giving same id is wrong.
$("tbody").on('click', '.list', function() {
console.log($(this).find("tr"));
var btn = $(this).data('id');
$('#'+btn).trigger('click');
$(this).remove();
});
$(".btn-xs").on('click', function(event) {
var id = $(this).attr('id');
if($(this).hasClass('add-btn')) {
$(this).removeClass('add-btn')
.addClass('rm-btn')
.val('-')
.css('background','#cccccc');
$('tbody').append('<tr><td><div class="list" data-id='+id+'><span class="delete-list-domains">X</span> added text in a list by '+id+'</div></td></tr>');
} else if($(this).hasClass('rm-btn')) {
$(this).removeClass('rm-btn')
.addClass('add-btn')
.val('+')
.css('background','#fffff');
$('[data-id="'+id+'"]').remove();
} else {
alert('error')
}
});
.delete-list-domains{ color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody id="content">
</tbody>
</table>
<hr/>
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn1">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn2">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn3">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn4">
<input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn5">
This is how you can target only a clicked button whilst adding the event to all of them in vanilla JS:
const btnEls = document.querySelectorAll('.add-btn')
Array.from(btnEls).forEach(btnEl => {
btnEl.addEventListener('click', () => {
// do whatever you want to button here (use btnEl var)
})
})
I have a list of bootstrap buttons and also a search box and I want to implement a filter function(preferably in javascript) to filter the number of buttons:
The bootstrap code is here:
https://jsfiddle.net/7zyrdnab/
<div class="row">
<div class="col-lg-2">
<div class="panel">
<input type="text" id="search" placeholder="Type to search">
<br>
<button type="button" class="btn btn-secondary">AA1009</button>
<button type="button" class="btn btn-secondary">AA1010</button>
<button type="button" class="btn btn-secondary">BA1098</button>
<button type="button" class="btn btn-secondary">BB1890</button>
<button type="button" class="btn btn-secondary">C89761</button>
<button type="button" class="btn btn-secondary">CD1667</button>
<button type="button" class="btn btn-secondary">GG7830</button>
<button type="button" class="btn btn-secondary">GF65372</button>
<button type="button" class="btn btn-secondary">BH6537</button>
<button type="button" class="btn btn-secondary">HGB562</button>
<button type="button" class="btn btn-secondary">LK9063</button>
<button type="button" class="btn btn-secondary">CP9871</button>
<button type="button" class="btn btn-secondary">IRON87</button>
<button type="button" class="btn btn-secondary">ACT567</button>
<button type="button" class="btn btn-secondary">MPO760</button>
<button type="button" class="btn btn-secondary">GH5436</button>
<button type="button" class="btn btn-secondary">NBH894</button>
<button type="button" class="btn btn-secondary">GHFDF6</button>
<button type="button" class="btn btn-secondary">US4536</button>
<button type="button" class="btn btn-secondary">MO9854</button>
</div>
</div>
</div>
The filter should work like this:
if AA is typed, only the buttons with the text "aa" should be visible.
The only suggestion i got while searching online was use list.js but I was wondering if there can be a simpler javascript search implementation.
https://jsfiddle.net/Shuaso/qhku76bu/
The jquery:
var $button = $('.btn');
$('#search').keyup(function() {
var re = new RegExp($(this).val(), "i"); // case-insensitive
$button.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
Basically you want to run the function each time the user types in the input to filter the elements. You are hiding all buttons that do not match the user input.
I want to select both button (color and size) in the same time and I want it focus like this >> enter image description here.
I want send data form focus button on form.
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
.btn:focus{
border-radius: 20px;
color:#000;
}
.btn2:focus{
border-radius: 10px;
color:#D97476;
}
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>
thank you
Why you not use input type="radio" ?
Use another class with style and with jquery add class on click button.
$('.select-color button').on('click', function(){
$('.select-color button.selected').removeClass('selected');
$(this).addClass('selected');
});
$('.select-option-s7 button').on('click', function(){
$('.select-option-s7 button.selected').removeClass('selected');
$(this).addClass('selected');
});
.selected{
border-radius: 10px;
color:#D97476;
}
.btn:focus{
outline: none;
}
.btn2:focus{
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>