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>
Related
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>
I have this html like
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="1" class="btn btn-primary" role="button">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="2" class="btn btn-primary" role="button">Vote Now</button>
</form>
My question is, I want to click the button based on name and value with jquery or javascript, How to do this?
If I understand correctly, you mean, that you want to execute click if name and value attributes are matching on any button. You can try the following. You should have some event attached to that button, so you can see the effect.
I have attached onclick there and put correct names.
function clickButtons(name,value){
var elements=document.getElementsByTagName("button");
for(var i=elements.length-1;i>=0;--i)
{
var e=elements.item(i);
if(name==e.name&&value==e.value)e.click();
}
}
clickButtons("name_1",2);
<html>
<head>
</head>
<body>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_3" value="3" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_1" value="2" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
</body>
</html>
You should of course put correct names and value, I have also changed that.
I am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I have the following code where if I click a button, the corresponding div's display will be set to "block":
JavaScript:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
HTML:
<button id="Ideas" class="btn btn-info" onclick=toggle_visibility("one")>Ideas</button>
<button id="Problem" class="btn btn-info" onclick=toggle_visibility('two')>Problem </button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<br>
<section class="content">
<div id="one">
<h1>Ideas</h1>
<form method="post" action="/feedback">
{{ render_field(form.test_field, class_='form-control')}}
{{ render_field(form.title, class_='form-control') }}
{{ render_field(form.information, class_='form-control') }}
<input type = "submit" value = "submit" class="btn btn-info"/>
</form>
</div>
<div id="two" style="display:none">
<form method="post" action="/feedbackpb">
<h1>Problem</h1>
{{ render_field(form.test_field, class_='form-control')}}
{{ render_field(form.title, class_='form-control') }}
{{ render_field(form.information, class_='form-control') }}
<input type = "submit" value = "submit" class="btn btn-info"/>
</form>
</div>
</section>
However, what I need here is that on button click, all these DIVs display should be set to none except for the div corresponding with the button I click.
Rather than adding an inline onclick listener on each button, just replace it with a data attribute instead with the name of the corresponding id of the div that you want to hide as it's value. Also, you need to add a common class name for all your divs, say box so you can loop through them later.
After adding the attribute values, you can now add an event listener to all your buttons and pass their respective dataset value as a parameter for your toggle_visibility() function.
Now inside the function, assign all the box divs to a variable using querySelectorAll() and just simply loop through the list of divs, compare every single div's id with the data attribute value in the parameter and set it's display to block while setting the display for the rest of the divs to none.
Check this jsFiddle or the Code Snippet below for a practical example of the above:
var buttons = document.querySelectorAll('button[data-id]');
function toggle_visibility(id) {
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
if(box.id == id) {
box.style.display = "block";
} else {
box.style.display = "none";
}
})
}
buttons.forEach(btn => {
var x= function() { toggle_visibility(btn.dataset.id) };
btn.addEventListener("click", x);
});
<button id="Ideas" class="btn btn-info" data-id="one">Ideas</button>
<button id="Problem" class="btn btn-info" data-id="two">Problem</button>
<button id="Ideas2" class="btn btn-info" data-id="three">Ideas2</button>
<button id="Problem2" class="btn btn-info" data-id="four">Problem2</button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<hr>
<div class="box" id="one">
<h1>Ideas</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="two">
<h1>Problem</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="three">
<h1>Ideas2</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="four">
<h1>Problem2</h1>
<p>
Some Form Here
</p>
</div>
BUT WHAT IF I WANT TO DISPLAY ALL THE DIVs TOGETHER AGAIN?
You can just add another button to your list and add a separate click listener to the button that runs a function, say showAllPanels() that displays all the divs again as shown in this jsFiddle or in the Code Snippet below:
function toggle_visibility(id) {
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
if(box.id == id) {
box.style.display = "block";
} else {
box.style.display = "none";
}
})
}
var buttons = document.querySelectorAll('button[data-id]');
var showAll = document.getElementById("showAll");
buttons.forEach(btn => {
var x= function() { toggle_visibility(btn.dataset.id) };
btn.addEventListener("click", x);
});
function showAllPanels(){
var boxes = document.querySelectorAll("div.box");
boxes.forEach(box => {
box.style.display = "block";
});
}
showAll.addEventListener('click', showAllPanels);
<button id="Ideas" class="btn btn-info" data-id="one">Ideas</button>
<button id="Problem" class="btn btn-info" data-id="two">Problem</button>
<button id="Ideas2" class="btn btn-info" data-id="three">Ideas2</button>
<button id="Problem2" class="btn btn-info" data-id="four">Problem2</button>
<button id="Question" class="btn btn-info" onclick="window.location.href ='/'">Question</button>
<button id="Praise" class="btn btn-info" onclick="window.location.href ='/'">Praise</button>
<button id="showAll" class="btn btn-info">Show All</button>
<hr>
<div class="box" id="one">
<h1>Ideas</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="two">
<h1>Problem</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="three">
<h1>Ideas2</h1>
<p>
Some Form Here
</p>
</div>
<div class="box" id="four">
<h1>Problem2</h1>
<p>
Some Form Here
</p>
</div>
I have to following code:
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
</div>
</div>
and
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += allBtns[i].getAttribute("value");
});
}
Im trying to build a calculator in JS and the expected result was putting all the buttons value in the input, but it doesnt seem to work. Any help will be greatly appreciated.
You should be using this to access the current button within your click event:
var allBtns = document.querySelectorAll(".btn");
for (i = 0; i < allBtns.length; i++) {
allBtns[i].addEventListener("click", function() {
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
You should use the this keyword to access the clicked button and then get its value like this:
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
More about the this keyword:
In most cases, the value of this is determined by how a function is
called. It can't be set by assignment during execution, and it may be
different each time the function is called. ES5 introduced the bind
method to set the value of a function's this regardless of how it's
called, and ECMAScript 2015 introduced arrow functions whose this is
lexically scoped (it is set to the this value of the enclosing
execution context).
On a side note: You are missing a < in the first div tag in the code you have posted, that might also be causing you some issues if that wasn't a copy-paste omission.