Multiple var textboxes for javascript

Question

I have html textboxes, but for somme reason when I hit submit it doesn't show both neither of the 3

<script type="text/javascript">     
    function readBox() {
        var phone = document.getElementById('phone').value;
        var email = document.getElementById('email').value;         
        alert("You typed " + email, + age, + tShirt);
    }
</script>

any ideas why this isn't working?

<form name="readBox" action="/">                        

    <label>Age:</label>                     
    <input type="text" id="age" name="age">

    <label>T-Shirt Size:</label>                        
    <input type="text" id="tShirt" name="tShirt">


    <label>Email Address:</label>                       
    <input type="text" id="email" name="email">

    <br />              
        <input type="submit" style="display: inline-block;" onClick="readBox()">

Without your HTML, absolutely no idea :) Please include all relevant source code. — Jane S, Jun 28 '14 at 06:55
The answer that got deleted is probably correct - are you getting an error or is it just not working? — Jane S, Jun 28 '14 at 06:58

Gaurang Tandon · Answer 1 · 2014-06-28T07:06:55.657

1

Assuming you are only getting value of "You typed " + email

alert("You typed " + email + age + tShirt);

You had many commas. Also, you don't have any element with ID phone, and tShirt variable is not defined.

edited Jun 28 '14 at 07:06

answered Jun 28 '14 at 06:55

Gaurang Tandon

6,504
11
47
84

Your answer doesn't tell the poster what the correct syntax should be :) – Jane S Jun 28 '14 at 07:00

Mritunjay · Answer 2 · 2014-06-28T07:21:46.390

I think it won't go to the function readBox only. Your form name and function name to be executed onclick are same. That's why it's creating problem.

Change your form name and it should go to that function.

Here I have something which worked for me:- HTML

<form action="/">   
                <label>Age:</label>                     
                <input type="text" id="age" name="age">

                <label>T-Shirt Size:</label>                        
                <input type="text" id="tShirt" name="tShirt">


                <label>Email Address:</label>                       
                <input type="text" id="email" name="email">

                <br />              
                <input type="submit" style="display: inline-block;" onclick="readBox()">
              </form>

Javascript

function readBox() {
        var age = document.getElementById('age').value;
        var email = document.getElementById('email').value;         
        alert("You typed " + email +" "+ age);
    }

[Here](http://stackoverflow.com/questions/9158238/why-js-function-name-conflicts-with-element-id) is a question about conflict between form or it's element's name & function to execute. — Mritunjay, Jun 28 '14 at 07:28

score 0 · Answer 3 · answered Jun 28 '14 at 07:28

you must remove comma in alert.
remove action in form

change function name of script

function read(){
var email = document.getElementById('email').value;
var age = document.getElementById('age').value;
var tShirt = document.getElementById('tShirt').value;       

alert("You typed " + email +","+ age+"," + tShirt);

}

`

<form name="readBox"> 
    <label>Age:</label>                     
    <input type="text" id="age" name="age">
    <label>T-Shirt Size:</label>                        
    <input type="text" id="tShirt" name="tShirt">
    <label>Email Address:</label>                       
    <input type="text" id="email" name="email">

    <br />              
    <input type="button" style="display: inline-block;" onClick="read()" value="submit">

Multiple var textboxes for javascript

3 Answers3