CODEWITHSUNDEEP
javascriptjqueryformsshow-hide
user3727784
user3727784

Reputation: 17

Show/hide div based on option value

I just read all the other topics I could find with same problem I had but it didn't help me that's why I'm posting here.

I'm trying to have other form questions appear based on option value of 3rd question. According to other topics with same function this should work just fine, but for me nothing happens when I change values and I couldn't find any errors. I'm still new at JS.

Thanks in advance. Cheers!

This is my entire 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>Test</title>
<link rel="stylesheet" href="style.css" type="text/css"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>‌​

<script>

$("#aktivnost").change(function() {
    if ($(this).val() == "huddle") {
        $(".huddle_q").show();
    }

    if ($(this).val() == "1on1") {
    $(".jnj_q").show();
    }
    else {
        $(".huddle_q", ".jnj_q").hide();
    }
});

</script>

</head>

<body>

<form>

<span>Team Leader:</span> 
<select name="team_leader">
  <option value="dinko_roso"> Dinko Roso </option>
  <option value="lucija_starcevic"> Lucija Starčević </option>
  <option value="natalija_fluka"> Natalija Fluka </option>
  <option value="tamara_zdjelar"> Tamara Zdjelar </option>
  <option value="bojan_brnjac"> Bojan Brnjac </option>
  <option value="andro_vuljanic"> Andro Vuljanić </option>
</select>

<br />

<span>Ocjenjivač:</span>
 <select name="ocjenjivac">
  <option value="dinko_roso"> Branimir Spajić </option>
  <option value="lucija_starcevic"> Ozren Kovačević </option>
  <option value="natalija_fluka"> Dunja Vidak </option>
  <option value="tamara_zdjelar"> Anamaria Katić </option>
  <option value="bojan_brnjac"> Marko Nimac </option>
</select>

<br />

<span>Aktivnost:</span> 
<select id="aktivnost">
  <option value="team_meeting"> Team Meeting </option>
  <option value="1on1"> 1on1 </option>
  <option value="huddle"> Huddle </option>
</select>

<br />

<div class="huddle_q">

<span>Dužina stiskavca:</span>
<input type="radio" name="h_q1" value="0">0</input>
<input type="radio" name="h_q1" value="3">3</input>

<br />

<span>Fokusi:</span>
<input type="radio" name="h_q2" value="0">0</input>
<input type="radio" name="h_q2" value="1">1</input>
<input type="radio" name="h_q2" value="2">2</input>
<input type="radio" name="h_q2" value="3">3</input>

<br />

<span>Parkiranje:</span>
<input type="radio" name="h_q3" value="0">0</input>
<input type="radio" name="h_q3" value="3">3</input>

<br />

<span>Poticanje:</span>
<input type="radio" name="h_q4" value="0">0</input>
<input type="radio" name="h_q4" value="1">1</input>
<input type="radio" name="h_q4" value="2">2</input>
<input type="radio" name="h_q4" value="3">3</input>

<br />

<span>Predstavljanje:</span>
<input type="radio" name="h_q5" value="0">0</input>
<input type="radio" name="h_q5" value="3">3</input>

<br />

<span>Održava atmosferu:</span>
<input type="radio" name="h_q6" value="0">0</input>
<input type="radio" name="h_q6" value="1">1</input>
<input type="radio" name="h_q6" value="2">2</input>
<input type="radio" name="h_q6" value="3">3</input>

</div>

<div class="jnj_q">

<span>Dužina 1on1:</span>
<input type="radio" name="1on1_q1" value="0">0</input>
<input type="radio" name="1on1_q1" value="3">3</input>

<br />

<span>TL prepoznaje i hvali:</span>
<input type="radio" name="1on1_q2" value="0">0</input>
<input type="radio" name="1on1_q2" value="1">1</input>
<input type="radio" name="1on1_q2" value="2">2</input>
<input type="radio" name="1on1_q2" value="3">3</input>

<br />

<span>2QM:</span>
<input type="radio" name="1on1_q4" value="0">0</input>
<input type="radio" name="1on1_q4" value="1">1</input>
<input type="radio" name="1on1_q4" value="2">2</input>
<input type="radio" name="1on1_q4" value="3">3</input>

<br />

<span>Razvoj komp:</span>
<input type="radio" name="1on1_q6" value="0">0</input>
<input type="radio" name="1on1_q6" value="1">1</input>
<input type="radio" name="1on1_q6" value="2">2</input>
<input type="radio" name="1on1_q6" value="3">3</input>

</div>

</form>

</body>
</html>

Upvotes: 0

Views: 165

Answers (1)

j08691
j08691

Reputation: 207901

Your code, for the most part, works fine. The main mistake you made was that you are trying to execute code on elements that don't yet exist. You need to either a) run the code at the end of the document, or more commonly b) put the code in a document.ready handler.

jsFiddle example

$( document ).ready(function() {
   //your code here
});

Note that in the example fiddle that I added $('.huddle_q, .jnj_q').hide(); to hide the elements first when you change the drop down.

Upvotes: 1

Related Questions