How can I print multiple vars in alert box in JS

Question

I'm newbie in JS and trying to show a alert box when user enters his/her "name-mail-message" in my html page. That alert box should contain information given by user. This is what I did;

<button type="submit" onclick="test()" class="form-control" id="submit-button" name="submit">Send</button>
                        <script type="text/javascript">
                            function test() {
                                let inputName = document.getElementById("cf-name");
                                let inputMail = document.getElementById("cf-mail");
                                let inputMessage = document.getElementById("cf-message");

                                let total = (inputName.value);
                                alert(inputName.value + '\n' + inputMessage.value);
                            }
                        </script>

When I run it I get this output.

How can I fix this issue? If you can help I would be appreciated.

TechySharnav · Answer 1 · 2021-06-28T07:00:48.130

3

You need to first get the .value for each input, instead of applying it for entire alert message.

<input type="text" placeholder="Name" id="cf-name">
<input type="email" placeholder="Email" id="cf-mail">
<textarea placeholder="Msg" id="cf-message"></textarea>

<button type="submit" onclick="test()" class="form-control" id="submit-button" name="submit">Send</button>
<script type="text/javascript">
  function test() {
    let inputName = document.getElementById("cf-name");
    let inputMail = document.getElementById("cf-mail");
    let inputMessage = document.getElementById("cf-message");

    let total = (inputName.value + '\n' + inputMail.value + '\n' + inputMessage.value);
    alert(total);
  }
</script>

edited Jun 28 '21 at 07:00

answered Jun 28 '21 at 06:41

TechySharnav

4,869
2
11
29

The problem is name is defined as text and mail is defined as "mail" and message is defined as textarea in my code. When I try to do it like urs it gives me an error. It says "Could not read source map for file:///C:/Users/ayber/Desktop/Template/js/bootstrap.min.js: ENOENT: no such file or directory, open 'c:\Users\ayber\Desktop\Template\js\bootstrap.min.js.map'" – Roxox Jun 28 '21 at 06:51
@Roxox I have updated the answer with proper `input` types. As for the `ENOENT` error, check [this](https://stackoverflow.com/a/50345566/9256189) – TechySharnav Jun 28 '21 at 07:06

score 2 · Answer 2 · answered Jun 28 '21 at 06:39

2

You're adding up the DOM nodes. I would suppose you want to sum the value of those elements instead? If that's the case, access their value and store it in the variables as such:

function test() {
    const inputName = document.getElementById("cf-name").value;
    const inputMail = document.getElementById("cf-mail").value;
    const inputMessage = document.getElementById("cf-message").value;

    const total = (inputName + '\n' + inputMail + '\n' + inputMessage);
    alert(total);
}

Some additional notes:

Use const instead of let, since those variables are not reassigned later in your code
Avoid using alert(). Use console.log() instead, and open your browser dev tools to check the output

answered Jun 28 '21 at 06:39

Terry

63,248
15
96
118

The problem is name is defined as text and mail is defined as "mail" and message is defined as textarea in my code. When I try to do it like urs it gives me an error. It says "Could not read source map for file:///C:/Users/ayber/Desktop/Template/js/bootstrap.min.js: ENOENT: no such file or directory, open 'c:\Users\ayber\Desktop\Template\js\bootstrap.min.js.map'" – Roxox Jun 28 '21 at 06:51
@Roxox It doesn't matter: the `value` property is native to all HTML input/select/textarea elements. The error you get is _not_ related to the code change but something with your bootstrap code. – Terry Jun 28 '21 at 06:55
please check my question again I updated it. When I try to print name and message there is no problem but when I try to print mail too its not printing anything – Roxox Jun 28 '21 at 07:00

score 1 · Answer 3 · answered Jun 28 '21 at 06:38

1

Just pass the total variable in your alert

alert(total)

answered Jun 28 '21 at 06:38

Nube Colectiva

147
2
7

score 0 · Answer 4 · answered Jun 28 '21 at 06:45

0

try this :

function test() {
    const inputName = document.getElementById("cf-name").value;
    const inputMail = document.getElementById("cf-mail").value;
    const inputMessage = document.getElementById("cf-message").value;
    alert(inputName +'\n' +inputMail +'\n'+ inputMessage +'\n');
}

answered Jun 28 '21 at 06:45

masih vaziri

51
2
3

The problem is name is defined as text and mail is defined as "mail" and message is defined as textarea in my code. When I try to do it like urs it gives me an error. It says "Could not read source map for file:///C:/Users/ayber/Desktop/Template/js/bootstrap.min.js: ENOENT: no such file or directory, open 'c:\Users\ayber\Desktop\Template\js\bootstrap.min.js.map'" – Roxox Jun 28 '21 at 06:51

score 0 · Answer 5 · answered Jun 28 '21 at 06:47

you can write it like

<input type="text" placeholder="Name" id="cf-name">
<input type="text" placeholder="Email" id="cf-mail">
<input type="text" placeholder="Msg" id="cf-message">


<button type="submit" onclick="test()" class="form-control" id="submit-button" name="submit">Send</button>
<script type="text/javascript">
  function test() {
    let inputName = document.getElementById("cf-name").value;
    let inputMail = document.getElementById("cf-mail").value;
    let inputMessage = document.getElementById("cf-message").value;

    let total = (inputName + '\n' + inputMail + '\n' + inputMessage);
    alert(total);
  }
</script>

and the result will be like if first input have 5 value second one have 6 and third one have 11 it will alert like that.

The problem is name is defined as text and mail is defined as "mail" and message is defined as textarea in my code. When I try to do it like urs it gives me an error. It says "Could not read source map for file:///C:/Users/ayber/Desktop/Template/js/bootstrap.min.js: ENOENT: no such file or directory, open 'c:\Users\ayber\Desktop\Template\js\bootstrap.min.js.map'" — Roxox, Jun 28 '21 at 06:51

How can I print multiple vars in alert box in JS

5 Answers5