Question

我是javascript的初学者，只是想实现一种简单的形式。但是，我无法提交它，因为在文本框中输入的值没有进一步传递给我单击“提交”按钮时调用的函数。

我见过类似的问题，甚至由于某些原因我仍然遵循答案，因为我只是不确定，而不是传递的数据。

下面是代码：

HTML：

<form >
    First Name:
    <input 
        type="text" 
        id="txtfirstName" 
    />

    Second Name:
    <input 
        type="text" 
        id="txtsecondName" 
    />

    User Name:
    <input 
        type="text" 
        id="txtuserName"
    />

    Email:
    <input 
        type="text" 
        id="txtemail"
    />

    Password:
    <input 
        type="password" 
        id="txtpassword" 
    />

    <input 
        type="button" 
        id= "btnsubmit" 
        value="SUBMIT" 
        onclick="submit("name","surname","user","mail","word")" 
    />
</form>

<script>
var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");

submitButton.onclick = function submit(fname,sname,uname,email,password) {
    confirm("Are you sure you want to submit the form?"); 

    if(confirm) {
        alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n" 
         + email + "\n" + password ) 
    } 
}
</script>

Answer 1

在输入的onclick属性处调用的函数不存在，它将永远无法工作。

您所做的几乎是正确的。您为调用函数的提交按钮添加了click事件。该函数将始终（我认为如此）只有一个参数（事件类型），而不是您添加的参数。

为了检索输入的值，您需要在该函数中检索它们。

检查下面的代码段。

var submitButton = document.getElementById("btnsubmit");

submitButton.onclick = function submit() {
    confirm("Are you sure you want to submit the form?"); 

    if(confirm) {
        var fname = document.getElementById('txtfirstName').value;
        var sname = document.getElementById('txtsecondName').value;
        var uname = document.getElementById('txtuserName').value;
        var email = document.getElementById('txtemail').value;
        var password = document.getElementById('txtpassword').value;
        alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n" 
         + email + "\n" + password ) 
    } 
}

<form >
    First Name:
    <input 
        type="text" 
        id="txtfirstName" 
    />

    Second Name:
    <input 
        type="text" 
        id="txtsecondName" 
    />

    User Name:
    <input 
        type="text" 
        id="txtuserName"
    />

    Email:
    <input 
        type="text" 
        id="txtemail"
    />

    Password:
    <input 
        type="password" 
        id="txtpassword" 
    />

    <input 
        type="button" 
        id= "btnsubmit" 
        value="SUBMIT" 
    />
</form>

Answer 2

我在这里解决了这个问题

<form >
    First Name:
    <input 
        type="text" 
        id="txtfirstName" 
    />

    Second Name:
    <input 
        type="text" 
        id="txtsecondName" 
    />

    User Name:
    <input 
        type="text" 
        id="txtuserName"
    />

    Email:
    <input 
        type="text" 
        id="txtemail"
    />

    Password:
    <input 
        type="password" 
        id="txtpassword" 
    />

    <input 
        type="button" 
        id= "btnsubmit" 
        value="SUBMIT" 
    />
</form>

<script>
var submitButton = document.getElementById("btnsubmit");

submitButton.onclick = function () {
    var fname = document.getElementById("txtfirstname").value;
    var sname = document.getElementById("txtsecondname").value;
    var uname = document.getElementById("txtusername").value;
    var email = document.getElementById("txtemail").value;
    var password = document.getElementById("password").value;

    confirm("Are you sure you want to submit the form?"); 

    if(confirm) {
        alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n" 
         + email + "\n" + password ) 
    } 
}
</script>

Answer 3

这是一个小提琴作品：

https://jsfiddle.net/Lk9t0bxj/

<form>
    First Name:
    <input 
        type="text" 
        id="txtfirstName" 
    />

    Second Name:1
    <input 
        type="text" 
        id="txtsecondName" 
    />

    User Name:
    <input 
        type="text" 
        id="txtuserName"
    />

    Email:
    <input 
        type="text" 
        id="txtemail"
    />

    Password:
    <input 
        type="password" 
        id="txtpassword" 
    />

    <input 
        type="button" 
        id= "btnsubmit" 
        value="SUBMIT" 
        onclick="submit()" 
    />
</form>

Javascript：

var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");

submitButton.onclick = function submit() {
    confirm("Are you sure you want to submit the form?"); 

    if(confirm) {
            fname = document.getElementById('txtfirstName').value;
            sname = document.getElementById('txtsecondName').value;
            uname = document.getElementById('txtuserName').value;
            email = document.getElementById('txtemail').value;
            password = document.getElementById('txtpassword').value;

        alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n" 
         + email + "\n" + password ) 
    } 
}

有一些错误：引号引起混淆：

onclick="submit("name","surname","user","mail","word")"

无需传递名称字段：

onclick="submit()"

您应该获取字段值并将其放入定义的变量中

fname = document.getElementById('txtfirstName').value;

Answer 4

另一种方法是将onsubmit回调添加到<form>元素，并将<input>类型更改为submit。您不必为所有输入都添加单独的ID，而可以使用event.target[INPUT_NAME]来获取输入元素，并使用INPUT.value来获取该元素的值。

工作示例代码：

const handleOnSubmit = event => {
		event.preventDefault();
		const { fname, sname, uname, email, password } = event.target;
		confirm("Are you sure you want to submit the form?");
		if (confirm) {
			alert(
				"Below is the data entered by you:" +
					"\n" +
					fname.value +
					"\n" +
					sname.value +
					"\n" +
					uname.value +
					"\n" +
					email.value +
					"\n" +
					password.value
			);
		}
	};

<form onsubmit="handleOnSubmit(event)">
	First Name:
	<input type="text" name="fname" />

	Second Name:
	<input type="text" name="sname" />

	User Name:
	<input type="text" name="uname" />

	Email:
	<input type="text" name="email" />

	Password:
	<input type="password" name="password" />

	<input type="submit" />
</form>

Answer 5

执行此操作的其他方法是使用add.event.listener和template literals。

var submitButton = document.getElementById("btnsubmit");


submitButton.addEventListener("click", function(e){
  e.preventDefault()
  var fname = document.getElementById("txtfirstName").value;
  var sname = document.getElementById("txtsecondName").value;
  var uname = document.getElementById("txtuserName").value;
  var email = document.getElementById("txtemail").value;
  var password = document.getElementById("txtpassword").value;

  confirm("Are you sure you want to submit the form?"); 

  if(confirm) {
      alert(`Below is the data entered by you: \n ${fname} \n ${sname} \n ${uname} \n ${email} \n ${password}`) 
  } 

})

单击按钮无法将值传递给函数

5 个答案: