How to send a form to a javascript function

Question

I need your help to understand how I can send information from a form to a javascript function.

I've created a basic function here: http://jsfiddle.net/nZhR8/5/

The purpose of this function is to hide/display a div.

In fact, I'll have a table with a few contacts (between 0 and 20). There will be a selectlist per contact. For each contact, I'll have to display 1 special div in function of 1 own particularity. So, for contact1, I may have to display div3, and for contact2, display div1.

I'll also use the javascript function to send to the database wich div has to be displayed. It will be a kind of advancement.

If I'm doing it wrong, please tell me why.

Answer 1

Firstly, remove the $(...) from where you define the function showDiv, as you don't want to execute showDiv when the page has loaded.

Apart from that, your problem seems to be jsFiddle. It didn't work there, but when I copy+pasted exactly what you posted on jsFiddle into a file, fixed what I mentioned above and tried it in FF, it worked.

There are of course things you can do better about your code, but it works. Suggestions: Give all divs the same class and distinguish them by id, then hide everything with that class and show the one with the correct ID. For the onload, instead of copying the whole code just execute showDiv(1) .

Answer 2

You need something like this jsFiddle ?

<div id="1" class="1">1</div>
<div id="2" class="2">2</div>
<div id="3" class="3">3</div>
<div id="4" class="4">4</div>
<div id="5" class="5">5</div>

$('div').hide();

$('#StateSelection').change(function() {
    var $this = $(this);
    $('div').filter('.'+$this.val()).show();
});

Answer 3

I don't see the idea behind this but that could do the trick: http://jsfiddle.net/YCPM7/

That must be a simple draft of a much bigger project.

Also, I would suggest that you either use a common class for each DIVs

<div class="message 1">1</div>
<div class="message 2">1</div>
<div class="message 3">1</div>
...

So you can simply do:

$(".message").hide();

Enjoy.