Passing form data to javascript

Question

So I have a problem, im looking to pass very basic user input into a javascript function for javascript to then process that information, I am really only looking to pass strings, however I just want to learn the concept. Below is how I would (THINK) you'd do this, but it doesn't work and I am not sure why. Could someone show me how to do this simply and properly.

<body>

<form id="frm1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction(fname, lname)" value="Submit">
</form>

<script>
function myFunction(fname, lname) {
  console.log(fname);
  console.log(lname);
}
</script>

</body>

hi, perhaps myFunction(this.form.fname.value, this.form.lname.value) — IronMan
– IronMan, Commented Feb 6, 2021 at 1:55
yeah. ` <input type="button" onclick="myFunction(this.form.fname.value, this.form.lname.value)" value="Submit">` works — D. Seah
– D. Seah, Commented Feb 6, 2021 at 2:04

summea · Accepted Answer · 2021-02-06 02:11:44Z

Here is an alternative approach that might help:

You can see part of the following code in action at this link: https://jsfiddle.net/m85yLoca/

<html>
<head></head>
<body>
<form id="frm1">
  First name: <input type="text" name="fname" id="fname"><br>
  Last name: <input type="text" name="lname" id="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myFunction() {
  let fname = document.querySelector('#fname').value;
  let lname = document.querySelector('#lname').value;
  console.log(fname);
  console.log(lname);
}
</script>
</body>

I made sure to add id="" settings for the fname and lname form inputs. This can help us with individually specifying what input we want to access for later use.

This approach uses document.querySelector() to pinpoint which form input you are wanting to access. I get the value of the input via the .value part at the end of the document.querySelector() lines and then assign these to individual variables fname and lname.

Then, you can access the individual fname and lname variables in your function.

ttt · Accepted Answer · 2021-02-06 02:16:47Z

This can be done by the following step.

getting the all input DOM value by document.querySelectorAll(). I didn't add id in each of the input. Instead, I select them all
select each one of them and assign the value to a variable.

<form id="frm1">
  First name: <input type="text" name="fname" ><br>
  Last name: <input type="text" name="lname" ><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myFunction() {
   const inputValues = document.querySelectorAll('#frm1 input')
   const fname = inputValues[0].value;
   const lname = inputValues[1].value;

   console.log(fname, lname);
}
</script>

If later on, you need to submit the data to server. Just add the onsumbit attribute.

<form onsubmit="sendData()">
   //input and other structure

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


<script>
function sendData(){
   //pack all your input value
   //make the ajax call here    
}
</script>

Collectives™ on Stack Overflow

Passing form data to javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related