Get value from multiple input type=“text” with same name

Question

So I have a fieldset that looks like this:

<fieldset><b>GSM</b>
    <button id="addMore" class="button">+</button>

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

</fieldset>

And the JavaScript for + button:

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

Now let's say I add total for 5 text input - then I want to get the value for each of them in 5 different lines.

I have tried something like this:

$(function() {
  $("#sendSamtykke").click(function(e) {
    e.preventDefault();
    
    var mail = "mailto:?" + 
    "subject=MAIL GSM&" +
    "body=" +

    "This is a random line of text I want in the mail." + newLine + newLine +
    
    $('input[name^="gsm[]"]').each(function(i,obj) {  
        var eachGsm = $(this).val();
        console.log("each: " + eachGsm);
        console.log("The current line is '" + eachGsm + "' in total")
    });
    
    "This line I also want in the email." +
    
    "This is the last line in the email."

    ""
    ;  
    
    var mlink = document.createElement('a');
    mlink.setAttribute('href', mail);
    mlink.click();
    
    });
});

The output I want is:

This is a random line of text I want in the mail

The current line is (first text input value here) in total. -> new line
The current line is (second text input value here) in total. -> new line
The current line is (third text input value here) in total. -> new line

This line I also want in the email.

This is the last line in the email

But the output I get is: [object Object]

Cant figure out what I am doing wrong here. Can someone help me to the correct path?

Answer 1

You need to append string properly as this:

$("#log-values").click(function() {
    var newLine = '\n';
    var mail = "mailto:?" + 
    "subject=MAIL GSM&" +
    "body=" +

    "This is a random line of text I want in the mail." + newLine + newLine;
    
    var emails = '';
    $('input[name^="gsm[]"]').each(function(i,obj) {  
        var eachGsm = $(this).val();
        emails += "The current line is '" + eachGsm + "' in total" + newLine;
    });
    
    mail += emails + newLine +
    
    "This line I also want in the email." + newLine +
    
    "This is the last line in the email."
    ;  
   
    console.log(mail)

   })

 $(function() { $("#addMore").click(function(e) { e.preventDefault(); $("#fieldList").append("<input type='text' placeholder='GSM' name='gsm[]' required'>"); }); $("#log-values").click(function() { var newLine = '\n'; var mail = "mailto:?" + "subject=MAIL GSM&" + "body=" + "This is a random line of text I want in the mail." + newLine + newLine; var emails = ''; $('input[name^="gsm[]"]').each(function(i,obj) { var eachGsm = $(this).val(); emails += "The current line is '" + eachGsm + "' in total" + newLine; }); mail += emails + newLine + "This line I also want in the email." + newLine + "This is the last line in the email."; console.log(mail) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset><b>GSM</b> <button id="addMore" class="button">+</button> <div id="fieldList"> <input type="text" name="gsm[]" placeholder="GSM" required> </div> </fieldset> <button id="log-values">Log input values</button>

Answer 2

You are concatenating string with a piece of code which is giving [object][object]

You can use one variable like emailBodyText as i have shown in the example below. Append as many strings you would like to then use the same variable as the email body

 $(function() { $("#addMore").click(function(e) { e.preventDefault(); $("#fieldList").append("<input type='text' placeholder='GSM' name='gsm[]' required'>"); }); }); $(function() { $("#getValues").click(function(e) { e.preventDefault(); var emailBodyText = ""; emailBodyText = "This is a random line of text I want in the mail." + "\n" + "\n" $('input[name^="gsm[]"]').each(function(i,obj) { var eachGsm = $(this).val(); //console.log("each: " + eachGsm); emailBodyText = emailBodyText + "The current line is '" + eachGsm + "' in total\n" }); emailBodyText = emailBodyText + "\nThis line I also want in the email. \n\n" + "This is the last line in the email." var mail = "mailto:?" + "subject=MAIL GSM&" + "body=" + emailBodyText; console.log (emailBodyText) //var mlink = document.createElement('a'); //mlink.setAttribute('href', mail); //mlink.click(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <fieldset><b>GSM</b> <button id="addMore" class="button">+</button> <div id="fieldList"> <input type="text" name="gsm[]" placeholder="GSM" required> </div> <button id="getValues" class="button">Get Value</button> </fieldset>