How to display user input from text field

Question

I have a form with a username, password and verification pin inputs. The user enters their username and password and clicks sign in, which will unhide a div that allows them to enter their verification pin. In the hidden div it shows up 'Hello this account is using a verification pin' however I would like to know if there is a way where I can make it say 'hello //username that was entered// this account is using a verification pin'. How would I achieve this?

The button that unhides the div

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">

The field where the user enters the username.

<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" 
id="steamAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>

The message that shows up in the hidden div

<div class="auth_modal_h1">Hello <span 
id="login_twofactorauth_message_entercode_accountname"></span>!</div>
<p>This account is currently using a verification pin.</p>
        </div>

Any help will be appreciated

Answer 1

This should do it:

var username = document.getElementById("steamAccountName").value
document.getElementById("login_twofactorauth_message_entercode_accountname").innerText = username

Answer 2

Of course it is possible. You can use the DOM. In your showDiv() function you could fetch the entered username with the dom. You could do something like:

function showDiv() {
    const username = document.getElementById("userLogin");
    const div = getElementById("login_twofactorauth_message_entercode_accountname")
    div.getElementsByTagName("p").innerText = "Hy " + username + ", welcome...";
}

This code should do the trick!

Hope this help!

Answer 3

This basically means that everything you add to the div is done with jQuery instead of having it mixed which can lead to confusion later.

1. Add id="username" to your input.
2. Add id="modaldiv" to your hello div

3. Remove everything in that div.

    var username = $("#username").val(); var divhtml = "Hello " + username + " <span id='login_twofactorauth_message_entercode_accountname'></span>! $("#modaldiv").html(divhtml); 

Answer 4

The following code will definitely get you started. It allows you to get the value that the user has entered in the input box with .value and add content to another div with .innerHTML .

 var displayUsername = function() { var username = document.getElementById('username').value if(username != '') { document.getElementById('message').innerHTML = 'Hello '+username+'!' } } 

 <input type="text" name="username" id="username"> <button class="clickMe" onclick="displayUsername()">Click ME!</button> <div id="message"></div> 

Answer 5

I added an id="feedback" to your html:

<div id="feedback" class="auth_modal_h1" style="display:none;">
    Hello <span id="login_twofactorauth_message_entercode_accountname"></span>!
    <p>This account is currently using a verification pin.</p>
</div>

then, I added this javascript:

<script>
    function showDiv() {
        document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
        document.getElementById("feedback").style.display = 'block';
    }
</script>