Html button and values

Question

I am a backend developer so I need help with this front end part.

<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>

when the button is clicked its already triggering something I have in JS. But what is the best way to pass "entered_value" & "entered_valuetwo" & "selected_value" all 3 at the same time to the button and they get passed to the js function thereafter.

DCR · Accepted Answer · 2022-11-26 20:13:11Z

1

just add this to your js

document.getElementById('send-data').addEventListener('click',buttonFunction)
function buttonFunction(){

let enteredValue = document.getElementById('entered_value').value
let enteredValue2 = document.getElementById('entered_valuetwo').value
let selectValue = document.getElementById('selected_value').value

console.log(enteredValue,enteredValue2,selectValue)

}

<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>

answered Nov 26, 2022 at 20:13

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jannik Stach · Accepted Answer · 2022-11-26 20:22:16Z

0

If you want to put it into a databas i would use post request like this:

<form action="your url" method="Post">
  <input id="entered_value" type="number" name="entered_value">
    <input id="entered_valuetwo" type="text" name="entered_valuetwo">
    <select id="selected_value" name="selected_value"> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <button type="button" id="send-data">Click me</button>
</form>

But if you want to use it temporarylie use document.getElementby(𝗜𝗗) or better document.querySelector(#𝗜𝗗)

edited Nov 26, 2022 at 20:22

answered Nov 26, 2022 at 20:21

Jannik Stach

692 silver badges11 bronze badges

2 Comments

DCR Over a year ago

this doesn't make any sense. he wants the data in his js code

Jannik Stach Over a year ago

@DCR if he wants to save the file if you reload the website, this type of code is the best option for the front end

Collectives™ on Stack Overflow

Html button and values

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related