Get HTML array in Javascript

Question

This is the HTML input:

<button id="addMore" class="button">+</button>

<div id="fieldList">
    <input type="text" name="gsm[]" placeholder="GSM" required>
</div>

JavaScript:

$(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    
    $("#fieldList").append("<input type='text' name='gsm[]' placeholder='GSM' required>");
    
    });
});

So when I press the + button, the new field will be added below the first one, and the values should be a array.

I have another button that runs this script:

$(function() {
  $("#sendSamtykke").click(function(e) {
    e.preventDefault();
    
    var gsm = document.getElementById("gsm");
    var gsm2 = "";
    
    for (i = 0; i < gsm.length; i++) {
        gsm2 += gsm[i] + "<br>";
    }
    
    alert(gsm2);
    
    });
});

The alert should print the first input value, and a second line with the second input value since there are two boxes added, but no alert is showing up. What am I doing wrong? I want the text in both if the input boxes to show up, how can I do this correctly?

Your elements do not have ids on them, so don't use getElementById. In any case, as the name suggests, that returns a single element, not multiple elements. Instead use getElementsByName or querySelectorAll that return multiple elements. — Heretic Monkey
– Heretic Monkey, Commented Dec 7, 2020 at 22:26

imvain2 · Accepted Answer · 2020-12-07 23:06:58Z

1

You are using getElementByID but no elements have that id, and that would be a bad idea anyway since you can't reuse IDs.

try this instead since you are using Jquery:

$(function() {
  $("#sendSamtykke").click(function(e) {
    e.preventDefault();

    var gsm2 = "";

    $("#fieldList input").each(function() {
      gsm2 += $(this).val() + "\n";
    });

    alert(gsm2);

  });


  $("#addMore").click(function(e) {
    e.preventDefault();

    $("#fieldList").append("<input type='text' name='gsm[]' placeholder='GSM' required>");

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addMore" class="button">+</button>

<div id="fieldList">
  <input type="text" name="gsm[]" placeholder="GSM" required>
</div>

<button id="sendSamtykke" class="button">get</button>

edited Dec 7, 2020 at 23:06

answered Dec 7, 2020 at 22:26

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Edward Over a year ago

while true the getElementById isnt grabbing anything. this still wont work because the name selectors arent unique and <br> isnt gonna do the trick on the alert. you need to use \n for newlines on an alert.

imvain2 Over a year ago

@Edward, I changed the new line character. However, using name='gsm[]` works just fine and adding an incremental value doesn't add anything extra.

Edward · Accepted Answer · 2020-12-07 22:51:45Z

First off, I'd say take a look at your console (cmd+option+J if you're using chrome on mac). I bet there's some errors in the console.

Next, each input needs a unique name. Each time you click the button a field is created with the same name so there is nothing for the loop to grab.

I created a JSHINT for you that I hope solves your issues.

Here's the code:

HTML

<button id="addMore" class="button">+</button>

<div id="fieldList">
    <input type="text" name="gsm[0]" placeholder="GSM" required>
</div>

<button id="sendSamtykke">
send
</button>

JS

    //set field to 0
    var gsm = 0;
  $("#addMore").click(function(e) {
    e.preventDefault();
    //increment on each
        gsm++;
    $("#fieldList").append("<input type='text' name='gsm["+gsm+"]' placeholder='GSM' required>");
    });
    
    //for when you submit 
$("#sendSamtykke").click(function(e) {
    e.preventDefault();
    //empty var  
    var gsm2 = "";
    //loop through each input
    //i is the index of each object in the array
    //obj is each object in the array
    $('input[name^="gsm"]').each(function(i,obj) {  
        var eachGsm = $(this).val();
      console.log(eachGsm);
      gsm2 += eachGsm +"\n";
    });
    alert(gsm2);
    });

You will notice I added a value to your initial gsm input: gsm[0] this will give us a base to increment more input fields.

Collectives™ on Stack Overflow

Get HTML array in Javascript

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related