Forums

pghtech

I am attempting to hide and disable a DIV class (see code below) and I cannot for the life of me figure out what I am doing wrong.

The code below is actually suppose to hide a DIV of class "optional-field" unless you choose a certain option from the drop down form with select name of "productOptions[2]". This might be an odd "select name" but it is because it is dynamically created by PHP. But if you choose "Someone Else" it should "show()" that DIV. It should also hide it wheen page loads.

However, dispite that, I tried just doing a simple hide command of another div not dynamically created


<script type=\"text/javascript\">
$(function() {
	$(\"#boxContent\").hide()
});

and I can't even get that to hide.

Below is the code for both the function and then the HTML:
NOTE: for the form select name, the HTML code shows the PHP place holder of
<select name=\"productOptions[{VAL_OPTION_ID}]\">
but when created it is
<select name=\"productOptions[2]\">

Javascript:


<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\">
$(function(){
	$(\"#optional-field\").attr(\"disabled\",\"true\");
	$(\"#optional-field\").hide();
	
	$(\"#productOptions[2]).change(function() {
		var send_type = $(\"#productOptions[2] option:selected\").text();
		
		if (send_type == 'Me') {
			$(\"#optional-field\").attr(\"disabled\",\"true\");
		};
		
		if (send_type == 'Someone Else') {
			$(\"#optional-field\").show();
			$(\"#optional-field\").removeAttr(\"disabled\");
		};
	});
	
});
</script>

HTML


<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
					<!-- 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 id=\"optional-field\">
								<textarea name=\"productOptions[{VAL_OPTION_ID}]\" class=\"giftmessagebox\"></textarea>
							<!-- END: textarea --></div>
					        </td>
						</tr>
						<!-- END: text_opts -->
					</table>

What am I missing?

RhapX

Make sure you're loading the jQuery functions you're wanting to use.


$(document).ready(function()
{
    $(\"#boxContent\").hide();
})

This should be how all of your stuff should look. Basically it shows that jQuery is to be loaded once the DOM is finished loading. Should solve your problem.

pghtech

Thanks all for the input. It turned out to be that it didn't like where I had the <script>..../jQuery.js</script> put as far as order AND because I was also using the scriptaculous.js and prototype.js which were also causing conflict.

Thanks,

treehouse : what would you like to learn today?

Forums

Problems with simple JQuery functions (hide/show)