PHP/HTML/Javascript: How to add value to a div element?

Question

My Problem was: Add a value to a div element in a dropdown list.

Ok Guys, I've resolved my problem with the help of @David.

I've always wanted to know how to design the <select> <option> tags, but now I think I found a solution to get away from them and use whatever element I want. Ok here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

    function getValue(value){
            var valueHolder = document.getElementById('valueHolder');
            valueHolder.value = value;
    }

    function toggle(id){
        var element = document.getElementById(id);
        if(element.style.display == "none"){
            element.style.display = "block";
        } else {
            element.style.display = "none";
        }
    }


</script>
</head>

<body>

<form action="test2.php" method="post">

    <input type="hidden" id="valueHolder" value="" name="valueHolder"></input>

    <div onclick="toggle('dropdown');">Show Dropdown</div>

    <div class="dropdown" id="dropdown" style="display:none;">
        <div class="option" onclick="getValue('red')">Red</div>
        <div class="option" onclick="getValue('green')">Green</div>
    </div>  

    <input type="submit" name="submit" />  
    <?php 
        if(isset($_POST['submit'])){
            echo $_POST['valueHolder'];
        }
    ?>
</form>
</body>
</html>

It's a bit ugly but check it out, works! Don't forget to run on a server.

Best Regards, Adam

I think you are making things unnecessarily hard for yourself, whilst at the same time writing semantically incorrect markup. The [` — Mike, Jul 01 '10 at 18:15
Yes you are right, for me the select version is ok too, but I don't know how to design the — Adam Halasz, Jul 01 '10 at 18:17
@Cirk: If it's a method for adding a little style to the resulting drop-down, then you could check out the answer to [Is it possible to style a select box?](http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box). It mentions a jquery method, which also appears to work well with progressive enhancement (or graceful degradation). — Mike, Jul 01 '10 at 18:21

score 2 · Accepted Answer · answered Jul 01 '10 at 18:16

2

Each div is probably going to need its own click event to grab its inner text and store it in a hidden form field. This can be more elegantly accomplished with jQuery outside of the HTML so as to separate it from the content.

jQuery click event: http://api.jquery.com/click/

jQuery method for getting element's text: http://api.jquery.com/text/

answered Jul 01 '10 at 18:16

David

208,112
36
198
279

1

Umm I don't really have any problems with jquery but I want to use original javascript because I want to know how it really works. – Adam Halasz Jul 01 '10 at 18:20
In that case you can use plain old JavaScript to get the element by its ID and then reference its innerHtml property. Example: http://forums.devshed.com/javascript-development-115/get-text-string-from-div-433133.html – David Jul 01 '10 at 18:24
Yes, this is the way I want it, but I have the value in Javascript how should I put it into a PHP variable? Because in Javascript I can't send to the server when I click the submit button. – Adam Halasz Jul 01 '10 at 18:29
Set a hidden form value: http://www.javascript-coder.com/javascript-form/javascript-set-form-field.htm That way it gets posted back to the server with the rest of the form. – David Jul 01 '10 at 18:32
Hmm you say something.. I will try to make it if works I will be very happy :D – Adam Halasz Jul 01 '10 at 18:35
Good luck! Who knows, you might be able to put together a cool little JavaScript menu package that others might want to use :) – David Jul 01 '10 at 18:37
Well I'm in half way :D If I find the way I will post it. – Adam Halasz Jul 01 '10 at 18:46
Glad to hear! If this answered your question then make sure to mark it as answered so others might find it more easily :) – David Jul 01 '10 at 19:06
Thanks very much for the input tip, we've made something new and cool ;) – Adam Halasz Jul 01 '10 at 19:18

PHP/HTML/Javascript: How to add value to a div element?

1 Answers1