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.

Answer 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>

Answer 2

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(ID) or better document.querySelector(#ID)

• DCR: this doesn't make any sense. he wants the data in his js code
• Jannik Stach: @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