CODEWITHSUNDEEP
javascripthtmlformspost
Christopher
Christopher

Reputation: 13147

Posting JS variable from HTML form

Im a bit of a newbie.

Im trying to post some data I have in a JavaScript variable to my server.

Iv looked around and from what I gather I need to put it in as part of a form? is there anyway to hide this form box?

Do I place this information in the value section of the form?

Eg. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Namespace</title>

    <script type="text/javascript" charset="utf-8">

        functionAddPostData(){

        var name = "Christopher";
        var last = "Bar";

       var formInfo = document.forms['info'];

       name = formInfo.elements["first"].innerHTML;
        last = formInfo.elements["surname"].innerHTML;

      }</script>

     </head>
     <body>
     <form action="script.php" method="post" allign="bottom">
        <label for="info"> 
            <input type="text" name="first" value="" size ="40" />
        <input type="text" name="surname" value="" size ="60" />
            <input type= "submit" name="submitted" value="info" allign="middle"/>

     </form>  
     </body>
     </html>

This is my best guess? Am I heading in the right direction? Is there a way to hide the form boxes?

Upvotes: 2

Views: 10322

Answers (2)

Perception
Perception

Reputation: 80603

There are a couple things wrong with the code you posted, which is why its not working. It's late so instead of a line by line analysis I will post a modified version that you can look over. I would recommend reading through an HTML guiide like W3 Schools and to also go through a good javascript tutorial (like Webmonkey. Cheers.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Namespace</title>

<script type="text/javascript" charset="utf-8">

    function AddPostData(){

    var name = "Christopher";
    var last = "Bar";

   var formInfo = document.forms['info'];

   name = formInfo.elements["first"].value;
    last = formInfo.elements["surname"].value;

  alert(name + ' ' + last);

  }</script>

 </head>
 <body>
 <form id="info" action="script.php" method="post" align="bottom">
    <p>For</p> 
        <input type="text" name="first" value="" size ="40" />
    <input type="text" name="surname" value="" size ="60" />
        <input type= "submit" name="submitted" value="info" align="middle" onclick="AddPostData();"/>

 </form>  
 </body>
 </html>

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69905

Use hidden fields to post the data to server if you dont want to show the textbox in the UI.

<input type="hidden" name="first" value="" size ="40" />

You should set the onSubmit of form to functionAddPostData which will get called when you submit the form. Also the form should have a name atttibute since you are trying to access it by name.

The form element values should be set as below

var formInfo = document.forms['info'];

formInfo.first.value = name;
formInfo.surname.value = last;

Upvotes: 4

Related Questions