2013-08-26 7 views
0

скрыть и показать текст ввода на основе выпадающего выделения, однако «ввод текста» больше не отображается, когда я отправляю форму, и я не заполнил форму validaton.скрыть и показать текст на основе раскрывающегося списка, однако

Я использую jquery, и я могу показать и спрятать, работает отлично, но эта часть меня очень раздражает.

мои клиенты не заполняют все поля формы, поэтому, когда они отправляют форму, я бы хотел, чтобы они увидели входной текст на основе их раскрывающегося списка, RATHER, текст ввода отсутствует.

$(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" /> 
+1

Пожалуйста, напишите свой html. – Sergio

+0

Его лучше разделить на скрипку! –

+0

ok Я добавил свой html – NULL

ответ

0

Посмотрите на jsFiddle здесь. Оно работает. Я не вижу тег <table> в вашем html, что является проблемой.

<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(); 
}); 
+0

интересный, и он даже не работает для меня :( – NULL

+0

Вы добавили тег обертки

, как я уточнил сверху? – Krishna

+0

да, ок, дайте мне знать, попробуйте усиление. – NULL

0

, что вы хотите проверить.

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"); 
0

Вместо встроенных стилей для этого попробуйте использовать класс для сокрытия его изначально, как,

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

CSS: .hidden{display:none;}

, а затем сделать,

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

(ИЛИ) Попробуйте удалить «скрытый» класс, когда вы хотите показать #mydiv

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

Это сработает. !!

0

Если вы хотите иметь див-шоу, когда страница перезагружается с помощью этой информации, вам нужно будет проверить выбранную информацию при загрузке страницы. Не показывать отображение по умолчанию. Скройте его при загрузке страницы.

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

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

затем добавьте свой метод изменения доставки.

Смежные вопросы