Set HTML Form Input To JS Variable

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.

5 answers

  • answered 2019-10-15 16:29 Imaguest

    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 2019-10-15 16:30 ZPetsrillo

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

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

  • answered 2019-10-15 16:33 Harith Shah

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

    or, shorthand:

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

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

  • answered 2019-10-15 16:47 TDowling3

    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>
    

  • answered 2019-10-15 18:00 jjsecord

    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.