SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing 2 variables at once with getElementById

    Hello,

    I have the following code in my script:

    Code:
    <td id="enddate">End date 3</td>
    
    <input type="radio" name="price" value="30" onclick="document.getElementById('enddate').innerHTML = 'End date 3'" /> $30
    <input type="radio" name="price" value="20" onclick="document.getElementById('enddate').innerHTML = 'End date 2'" /> $20
    <input type="radio" name="price" value="10" onclick="document.getElementById('enddate').innerHTML = 'End date 1'" /> $10
    It works fine. Every time someone selects a price, the value in the table gets updated. But what I want to do is also update the value of a hidden form field when someone selects a price.

    Code:
    <input type="hidden" name="end" value="End date 3 - $30">
    Any one know how I can change the variable in the table and the variable in the hidden field at the same time?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Use a function, which also makes your code shorter. So, it'd be something like this in the head section:
    Code:
    <script type="text/javascript">
    function update(element, value, hidden_value) {
        document.getElementById(element).innerHTML = value;
        document.getElementById('end').value = value;
    }
    </script>
    Then your HTML would look like this:
    Code:
    <input type="radio" name="price" value="30" onclick="javascript:update('enddate','End date 3','End date 3 - $30)" /> $30
    <input type="radio" name="price" value="20" onclick="javascript:update('enddate','End date 2','End date 2 - $20')" />$20
    <input type="radio" name="price" value="10" onclick="javascript:update('enddate','End date 1','End date 1 - $10')" />$10
    If "enddate" is constant between all of them, you can change the function to:
    Code:
    <script type="text/javascript">
    function update(value, hidden_value) {
        document.getElementById('enddate').innerHTML = value;
        document.getElementById('end').value = value;
    }
    </script>
    And take out the "enddate" from those function calls.

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    Code:
    <script type="text/javascript">
    function update(value, hidden_value) {
        document.getElementById('enddate').innerHTML = value;
        document.getElementById('end').value = value;
    }
    </script>
    Thanks samanime, it works.

    I have 2 questions:

    1. I assume that I have to add id="end" to the hidden form field code?

    2. When I submit the form, it send the correct hidden form field. But when I make a selection and then view the form code before submitting the form, I still see the default value for the hidden field. Why is that?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    1) Yes, sorry, I forgot to mention that.
    2) If you mean you are right-clicking and hit view source, it's because the source doesn't change to match Javascript changes. What is shown when you select "View Source" is the code that is delivered directly from your server to the browser.

    If you really want to view the generated source, you can get the 'Web Developer' plug-in for Firefox, then go to View Source > View Generated Source and it will show you what is actually generated. There may be a way to view it without the plug-in, but I don't know it.


Bookmarks

Posting Permissions

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