Html button and values-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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(