Javascript Help, interaction with HTML

[sauced]

Hey Guys,
I'm pretty fluent with HTML, PHP, and Java and at the moment am trying to get a dynamic site working. My problem is javascript, I have looked in a lot of places for help but never finding anything. What I have is an <input type="hidden" value=""> inside a form that sends to a php script that preps the information elsewhere on the site, also on the page I have <li> tags that are generated by php and include a name between the open and close tag with an id attribute. What I need to happen in javascript is to obtain that id when a user clicks on the <li> and use that as a variable to change the value in the hidden input and do some other things like change a nearby picture and make some ajax calls, I have so far had no success in getting the variable to change OR get the value to change. If anyone has any advice that would be awesome. I thank you for whatever help is possible!

[Maelstrom.]

Try something along the lines of this: http://jsfiddle.net/sfdHM/

The description of your problem was a little ambiguous, so I probably have not done exactly what you want. What I have done though is change various things when ever the <li> elements are clicked, which seemed to be the core of your problem. If you are using a JavaScript library like jQuery, this code could be made simpler, but I did not want to assume any libraries. This code will not work correctly if you have multiple <li> elements on a page. Fixing that problem is left as an excersize for the reader

[Xanthir]

Maelstrom's code is right. Feel free to learn from that.

In the future, including samples of your code that isn't working is a lot more helpful.

[Steax]

If you're intending to further work with it (and I assume yes, since you mentioned AJAX) I too suggest grabbing a library. jQuery is the current industry 'standard', I believe. It also tends to be easier for new users to learn.

[sebwiers]

Seconded. Here's an example that's veryy easy to implement in PHP (assuming you are using a loop to creat the <li> elements) that uses jquery:

Code: Select all

<ul>
    <li><a onclick="$('#hidIn').val('One')">One</a></li>
    <li><a onclick="$('#hidIn').val('Two')">Two</a></li>
</ul>
<input type="hidden" id="hidIn" value="">


[Steax]

The "correct" way of doing that would be by storing the value you want to attached to the hidden input in a data attribute, and then using jQuery's .on('click') to attach the handler.

Code: Select all

$(document).ready(function(){

    $(".selections li a").on('click', function(){
        $("#hidIn").val($(this).attr('data-value'));
        return false;
    });

});


Code: Select all

<ul class="selections">
    <li><a href="#" data-value="One">One</a></li>
    <li><a href="#" data-value="Two">Two</a></li>
</ul>
<input type="hidden" id="hidIn" value="">