Set HTML Form Input To JS Variable

Question

I want to read user input into a form back to them, sort of a confirmation before they send it in. I have some text elements on the page with their corresponding IDs. I would think that I just need to set the variables equal to the values of the input field, but when the function runs it just returns blank.

I have a function that sets the variables to the .value of that form input, but where I might be getting hung up is that there is no default value on the input field, I would think that the value is set after the user inputs something.

Example user inputs "John Doe" into field shouldn't that change the value of that field to "John Doe"?

var Phone;

document.getElementById('confirm-details').onclick = ConfirmDetails()

function ConfirmDetails() {
    // Set variable to form input
    Phone = document.getElementById("InputPhone").value;
    // Change text element to variable
    document.getElementById("BookingPhone").innerHTML = Phone;
};

Maybe I'm just confused about the .value attribute but I thought that the value on an input field should be what the user inputted.

Answer 1

This row

document.getElementById('confirm-details').onclick = ConfirmDetails()

should be

document.getElementById('confirm-details').onclick = ConfirmDetails

You don't want that document.getElementById('confirm-details').onclick references the result of the function ConfirmDetails (here void) but the function itself.

Answer 2

Instead of using.value, you need to be using.innerText

Phone = document.getElementById("InputPhone").innerText;

Answer 3

object.oninput = function(){
    ConfirmDetails();
};

or, shorthand:

object.oninput = function(){ConfirmDetails()};

You should also use document.getElementById().innerHTML() to get the text

Answer 4

This worked just fine for me. I appreciate all the answers!

<script>
document.getElementById("confirm-details").addEventListener("click", function(){
document.getElementById("BookingName").innerHTML = document.getElementById("InputName").value;
document.getElementById("BookingEmail").innerHTML = document.getElementById("InputEmail").value;
document.getElementById("BookingPhone").innerHTML = document.getElementById("InputPhone").value;
document.getElementById("InputDay").innerHTML = document.getElementById("BookingDay").value;
document.getElementById("InputTime").innerHTML = document.getElementById("BookingTime").value;
document.getElementById("InputService").innerHTML = document.getElementById("BookingService").value;
document.getElementById("InputExtra").innerHTML = document.getElementById("BookingExtra").value;
});

</script>

Answer 5

Here is what I believe you are trying to accomplish:

 function confirmDetails() { // Set variable to form input var phone = document.getElementById("inputPhone").value; var confirmMsg = 'is ' + phone + ' correct?' + '<br> <input type="button" value="Yes" onclick="confirmed()"> '; // Change text element to variable document.getElementById("bookingPhone").innerHTML = confirmMsg; }; function confirmed(){ alert('confirmed'); }

 <input id="inputPhone" type="text" placeholder="input here"> <input type="button" onclick="confirmDetails()" value="Submit"> <br> <span id="bookingPhone"></span>

When the button is clicked, it runs the function confirmDetails and sets the variable phone to the user's input. I set variable confirmMsg to the confirm message which reads back the user's input. I used a span with a unique ID and sent the variable confirmMsg to it.

I put the confirm message into a variable to make it more versatile, should you need it elsewhere.