Get multiple input value gives undefined value (getelementsbyname)

Question

0.00/5 (No votes)

See more:

I have three input fields and one button
1. text
2. time
3. text

BUTTON

These names are: array[]

I want their data to be put into one variable "inputValue" when the click was on the button.

But when I console.log it gives "undefined".

Somebody?

What I have tried:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Value undefined</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div>
        <h3>To Do </h3>
        <input type="text" id="myInput" name="array[]" placeholder="Write here...">
        <h3>It's time: </h3>
        <input type="time" id="myInput_time" name="array[]" placeholder="Write here...">
        <h3>Description: </h3>
        <input type="text" id="myInput_description" name="array[]" placeholder="Write here...">
        <button onclick="getInputs()" class="addBtn">ADD</button>
    </div>
    <script>
        function getInputs(){
            let inputValue = document.getElementsByName("array[]").value
            console.log(inputValue)
        }
    </script>
</body>
</html>

Posted 23-Jul-22 6:50am

folza

Updated 23-Jul-22 7:17am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2022-07-23T07:17:00

JavaScript

let inputValue = document.getElementsByName("array[]").value

You cannot do that. You have to enumerate the list of controls returned by getElementsByName and get the .value of each control separately, appending that value to your result string.

JavaScript

let inputs = document.getElementsByName("array[]");
inputs.forEach(c => inputValue = inputValue + ";" + c.value);

But, it would be better to scrap the "array[]" name for every input and just use individual names for each input, preferably names that describe what the input is for.