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.

Yes, value attribute reflects the text user enters to the input element. But, value as well as innerHTML are values, they will not change automatically. That means that the content of #BookingPhone changes only when you're actually clicking on the input element. (After you've fixed the code according to what Imaguest has answered.) Probably you want to use input (for realtime copying) or change (after finished entering) event instead of click here. — Teemu
– Teemu, Commented Oct 15, 2019 at 16:33

Imaguest · Accepted Answer · 2019-10-15 16:29:10Z

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.

answered Oct 15, 2019 at 16:29

Imaguest

3793 silver badges10 bronze badges

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

Comments

ZPetsrillo · Accepted Answer · 2019-10-15 16:30:54Z

1

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

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

answered Oct 15, 2019 at 16:30

ZPetsrillo

263 bronze badges

1 Comment

Teemu Over a year ago

Nope, input is an empty element, and can't contain HTML, it does not have innerText property.

Harith Shah · Accepted Answer · 2019-10-15 16:33:45Z

0

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

or, shorthand:

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

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

answered Oct 15, 2019 at 16:33

Harith Shah

1

Comments

TDowling3 · Accepted Answer · 2019-10-15 16:47:27Z

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>

jjsecord · Accepted Answer · 2019-10-15 18:00:23Z

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.

Collectives™ on Stack Overflow

Set HTML Form Input To JS Variable

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related