SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict cranjled's Avatar
    Join Date
    Apr 2004
    Location
    ny
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Changing value of hidden input onclick --

    I would like to change the value of a single hidden input onclick. The possible values are text, email and URL. I've tried all kinds of "ways" (inline and in function in a variety of ways,) but nothing. I stripped it down one last time to give it another go, but realize I'm out of ideas, so the code below is simply where I've thrown in the towel.

    Can someone make this work with a JS function, so that each link may be clicked and change the hidden input's value to the respective value?

    Code:
    <form id="dataForm" name="dataForm" method="post" action="index.php" enctype="application/x-www-form-urlencoded">
        <div>
            <input type="hidden" name="dataType" id="dataType" value="" />
            <ul class="tab-headers">
                <li id="tab-header1" onclick="">Text</li>
                <li id="tab-header2" onclick="" class="active">Email</li>
                <li id="tab-header3" onclick="">URL</li>
            </ul>
    ......
    Thanks for your wisdom!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See the example below

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    
        function setDataType(ele) {
            document.getElementById('dataType').value = ele.innerHTML;
        }
    
    </script>
    </head>
    <body>
    
    <form id="dataForm" name="dataForm" method="post" action="index.php" enctype="application/x-www-form-urlencoded">
        <div>
            <input type="hidden" name="dataType" id="dataType" value="" />
            <ul class="tab-headers">
                <li id="tab-header1" onclick="setDataType(this)">Text</li>
                <li id="tab-header2" onclick="setDataType(this)" class="active">Email</li>
                <li id="tab-header3" onclick="setDataType(this)">URL</li>
            </ul>
        </div>
    </form>
    
    </body>
    </html>
    Its probably not the best way to do it but its one of the quickest ways.

  3. #3
    SitePoint Addict cranjled's Avatar
    Join Date
    Apr 2004
    Location
    ny
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the example. To test it, I am trying to click each and then check the page source to find if the element was changed. Unfortunately, it's not populated at all. Perhaps I'm misunderstanding more than I realize. Shouldn't this change the page source to reflect the new value?

  4. #4
    SitePoint Addict cranjled's Avatar
    Join Date
    Apr 2004
    Location
    ny
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the example... I did get it working. There is some kind of collision between that code and the code in y_lib.js that I found at webonweboff.com. I removed their scripts and now yours works. I guess it wasn't meant to be... all the same, thanks.


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
  •