Posting JS variable from HTML form

Question

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?

headed the right way, are you trying to validate the data? if so you have to add an onsubmit to your form tag to run your function when u sebmit the form — Ibu
– Ibu, Commented Jun 17, 2011 at 4:22

ShankarSangoli · Accepted Answer · 2011-06-17 04:19:33Z

4

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;

answered Jun 17, 2011 at 4:19

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

Comments

Perception · Accepted Answer · 2011-06-17 04:35:49Z

3

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>

answered Jun 17, 2011 at 4:35

Perception

80.8k19 gold badges190 silver badges197 bronze badges

2 Comments

Christopher Over a year ago

Thanks Perception. Il definatly look into the online tutes! I tried your code however it doesnt seem to place the variables into the form box or into the alert. Il keep looking though.

Perception Over a year ago

The code I have above is for extracting the values from the form inputs and posting them as an alert. Of course you can also submit the data to the server, as Ajax or any other means you see fit. Were you looking to do the opposite (populate form values from server data)?

Collectives™ on Stack Overflow

Posting JS variable from HTML form

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related