0

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()">
Improve this question
4
  • 1
    Without your HTML, absolutely no idea :) Please include all relevant source code. Commented Jun 28, 2014 at 6:55
  • The answer that got deleted is probably correct - are you getting an error or is it just not working? Commented Jun 28, 2014 at 6:58
  • Is there any reason you aren't using jQuery? Commented Jun 28, 2014 at 6:59
  • @swaggyK where is your textbox with ID phone..... Commented Jun 28, 2014 at 7:04

3 Answers 3

Reset to default
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.

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

1 Comment

Your answer doesn't tell the poster what the correct syntax should be :)
0

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);
    }
Improve this answer

1 Comment

Here is a question about conflict between form or it's element's name & function to execute.
0
  1. you must remove comma in alert.
  2. remove action in form

  3. 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">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.