Changing value of hidden input onclick --

cranjled 2011-06-07 05:11:38 UTC #1

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?

<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!

chris_upjohn 2011-06-07 05:23:17 UTC #2

See the example below

<!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.

cranjled 2011-06-07 05:37:36 UTC #3

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?

cranjled 2011-06-07 06:30:18 UTC #4

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.

ThemesPodcastArticlesPremium