I'm having trouble getting an array of inputs from a single form field

Question

I'm trying to get an array of strings from an input field and clear the field every time keyup(enter) (It's an exercise, i'll snip the full challenge in: 1. Single Message

Create a message input where you can type any message. When you press Enter, the message should appear inside a "messages" box and the input should clear

Multiple Messages

When creating a new message, instead of replacing the message inside the "messages" box, add the new message at the bottom of the last one).

I'm getting main.js:9 Uncaught TypeError: Cannot read property 'textContent' of null, i've tried value and get the same thing, i've tried just by targeting the id and get undefined or null.

I'm new to Jquery, i've read through the documentation, but i've tried a number of different methods and nothing seems to be working.

here is my HTML

    <body>
        <div class="container-fluid">
            <div class="container">
            <form id="msg-input">
                <input type="text" placeholder="sample text" id="input-test" action="submit">
            </form> 
            </div>
            <div class="alert alert-info" id="alert-primary" role="alert">
                msg goes here
            </div>

Here is my JQuery, i've tried everything I could think of including - ading .value() .textcontent(), etc I just need the input to be saved into var array on submit of input box and box reset

$('#alert-primary').hide()// hides first msg initially

$('#msg-input').on('submit', function(e) { //on submit prevents refresh
    e.preventDefault(); 

$('#msg-input').each(function() { //loops through each ipnut 
    var messages = []; // initializes var messages
        messages.push((document.getElementById("#input-test").textContent()));// pushes string to messages array
$('#msg-input').reset();     //resets input field
    });
 console.log(messages); //logs messages
})

I'd kind of like a message text box (intercom, fb etc.. ). but for now like to be able to store the inputs. i'll generate the messages later. the objective here is to use javascript.

[Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Apr 11 '19 at 22:23
`$('#msg-input').each()` doesn't make sense, as ids are expected to be unique. — Taplar, Apr 11 '19 at 22:23
after every entry i need to clear the input and save to array so i can generate a message box in the html from my jquery — Iurii Kogan, Apr 11 '19 at 22:29
@Taplar oh does .each mean .each element with that ID? sorry i'm very new to jquery — Iurii Kogan, Apr 11 '19 at 22:30
Yes, that's what `each()` does. It iterates over the found elements. — Taplar, Apr 11 '19 at 22:31
@Taplar changed to .on('click', function ()) - getting messages is undefined. — Iurii Kogan, Apr 11 '19 at 22:32
sorry man, i don't mean to ask you to debug my code for me. i'm just stuck... — Iurii Kogan, Apr 11 '19 at 22:32
So, am I understanding correctly that the goal here is a running messages collection? Each time you enter a new message, add it to the other messages, and clear the input? Edit: Don't worry about the debugging. That the majority of what we do here, ^_^ — Taplar, Apr 11 '19 at 22:33
Take a look at the answer below then. It doesn't have the clearing of the field, but it is showing how you could collect the values. — Taplar, Apr 11 '19 at 22:34

score 0 · Answer 1 · answered Apr 11 '19 at 22:30

0

Try something like this:

var messages = []; // Take care to not clean your array in "each" execution

$('#msg-input input').each(function() { // Get each input inside forms
    messages.push(this.value); // Get value of this (input)
});

answered Apr 11 '19 at 22:30

LuizMoratelli

94
11

I ended up using this: – Iurii Kogan Apr 11 '19 at 23:34
1

$('#msg-input').on('submit', function (e) { console.log(e); e.preventDefault(); //on submit prevents refresh $('#alert.primary').show('slow'); messages.push($('#input-test').val()); console.log(messages); $('#input-test').val(''); }); – Iurii Kogan Apr 11 '19 at 23:34
@taplar Thanks for your help!! – Iurii Kogan Apr 11 '19 at 23:34

I'm having trouble getting an array of inputs from a single form field

1 Answers1