hide and show input text based on drop down selection however

Question

hide and show input text based on drop down selection however the "input text" doesn't show anymore when i submit the form and I didn't complete the form validaton.

i am using jquery, and i can show and hide, works perfectly, but this part is bugging me alot.

my customers will not complete all the form fields, so when they submit the form, i would like them to SEE the input text based on their drop down selection, RATHER, the input text is missing.

$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').show();
        }
        else
            $("#mydiv").hide();
    }); 
});

<select name="shipping" id="shipping">
 <option value="LA">LA</option>
 <option value="NYC">NYC</option>
</select>

<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>


<tr>
<td><input type="text" name="testing2"></td>
</tr>



<tr>
<td><input type="text" name="testing3"></td>
</tr>

<input type="submit" value="Submit" />

Answer 1

Look at the jsFiddle here. It works. I don't see the <table> tag in your html, which is a problem.

<select name="shipping" id="shipping">
    <option value="select">Select</option>
    <option value="LA">LA</option>
    <option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
    <td>
        <input type="text" name="testing" value="show/hide"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="testing2"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="testing3"/>
    </td>
</tr>
    </table>
<input type="submit" value="Submit" />

Javascript:

$('#shipping').change(function () {
    if ($("#shipping").val() == "LA") {
        $('#mydiv').show();
    } else $("#mydiv").hide();
});

Answer 2

what you want to validate.

if textbox is hidden , it should be part of validation or not 
if that is part of validation use 
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");

Answer 3

Instead of inline styles for this try using a class for hiding it initially like,

<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>

CSS: .hidden{display:none;}

and then do,

$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').show();
        }
        else
            $("#mydiv").hide();
    }); 
});

(OR) Try to remove 'hidden' class when u want to show the #mydiv

$(document).ready(function() {
    $('#shipping').change(function() {
        if ( $("#shipping").val ()  ==  "LA") 
        {                              
            $('#mydiv').removeClass('hidden');
        }
        else
            $("#mydiv").addClass('hidden');
    }); 
});

It will work.!!

Answer 4

If you are looking to have the div show when the page reloads with that information you will need to check for the selected information when the page is loading. Don't make the default display none. Hide it when you load the page.

 $(document).ready(function() {
 $("#mydiv").hide();

var shipLocation = $("select#shipping").val();
if ( shipLocation ==  "LA") 
    {                              
        $('#mydiv').show();
    }

then add your shipping change method.