如何通过 JavaScript/HTML 中的文本框显示用户输入的文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8057288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 04:33:36  来源:igfitidea点击:

How to show text typed in by a user via text box in JavaScript/HTML

javascripthtmltextboxuser-inputalert

提问by Spartan Man

I currently have this within my JavaScript code:

我目前在我的 JavaScript 代码中有这个:

<html>
<head>
    <title>
        Form
    </title>

<script type="text/javascript">

var input = document.getElementById('textbox');
         function namet()
        {
        alert(textbox.value);
        }


    var input2 = document.getElementById('location');   
        function namet2()
        {
        alert(location.value);
        }
 </script> 


    </head>

 <body>

 Your name: 
 <input type="text" name="FirstName" id="textbox" <br><br/> 

 Your Address:
 <input type="text" name="address" id="location" <br></br>

 click:
 <input type="button" value="submit" onclick="namet()"/>

 </body>
 </html>

...and was looking for a way to gather what the user types within the text box and shows them as in a single alert box when they click on the "Click" button, sort of like a confirmation.

...并且正在寻找一种方法来收集用户在文本框中键入的内容,并在他们单击“单击”按钮时将它们显示在单个警报框中,有点像确认。

Additionally it would also be helpful to find out how to redirect them to a different page after clicking OK on the alert box.

此外,在警报框中单击“确定”后,了解如何将它们重定向到不同的页面也会很有帮助。

Thank you.

谢谢你。

回答by Geekswordsman

This is easily accomplished, and you almost had it! Just some misnamed variables...

这很容易完成,您几乎就拥有了!只是一些错误命名的变量...

Given the example you gave, change:

鉴于您给出的示例,请更改:

7 <script type="text/javascript">
8   
9   var input = document.getElementById('textbox');
10       function namet()
11      {
12      alert(textbox.value);
13      }
14      
15      
16  var input2 = document.getElementById('location');   
17      function namet2()
18      {
19      alert(location.value);
20      }
21 </script>

to:

到:

7 <script type="text/javascript">
8   
9   var textbox = document.getElementById('textbox');
10       function namet()
11      {
12      alert(textbox.value);
13      }
14      
15      
16  var location = document.getElementById('location');   
17      function namet2()
18      {
19      alert(location.value);
20      }
21 </script> 

Hope that helps.

希望有帮助。

--edit based on comment--

--根据评论编辑--

Turn the two individual functions into one, and go ahead and set the variables inside the function, as such:

将两个单独的函数合二为一,然后继续设置函数内部的变量,如下所示:

<script type="text/javascript">
function showConfirmationDialog() {
    var textbox = document.getElementById('textbox');
    var location = document.getElementById('location');
    alert(textbox.value + '\n' + location.value);
}
</script>

...

<input type="button" value="submit" onclick="showConfirmationDialog();" />

--re-edit: Like an idiot, forgot the .value... fixed.

--re-edit: 像个白痴一样,忘记了 .value... 已修复。

回答by Rashmi Ranjan Ransingh

Please use below code:

请使用以下代码:

 <script type="text/javascript">
    function namet() {
      var input = document.getElementById("textbox").value;
      var input2 = document.getElementById("location").value;   
      alert( "Name : " +input+" Location : " +input2);
      window.location.assign("anypage.html")
    }
 </script> 

回答by Adam Fordham

Use jquery

使用jQuery

$(document).ready(function(){
   $("form").submit(function() {
   var fname = $('#fname').val();
   var lname = $('#lname').val();
   alert("First Name:"fname\n"Last Name:"lname);
   });
});

and the form

和表格

<form>
<input type="text" name="fname" id="fname" />
<input type="text" name="lname" id="lname" />
<input type="submit" value="submit" />
</form>

Hope this helps

希望这可以帮助