HTML和Javascript:Form获胜't提交

HTML and Javascript: Form won't submit.

本文关键字：提交 获胜 Javascript Form HTML      更新时间：2023-09-26

所以我有一个非常基本的任务要完成，它是帮助我们学习一些非常基本的javascript。我们必须制作一个表单，当你点击一个按钮时，它会预成型一个javascript函数。我不明白为什么它不能完成这个功能。有人能对我的代码进行故障排除吗？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Order Page</title>
	</head>
	<body>
		<form>
			<label>First Name:<input type="text" id="fname" size="30" /><br><br>
			<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
			<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
			<button onclick="myFunction()">Send</button>
		</form>
	<script>
	function myFunction() {
		var fname;
		var lname;
		var num;
		lname = document.getElementById("lname").value;
		fname = document.getElementById("fname").value;
		num = document.getElementById("num").value;
		alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + Widgets)
	}
	</script>
	</body>
</html>

您应该在Widget周围加上引号，如下所示：

alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + "Widgets");

此外，您可能希望输入"；"最后也是。

快速提示给你，你可以通过打开开发人员控制台轻松捕捉这个错误

在谷歌Chrome中，按下[Ctrl+Shift+J]，您将看到错误显示。

希望这能有所帮助。

使用此代码再次试用！

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Order Page</title>
        <script type="text/javascript">
    function myFunction() {
        var fname;
        var lname;
        var num;
        lname = document.getElementById("lname").value;
        fname = document.getElementById("fname").value;
        num = document.getElementById("num").value;
        alert("Thanks, " +  fname + " " + lname + "for ordering" + num + " " + "Widgets")
    }
    </script>
    </head>
    <body>
        <form action="" name="from">
            <label>First Name:<input type="text" id="fname" size="30" /><br><br>
            <label>Last Name:<input type="text" id="lname" size="30" /><br><br>
            <label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
              <input type="button" onclick="myFunction()" value="Trial" />
        </form>


    </body>
</html>

您尝试过吗：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Order Page</title>
	</head>
	<body>
		<form>
			<label>First Name:</label><input type="text" id="fname" size="30" /><br><br>
			<label>Last Name:</label><input type="text" id="lname" size="30" /><br><br>
			<label>Number of Widgets:</label><input type="text" id="num" size="4" /><br><br>
			<input type="button" onclick="myFunction()" value="Send" />
		</form>
	<script>
	function myFunction() {
		var fname;
		var lname;
		var num;
		lname = document.getElementById("lname").value;
		fname = document.getElementById("fname").value;
		num = document.getElementById("num").value;
		alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " Widgets");
		document.document.getElementsByTagName("form")[0].submit();
	}
	</script>
	</body>
</html>

您将Widgets定义为变量，但假设它是一个字符串。

function myFunction() {
        var fname;
        var lname;
        var num;
        lname = document.getElementById("lname").value;
        fname = document.getElementById("fname").value;
        num = document.getElementById("num").value;
        alert("Thanks, "+fname + " " + lname + " for ordering " + num + " Widgets ")
}

你也没有提到button类型，所以添加了它。

<form>
    <label>First Name:<input type="text" id="fname" size="30" /><br><br>
    <label>Last Name:<input type="text" id="lname" size="30" /><br><br>
    <label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
    <button onclick="myFunction()" type ="button">Send</button>
</form>

请查看此JSFIDDLE进行演示。希望这是有用的

var btn = document.getElementById("btn");
btn.onclick = function() {
        var fname;
        var lname;
        var num;
        lname = document.getElementById("lname").value;
        fname = document.getElementById("fname").value;
        num = document.getElementById("num").value;
        alert("Thanks, " +  fname + " " + lname + "for ordering" + num + " " + "Widgets")
};
<form onsubmit="return false;">
	<label>First Name:<input type="text" id="fname" size="30" />
    <br/><br/>
	<label>Last Name:<input type="text" id="lname" size="30" />
    <br/><br/>
	<label>Number of Widgets:<input type="text" id="num" size="4" />
    <br/><br/>
	<button id="btn">Send</button>
</form>

相关文章：