Question

我是HTML5和javascript的新手。我想要一个警告框来显示数据（名字和姓氏）。必须从表单上的文本框中获取数据。我的代码如下，但警报框不起作用。

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>

</form>
<script>
function display_alert()
  {
   alert(fname +lname);
  }
</script>

<input type="button" onclick="display_alert()" value="Display alert box">

</body>
</html>

Answer 1

您需要为输入标签提供ID

   <form>
        <input id="a" type="text"/>
        <input id="b" type="text"/>
        <input type="button" onclick="display_alert();" />
    </form>

然后在你的js代码中使用它们：

<script lang="javascript">
    function display_alert() {
        var fn = document.getElementById('a');
        var ln = document.getElementById('b');
        alert(fn.value + ' ' + ln.value);
    }
</script>

Answer 2

您可以使用jQuery。

HTML：

First name: <input type="text" id='fname' /><br>
Last name: <input type="text"  id='lname'/><br>
<input type="button" onclick="display_alert();" value="Display alert box">

脚本：

function display_alert() {
    fname = $('#fname').val();
    lname = $('#lname').val();
    alert(fname+' '+lname);
}

demo

Jquery可能对将来有用。

Answer 3

您需要在脚本中使用getElementsByName函数获取值。

尝试使用下面的脚本更改脚本。

<script> 
  function display_alert()
  {
     var fname = document.getElementsByName("fname")[0].value;
     var lname = document.getElementsByName("lname")[0].value;
     alert(fname + ' ' + lname); 
  }
</script>

注意：仅供参考，HTML5与此无关。

html5基本警报和文本框

3 个答案: