Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing variables from forms to scripts

    I'm having trouble passing variables from forms to scripts on the same page.

    <form action="inputpage.htm" name="inputform"
    method="get">

    Heading1:
    <input type="text" name="head1" value="Headline" />
    <br />
    Text1:
    <input type="text" name="text1" value="Some text" >

    <br />
    Text2:
    <input type="text" name="text2" value="More text." />

    <input type="button"
    onclick="readform()"
    value="Go">
    </form>

    <script type="text/javascript">
    function readform()
    {
    document.write("<h1>"+head1+"</h1> \
    <p>"+text1+"</p> \
    <p>"+text2+"</p>")
    }

    </script>

    The script errors out, saying the form values such as head1, etc are not defined. Okay, but even using techniques from http://webreference.com/js/tips/000811.html , I can pass a form value to a script, such as
    alert(otherElement.form.elements[1].value); or
    document.forms[0].elements[0].value = "thank you"; but not to a variable such as head1.

    The same code written as
    var head1=otherElement.form.elements[1].value;
    var head1=document.forms[0].elements[0].value
    only produces <h1>undefined</h1>

    I know I could accomplish this with cookies or PHP or by parsing a URL location string, but is any of that really necessary?

  • #2
    New Coder
    Join Date
    Jan 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, there is no need to parse the URL with php.
    You cannot access the variables in the form using the name of the input only. The notation you want is:

    var head1 = document.inputForm.head1.value
    var text1 = document.inputForm.text1.value
    var text2 = document.inputForm.text2.value

    Then you have filled javascript variables with values from the form elements. Following that you document.write should work fine, leave that as it is.

    Also, you aren't actually submitting your form to input page.htm when that button is clicked, so that is a rather abstract thing to write, although completely harmless.
    Hope this helps you.
    Ben

  • #3
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Ben. That's much better.

    I changed to <form name="inputForm">
    and inserted
    <script type="text/javascript">
    var head1 = document.inputForm.head1.value
    var text1 = document.inputForm.text1.value
    var text2 = document.inputForm.text2.value
    </script>
    just before the readform() script.

    But I still have bugs. In IE 6.0, typing new values into the form and clicking Go always displays the default form values. I can't get the document.write to show the new values. In Mozilla/5.0 Firebird 0.7, I can get the values to change, but only after hitting my Back button and clicking Go a second time. (I get an hourglass but at least the text displays.)

    I moved the variable declaration all around my page, but it doesn't seem to work any better anywhere I put it.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It is because you only access the field values once not as you click the button. Put them inside the readform() function. Also do not use document.write statements after the page has loaded. Doing so will replace the current page. What do you really want to do with the values of the fields?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what I needed, Glenn. I thought I had already tried that, but it works now. Yes, I guess I do want to replace the current page with a new page built from the field values. But that means I need to put the entire content of the new page into the readform() function... Well, I plan to make it a little simpler for myself by using javascript includes for the boilerplate headings, menus and footers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •