Unable to pass values to a function on click of a button

Question

I am a beginner in javascript and was just trying to implement a simple form. However, I am unable to submit it since the values that are entered in the textbox are not getting passed further to the function that I call on clicking the submit button.

I have seen similar questions and even followed the answers still for some reason I only get undefined instead of the data passed.

Below is the code:

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

Here is a fiddle working:

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

There were some errors: Confusion with quotation marks:

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

There is no need to pass the name fields:

onclick="submit()"

You should get the field values and put it in the variables defined:

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

Answer 2

Other way to do this is use add.event.listener and 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}`) 
  } 

})

Answer 3

Another way of doing this is by adding onsubmit callback to your <form> element, and changing your <input> type to submit. You don't have to add in individual ids for all of your input, instead you can use event.target[INPUT_NAME] to get your input element, and get the value of that element with INPUT.value.

Working sample code :

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 4

Here I fixed that:

<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 5

The function called at the onclick attribute for the input does not exist and it will never work.

What you did was almost correct. You added the click event for the submit button that calls a function. That function will always (i think so) have one parameter (Event type) and not those added by you.

In order to retrieve the values for the inputs, you need to retrieve them in that function.

Check the snippet below.

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>