Is there a way to get this code to accept multiple ids?

Question

I'm trying to do a form with JavaScript where, after adding the required information and clicking the submit button, the users email account is opened with the information already laid out, so that they just have to send it. I haven't been able to get it to work since it includes multiple ids. Here's my code

function sendMail() { 
    var link 
        = "mailto: example@gmail.com" 
        + "?cc=mycc@gmail.com" 
        + "&subject=" 
        + encodeURIComponent("Ficha") 
        + "&body=" 
        + encodeURIComponent (
            document.querySelectorAll("#dead1, #dead2").value
        );

    window.location.href = link;
}

at first I tried using getElementById, but I was only able to get one of them and I have a total of 6. I think it might have something to do with the way the form is made, so here's a piece of the code from the form

<div class="row">
  <div class="col-25">
    <label for="dead4">Edad y cumpleaños;</label>
  </div>
  <div class="col-75">
    <input type="text" id="dead4" name="edad" 
       placeholder="Mayores de 18 años." minlength="2" required />
  </div>
</div>

this format repeats a few times, each with different ids. This format does open an email, but the body only says "undefined"

Also, https://stackoverflow.com/questions/24123707/getelementbyid-returning-value-only-for-first-element — Heretic Monkey, Jul 24 '22 at 00:44

mr rogers · Answer 1 · 2022-07-24T00:24:57.930

0

If the querySelectorAll returns, it gives you back an array of inputs, which doesn't have .value. So it makes sense that your current code doesn't work.

The following should work.

It first, grabs all the the inputs with querySelectorAll and map s through the elements returning the value from each input. Finally, join those with a comma.


function sendMail() { 
  const body = document.querySelectorAll('.col-75 input',(input) => input.value).join(", ");
  const link = "mailto: example@gmail.com" + \
             "?cc=mycc@gmail.com" + \
             "&subject=" + encodeURIComponent("Ficha") + \
             "&body=" body;
  window.location.href = link;
}

You could simplify this if the input s you're trying to target had their own class. If your form snippet looked like this:

<div class="row">
  <div class="col-25">
    <label for="dead4">Edad y cumpleaños;</label>
  </div>
  <div class="col-75">
    <input class="edad-input" type="text" id="dead4" name="edad" placeholder="Mayores de 18 años." minlength="2" required>
  </div>
</div>

Then you could instead make the query like this:

  const body = document.querySelectorAll('.edad-input',(input) => input.value).join(", ");

edited Jul 24 '22 at 00:24

answered Jul 23 '22 at 23:42

mr rogers

3,200
1
19
31

1

you can save a little code by realising that Array.from takes a second argument, which is map callback .. so `const body = Array.from(document.querySelectorAll('.col-75 input'), (input) => input.value).join(", ");` :p – Jaromanda X Jul 23 '22 at 23:55
TIL - thanks @JaromandaX I'll update the post. – mr rogers Jul 24 '22 at 00:21
@mrrogers sadly neither of these seem to work. it looks perfectly fine, but once i click the submit button it does nothing – suibaiter Jul 24 '22 at 03:34
well, you haven't shown how the `submit` is wired up. Maybe you could include that too. Maybe the problem isn't here anymore but has moved :D – mr rogers Aug 08 '22 at 06:22

Is there a way to get this code to accept multiple ids?

1 Answers1