How to question

[VTXmom]

I have an HTML form with a couple dropdown lists, What I am wanting to do is if "Dog" is selected from the first list, then the second list would be displayed. Right now both lists are displayed. The entire form is being submitted to a MySql database(just in case this is important). I am not sure how to go about this, I'm assuming I will need some kind of an if statement? Can someone give me some guidelines for my coding? Is this done with html or php, etc?

Here is the portion of the form that contains the dropdown lists:

 <tr>
          <td>Pet Type</td>
          <td> 
               <select name="PetType">
    <option value="0">Please select</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
          <span class="error">* Required</span>
          </td>
       </tr>
       <tr>
          <td>Dog Breed:</td>
          <td>
            <select name="Breed">
    <option value="0">Please select</option>
    <option value="PitBull">Pit Bull</option>
    <option value="Lab">Lab</option>
    <option value="Chihuaua">Chihuaua</option>
    <option value="Terrier">Terrier</option>
    <option value="German Shepherd">German Shepherd</option>
    <option value="Other">Other</option>
  </select>

Thanks for any help.

Edited February 23, 2015 by VTXmom

[Psycho]

Take a look at this thread from earlier today: http://forums.phpfreaks.com/topic/294825-date-picker/ The same type of logic would work, but in this case you would trigger the action with the onchange event of the first select list and then check the selected value.

 

However, if you need to dynamically change the options available in the second select list based on the first select list you can use a class created by one of the Gurus on this site: http://www.phpclasses.org/package/1637-PHP-Generate-dynamically-linked-select-inputs.html

 

Although, if you will only ever have Dog & Cat, you could just have two separate breed select list and hide/display both based on the option selected.

Edited February 23, 2015 by Psycho

[VTXmom]

Thanks Psycho,

 

This is for a class assignment, so dog and cat will be the only options. I checked out both of your links and have made partial progress. I changed the first dropdown(cat, dog) to checkboxes, and now I can get the select dropdown(Breed) to hide, but when I select the dog checkbox, it is not being displayed. Can you look at my code and tell me what I did incorrectly? Thanks,

 <tr>
          <td>Pet Type:</td>
          <td> 
        <input type="checkbox" name="cat" id="cat">Cat  
        <input type="checkbox" name="dog" id="dog">Dog
          </td>
       </tr>
       <tr>
          <td>Dog Breed:</td>
          <td>
      <script type="text/javascript">
	    function showHide() {
		  var checkbox = document.getElementById("dog");
		  var hiddeninputs = document.getElemenetByClassName("hidden");
		     for (var i = 0; i! = hiddeninputs.length; i++) {
			   if (checkbox.checked) {
			    hiddeninputs[i].style.display = "block";
				} else {
				  hiddeninputs[i].style.display = "none";
				}
			   }
			 }
	</script>
	   </td>
      <select name="Breed">
         <option value="0">Please select</option>
         <option value="PitBull">Pit Bull</option>
         <option value="Lab">Lab</option>
         <option value="Chihuaua">Chihuaua</option>
        <option value="Terrier">Terrier</option>
        <option value="German Shepherd">German Shepherd</option>
        <option value="Other">Other</option>
    </select>

I did create a class called hidden where I set the display to none.

Edited February 24, 2015 by VTXmom

[Psycho]

1. You should not use checkboxes. Typically, checkboxes should be independent of one another - i.e. user could select one, both or neither. You should either use a select list or a radio group.

 

2. Don't put JavaScript code in the body of your page - put it in the head

 

3. Try to avoid using tables for layout. It may be quicker in the short-run. But, it is not the right way to create the page layout and will eventually cause problems. For example, in this case you need to apply the show/hide logic to a table row, but you didn't put all of the elements into a table row (HTML is not correctly formatted)

 

 

<html>
<head>
<script type="text/javascript">
    function showHide(type) {
        if(type=='dog')
        {
            var displayVal = '';
        }
        else
        {
            var displayVal = 'none';
        }
 
        document.getElementById('breed_row').style.display = displayVal;
    }
    </script>
</head>
<body>
 
<table>
 <tr>
    <td>Pet Type:</td>
        <td> 
            <input type="radio" name="type" id="cat" value="cat" onclick="showHide(this.value)">Cat  
            <input type="radio" name="type" id="dog" value="dog" onclick="showHide(this.value)">Dog
        </td>
    </tr>
    <tr id="breed_row" style="display:none;">
        <td>Dog Breed:</td>
        <td>
            <select name="dog_breed">
            <option value="0">Please select</option>
            <option value="PitBull">Pit Bull</option>
            <option value="Lab">Lab</option>
            <option value="Chihuaua">Chihuaua</option>
            <option value="Terrier">Terrier</option>
            <option value="German Shepherd">German Shepherd</option>
            <option value="Other">Other</option>
            </select>
        </td>
</table>
 
</body>
</html>

[VTXmom]

Ok, thank you, looks like back to the drawing board on this.

[Psycho]

Ok, thank you, looks like back to the drawing board on this.

 

Did you look at the code I posted?

[VTXmom]

Psycho, thank you for your help. I was very tired that night and frustrated to the point of tears , so I wasn't thinking clearly.  I've taken another look at your code and was able to get my cascading dropdown to work correctly. I'm sorry to have been such a bother, I really do appreciate all the help you give us newbies. I've come to realize I do not comprehend or learn now as easily as I did in my 20's or even 30's.

 

VTXmom

[jeffreyappel]

This may help you get any idea....

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<div class="container">
 

<label>Pet Type:</label>
         
    <select name="PetType" class="type" id="ptype">
    <option id="zero" value="0">Please select</option>
    <option id="one"  value="Cat">Cat</option>
    <option class="two" id="two"  value="Dog">Dog</option>
    </select>   

<label id="breed">Bog Breed:</label>
          
    <select name="Breed" class="breed">
    <option value="0">Please select</option>
    <option value="PitBull">Pit Bull</option>
    <option value="Lab">Lab</option>
    <option value="Chihuaua">Chihuaua</option>
    <option value="Terrier">Terrier</option>
    <option value="German Shepherd">German Shepherd</option>
    <option value="Other">Other</option>
    </select>
</div>

<script>

	$(document).ready(function(){
	$(".breed").hide();
	$("#breed").hide();
	});
		$(document).ready(function(){
		$("#ptype").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
				
			});
		
		});
		
	




</script>
  </body>
  </html>