0

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.

Deblaton Jean-Philippe
  • 11,188
  • 3
  • 49
  • 66
  • 3
    incorrect Syntax in fiddle. where is `div` and `form` ?? – xkeshav Apr 06 '12 at 12:52
  • 1
    Without changing your code too much, [this will work](http://jsfiddle.net/nZhR8/4/) but it is still not very well written. – Chad Apr 06 '12 at 12:54
  • I've editted my question. Sorry, I hadn't give the correct fiddle link. There was no form in what I gave. – Deblaton Jean-Philippe Apr 06 '12 at 12:56
  • 1
    Does that do the trick? http://jsfiddle.net/YCPM7/ your code needs some structure so you can optimize the code. – Cybrix Apr 06 '12 at 13:08
  • thx Cybrix, as nice as I wanted! copy paste it and I'll accept your answer ;-) – Deblaton Jean-Philippe Apr 06 '12 at 13:12
  • 2
    You can't have ids and classnames that start with numbers, http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names and http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html Not sure if that is the problem though, as many browsers are kind to people like you. – Martin Hansen Apr 06 '12 at 13:15
  • +1 @MartinHansen ! Awesome links! – Cybrix Apr 06 '12 at 13:19

3 Answers3

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

Armatus
  • 2,206
  • 17
  • 28
1

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();
});
animuson
  • 53,861
  • 28
  • 137
  • 147
neoascetic
  • 2,476
  • 25
  • 34
1

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.

Cybrix
  • 3,248
  • 5
  • 42
  • 61
  • You can even make it more interactive by replacing `$("form").submit(...)` with `$("#StateSelection").change(...)`. That way, the displayed message is changed as soon as you select a new value, no more need to press "Submit". – Peter Apr 06 '12 at 13:34