当前位置： 文江博客话题详情

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

发布于 2024-12-14 06:40:50 字数 900 浏览 3 评论 0原文

我目前的 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>

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

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

谢谢。

原文

I currently have this within my JavaScript code:

<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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

暖树树初阳… 2024-12-21 06:40:50

这很容易完成，而且您几乎已经完成了！只是一些命名错误的变量...

根据您给出的示例，将：更改

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>

为：

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>

希望有帮助。

--根据注释进行编辑--

将两个单独的函数合而为一，然后继续在函数内设置变量，如下所示：

<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：像个白痴一样，忘记了 .value... 已修复。

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.

回复 原文
痴者 2024-12-21 06:40:50

请使用下面的代码：

 <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>

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>
回复 原文
叹倦 2024-12-21 06:40:50

使用 jquery

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

和表单

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

希望这有帮助

Use 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

回复 原文
~没有更多了~

关于作者

白芷

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文