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

Sven · Accepted Answer · 2017-08-06 01:11:38Z

1

This should do it:

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

answered Aug 6, 2017 at 1:11

Sven

5,27532 silver badges53 bronze badges

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

2 Comments

Ashley Blyth Over a year ago

Hi sorry for the dumb question but where do I place this code?

Sven Over a year ago

In the same function block as where you unhide the verification pin div.

Difster · Accepted Answer · 2017-08-06 01:15:57Z

1

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.

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

Remove everything in that div.

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

answered Aug 6, 2017 at 1:15

Difster

3,2802 gold badges24 silver badges32 bronze badges

Comments

Ivan · Accepted Answer · 2017-08-06 01:17:37Z

1

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>

answered Aug 6, 2017 at 1:17

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

Comments

Charles-olivier Demers · Accepted Answer · 2017-08-06 01:18:58Z

1

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!

edited Aug 6, 2017 at 1:18

answered Aug 6, 2017 at 1:13

Charles-olivier Demers

1,0489 silver badges26 bronze badges

Comments

MrCoincidence · Accepted Answer · 2017-08-06 01:24:57Z

0

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>

answered Aug 6, 2017 at 1:24

MrCoincidence

1175 bronze badges

Collectives™ on Stack Overflow

How to display user input from text field

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related