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

Question

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

我见过类似的问题，甚至出于某种原因仍然遵循答案，我只得到未定义而不是传递的数据。

下面是代码：

网址：

<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 属性处调用的函数不存在，它永远不会工作。

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

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

检查下面的片段。

 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}`) 
  } 

})