Question

我正在尝试获取一个警告窗口，以显示用户点击“提交”后输入的名字和姓氏。我正在尝试使用javascript中的方法执行此操作，但在用户单击按钮后我无法显示它。

这是我的代码：

<html>
<head>
    <meta charset = 'utf-8'>
    <title>Form</title>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() { //get first name
            return document.getElementById("first_name").value;
        }
        function getSecondName()    { //get last name
            return document.getElementById("last_name").value;
        }
        function display()  { //get the names and display them
            firstName = getFirstName();
            lastName = getLastName();
            window.alert(firstName + lastName);
        }
        document.getElementById("Submit").onclick = display();
    </script>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' /></p>
    </form>
</body>
</html>

Answer 1

http://jsfiddle.net/wqymjL32/

<form id='form' method = 'post'>
    <p> First Name: <input type='text' id = "first_name"/></p>
    <p> Last Name: <input type='text' id = "last_name"/> </p>
    <p><input id ="submit" type = "button" onclick="display()" value='clickme'/></p>
</form>

轻微更改html，以便将onclick属性/事件添加到提交按钮。

var firstName; //first name
var lastName; //last name
function getFirstName() {
    return document.getElementById("first_name").value;
}
function getSecondName() {
    return document.getElementById("last_name").value;
}
function display() {
    firstName = getFirstName();
    lastName = getSecondName();
    window.alert(firstName + lastName);
    document.getElementById("form").submit();

}

稍微更改javascript以调用getSecondName而不是getLastName

Answer 2

试试这个

    <html>
<head>
    <meta charset = 'utf-8'>
    <title>Form</title>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() {   //when this function is called, I retrieve the values and display them
            return document.getElementById("first_name").value;
        }
        function getSecondName()    {
            return document.getElementById("last_name").value;
        }
        function display()  {
            firstName = getFirstName();
            lastName = getSecondName();
            window.alert(firstName + lastName);
        }

    </script>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' onclick="display()" /></p>
    </form>
</body>
</html>

Answer 3

将您的script移到HTML后面，然后更改处理程序以获取函数参考。您的姓氏功能也名为getSecondName，但您拨打getLastName

<html>
    <head>
    <meta charset = 'utf-8'>
    <title>Form</title>

</head>
<body>
    <form id='form' method = 'post'>
        <p> First Name: <input type='text' id = "first_name"/></p>
        <p> Last Name: <input type='text' id = "last_name"/> </p>
        <p><input id ="Submit" type = "button" value = 'clickme' /></p>
    </form>
    <script type = 'text/javascript'>
        var firstName; //first name
        var lastName; //last name
        function getFirstName() { //get first name
            return document.getElementById("first_name").value;
        }
        function getSecondName()    { //get last name
            return document.getElementById("last_name").value;
        }
        function display()  { //get the names and display them
            firstName = getFirstName();
            lastName = getSecondName();
            window.alert(firstName + lastName);
        }
        document.getElementById("Submit").onclick = display;
    </script>
</body>
</html>

演示：http://jsfiddle.net/zvm0zst4/

Answer 4

您只需获取输入值即可。 Jsfiddle和下面的代码; http://jsfiddle.net/zvdwkL6o/

document.getElementById("Submit").addEventListener("click", function(e){

e.preventDefault(); // to prevent form from submiting
fn = document.getElementById("first_name").value;
ln = document.getElementById("last_name").value;
alert(fn + " " + ln);

});

Answer 5

您的代码无法正常工作的主要原因是浏览器处理HTML文档中标记的顺序。

在您的情况下，浏览器首先执行javascript代码，然后才会呈现HTML表单及其输入。因此，如果您查看Chrome开发者控制台，就会发现错误：Uncaught TypeError: Cannot set property 'onclick' of null (line 19)。抛出错误是因为对document.getElementById('Submit')的调用返回null。

要解决您的问题，您可以将脚本标记移动到HTML代码下方，如上所示，或者您可以在窗口或正文加载后绑定onclick处理程序：

window.onload = function() { document.getElementById("Submit").onclick = display; }

PS。正如上面提到的juvian，你应该将函数本身分配给onclick处理程序，而不是函数返回的值，就像在最初的例子中那样（display而不是display()）。

Answer 6

<!doctype html>
<html>
	<head>
		<title>Show first name</title>
		<script type="text/javascript">
		function shw(){
			var rev,str,l,i;
			str=document.getElementById("name").value;
			l=str.length;
			for(i=0;i<=l;i++){
				if(str.charAt(i)==' ')
				break;
				else
			document.write(str.charAt(i));
			}
		}
		</script>
		<body>
			<label> Enter Name: </label>
			<input type="text" id="name"/>
			<input type="submit" value="Display" onClick="shw()"/>
		</body>
</html>

html / javascript如何用按钮点击方法显示用户输入？

6 个答案: