Nothing happens when trying to submit html form variable via javascript

Question

I'm a beginner javascript user and I'm trying to get this html form to pass to this javascript function and output the name variable but all that happens when I click the button to submit is that the form input clears and it stays on the form not passing to the javascript.

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <title>Life Insurance Calculator</title>


        <script type="text/javascript">

        var title = "Welcome to Life Insurance Co..!";
                    //Declaring  variable title             

        document.writeln(title.fontsize(8).fontcolor('red')); 
                   //Printing out the title on the page

        function Name(form){

        var customername = document.getElementByID("name").value;
        document.write(customername);
    }

    </script> 


</head>

 <body>



    <form name = "LifeCalcForm" action="" method="get">
    <p>To get a life insurance quote, please tell us about yourself.</p>
    <p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
    <p>Enter your name: <input type="text" name="name" /></p>



    <input type="submit" value="Calculate" onClick="Name(this.form)">
        </form>


  </body>

</html>

javascript function isn't being called and not outputting the name — user2869602
– user2869602, Commented Oct 11, 2013 at 5:01
You cannot use document.write after the onload has fired. In you case that happens because the onclick almost certainly fires after the onload. On top of that, you will need to return false from your onclick to prevent the default submit behavior. — Steve
– Steve, Commented Oct 11, 2013 at 5:01
Output where? You can change input to type=button if you need just javascript but what you want to do here: document.write(customername)? — Alex
– Alex, Commented Oct 11, 2013 at 5:03

RobG · Accepted Answer · 2013-10-11 05:08:51Z

1

When you do document.write(customername); after the page has loaded (specifically, after the load event), it will first clear the entire page (including scripts) and write the new content.

Instead do something like:

alert(customername);

Once you clear the alert (e.g. click "OK"), the form will submit and the page will reload.

Incidentally, since you pass a reference to the function in the call, and the form control has a name, you can use:

alert(form.name.value);

Be aware that form control names and IDs are used to create properties of the form object, so having a form control with a name of "name" overwrites the form's own name property (forms also have properties like submit, action, elements, reset and so on). So never use a control name that might be the same as a standard form property name, use things like "userName" or such.

Variable names are, by convention, reserved for constructor functions so use lower case for normal functions. Also, functions are do things so it's generally best to use a verb that describes what it does, e.g.

function getUserName(form) {
  return form.userName.value;
}

edited Oct 11, 2013 at 5:08

answered Oct 11, 2013 at 5:03

RobG

148k32 gold badges180 silver badges216 bronze badges

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

1 Comment

user2869602 Over a year ago

Thanks a lot for your answer Rob, I was looking for Vicky's solution originally so I accepted her answer but I appreciate your solution and your tips.

Vicky Gonsalves · Accepted Answer · 2013-10-11 05:29:14Z

0

Try this:

<html>

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



        <title>Life Insurance Calculator</title>


           <script type="text/javascript">

    var title = "Welcome to Life Insurance Co..!";
//    Declaring  variable title

    document.writeln(title.fontsize(8).fontcolor('red'));
//    Printing out the title on the page

    function Name(){
        var customername = document.getElementById("name").value;
        document.write(customername);
    }

</script>


    </head>

     <body>



        <form name = "LifeCalcForm" action="" method="get">
    <p>To get a life insurance quote, please tell us about yourself.</p>
    <p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
    <p>Enter your name: <input type="text" id="name" name="name" /></p>



    <input type="button" value="Calculate" onClick="Name()">
</form>


      </body>

    </html>

answered Oct 11, 2013 at 5:29

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

1 Comment

user2869602 Over a year ago

Thanks Vicky, this is exactly what I was originally looking for!

Collectives™ on Stack Overflow

Nothing happens when trying to submit html form variable via javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related