[英]How to display user input from text field
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.
用户输入用户名和密码,然后单击登录,这将取消隐藏div,从而允许他们输入验证码。 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'.
在隐藏的div中,它显示“您好,此帐户正在使用验证码”,但是我想知道是否有一种方法可以使它说“您好//输入的用户名//此帐户正在使用验证码”销'。 How would I achieve this?
我将如何实现?
The button that unhides the div 取消隐藏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> <br>
The message that shows up in the hidden div 隐藏的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 任何帮助将不胜感激
This should do it: 应该这样做:
var username = document.getElementById("steamAccountName").value
document.getElementById("login_twofactorauth_message_entercode_accountname").innerText = username
Of course it is possible. 当然可以。 You can use the DOM.
您可以使用DOM。 In your
showDiv() function
you could fetch the entered username with the dom. 在
showDiv() function
您可以使用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! 希望有帮助!
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. 这基本上意味着您添加到div的所有内容都是使用jQuery完成的,而不是将其混合在一起的,这可能会在以后引起混乱。
id="username"
to your input. id="username"
添加到您的输入中。 id="modaldiv"
to your hello div id="modaldiv"
添加到您的hello div Remove everything in that div. 删除该div中的所有内容。
var username = $("#username").val(); var divhtml = "Hello " + username + " <span id='login_twofactorauth_message_entercode_accountname'></span>! $("#modaldiv").html(divhtml);
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
. 它允许您使用
.value
获取用户在输入框中输入的值,并使用.innerHTML
将内容添加到另一个div中。
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>
I added an id="feedback" to your html: 我在您的html中添加了id =“ feedback”:
<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: 然后,我添加了以下javascript:
<script>
function showDiv() {
document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
document.getElementById("feedback").style.display = 'block';
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.