Forums

pghtech

My goal is to hide a class (optional-field) when the page loads. But if the user selects a certain choice (total of two choices), then the hidden classes will show.

I was able to hide the classes (optional-field) when the page loads, but I can't for the life of me, get them to show when I select the right choice. (Below is the code) . NOTE: the this is dynamically created by PHP, so the [{VAL_OPTION_ID}] in productOptions[{VAL_OPTION_ID}] in the HTML is the PHP place holder. I did put up what it looks like after generated when the page loads as well below.

Besides not getting the class "optional-field" to show() when you select the option "Me" from the drop down, I had a couple other questions:
1) I found how to specify a ID or Class "." or "#" in your code, but not if the <select> uses "name" selector.

2) Also, I had to add a class to the <select> because I couldn't find how to identify it based on a "name" selector in the <select> tag.

3) Also, I tried putting an alert(send_type) to see what value send_type was after it was declared, but couldn't get any response back.

jQuery


jQuery.noConflict();
jQuery(document).ready(function(){
	jQuery(\".optional-field\").hide();
      
	
     	
    jQuery(\".productOptions[2]\").change(function() {
    var send_type = jQuery(\".productOptions[2] option:selected\").text();
      	  
       if (send_type == ' Me ') {
          jQuery(\".optional-field\").hide();
       };
            
       if (send_type == 'Someone Else') {
          jQuery(\".optional-field\").show();

       });
    });
});

This is the drop down before dynamically created:


<!-- BEGIN: repeat_options -->
						<tr>
							<td class=\"prod_headertxt\" width=\"60\">{VAL_OPTS_NAME}</td>
							<td><select name=\"productOptions[{VAL_OPTION_ID}]\">
							<!-- BEGIN: repeat_values -->
								<option value=\"{VAL_ASSIGN_ID}\">
								{VAL_VALUE_NAME}
							<!-- BEGIN: repeat_price -->
								({VAL_OPT_SIGN}{VAL_OPT_PRICE})
							<!-- END: repeat_price -->
								</option>
							<!-- END: repeat_values -->
								</select>
							</td>
						</tr>
					<!-- END: repeat_options -->
					<!-- BEGIN: text_opts -->
					  	<tr>
						    <td class=\"prod_headertxt\" width=\"60\">
                            <div class=\"optional-field\">{VAL_OPTS_NAME}
					        <!-- BEGIN: repeat_price -->
								({VAL_OPT_SIGN}{VAL_OPT_PRICE})
							<!-- END: repeat_price --></div>
				            </td>
				            <td>
							<!-- BEGIN: textbox -->
								<input type=\"text\" name=\"productOptions[{VAL_OPTION_ID}]\" class=\"textbox\"  />
							<!-- END: textbox -->
							<!-- BEGIN: textarea -->
                            <div class=\"optional-field\">
                            <textarea name=\"productOptions[{VAL_OPTION_ID}]\" class=\"giftmessagebox\"></textarea>
                            </div>
							<!-- END: textarea -->
					        </td>
						</tr>
						<!-- END: text_opts -->
					</table>
					<!-- END: prod_opts --></td>

This is the code after it is generated on the page:


<td class=\"prod_headertxt\" width=\"60\">Send To:</td>

							<td><select class=\"choice\" name=\"productOptions[2]\">
							<option value=\"19\">
								Me
							
								</option>
							
								<option value=\"20\">
								Someone Else
							
								</option>
								</select>
							</td>
						</tr>

					<tr>
						    <td class=\"prod_headertxt\" width=\"60\">
                            <div class=\"optional-field\">Gift Card Message
					        </div>
				            </td>
				            <td>
							
							<div class=\"optional-field\">
                            <textarea name=\"productOptions[3]\" class=\"giftmessagebox\"></textarea>
                            </div>

					        </td>

Finally, Should you have all of it within the function?


jQuery(document).ready(function() {

pghtech

I am not sure what is going on. I can't seem to get the simplest of actions to occur.

I even tried to do it by the option values.


jQuery(\".choice\").change(function() {
	var choice = jQuery(\".choice\").val();
	
	  if (choice == \"19\") {
	  	alert (\"its 19\");
	  } else if (choice == \"20\") {
	  	alert (\"its 20\");
	  };
});

and I get nothing.

treehouse : what would you like to learn today?

Forums

Question about show/hide on drop down selection with jQuery