0

Currently I display all options. I would like to display only the results when the option is selected.

Once the selected option is selected, the input need to be required.

it should be done with table tr td tags. See example below

Thank you for your explanation, advice and support.

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1').show();


if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   }   
  }
 });
});

$(document).ready(function(){
$('#router').prop('required',true);
$('#switch').prop('required',true);
$('#box').prop('required',true);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr> 
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>  
<option value="test1">test1 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50"></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"></td>
</tr>
<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>
James
  • 132
  • 12

4 Answers4

1

This have to go inside the if / else statement:

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1').show();

if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   $("#switch").prop('required',true);
   $("#router").prop('required',false);
   $("#box").prop('required',true);
   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',true);
   $("#box").prop('required',false);
   }   
  }
 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr> 
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>  
<option value="test1">test1 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>
<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>
Mike
  • 330
  • 2
  • 7
  • Thank you mike!!! can you see my question below.. by adding a new command it doesn't work correctly any advice ? – James Jul 07 '19 at 14:34
1

i removed the line with "show()" because it's not necessary. else if as well not. 

$(document).ready(function(){

$('#problem').on('change', function(){

if (this.value) {
   if (this.value == 'test') {
      $('.display').show();
      $('.display_1').hide();
      $('.display_2').hide();
      $("#switch").prop('required',false);
      $("#router").prop('required',true);
      $("#box").prop('required',false);
      $("#sam").prop('required',false);
   }

   if (this.value == 'test1') {
      $('.display').hide();
      $('.display_1').show();
      $('.display_2').hide();
      $("#switch").prop('required',true);
      $("#router").prop('required',false);
      $("#box").prop('required',true);
      $("#sam").prop('required',false);
   }   
   
   if (this.value == 'test2') {
      $('.display').hide();
      $('.display_1').hide();
      $('.display_2').show();
      $("#switch").prop('required',false);
      $("#router").prop('required',false);
      $("#box").prop('required',false);
      $("#sam").prop('required',true);
   }         
  }
 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr> 
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>  
<option value="test1">test1 </option>
<option value="test2">test2 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_2" style="display:none;">
<td>Sam</td>
<td><input id="sam" name="sam" type="text" maxlength="50" size="50"  required></td>
</tr>


<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>
Mike
  • 330
  • 2
  • 7
0

for the display issue: just add display:none; to your display_1 css class

if you want to make the fields mandatory you have to validate the form before it's submit: Capturing a form submit with jquery and .submit

Mike
  • 330
  • 2
  • 7
  • thx it works! any idea how to make it required? because if i choose another option i can not submit because the other option block it. thx. – James Jul 07 '19 at 13:35
  • 1
    remove the "required" attribute and do the validation with jquery or remove / add the attribute with jquery: `$('#switch').removeAttr('required');​​​​​` `$("switch").prop('required',true);` – Mike Jul 07 '19 at 13:42
  • 1
    https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields https://stackoverflow.com/questions/13951336/jquery-removing-html5-required-attribute – Mike Jul 07 '19 at 13:44
  • Thx Mike!!! but the other option still blocking the other. By selecting one option only the selected input field need to be required.... any other advice? or maybe you see what i make wrong.. i add your advice in the code – James Jul 07 '19 at 13:56
0

Thank you Mike but by adding a new line SAM (for new select option TEST2) it doesn't work anymore... it display also in test and test1... normally it should only display in test2...do you see why?

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1, .display_2').show();

if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   $("#switch").prop('required',true);
   $("#router").prop('required',false);
   $("#box").prop('required',true);
   $("#sam").prop('required',true);

   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',true);
   $("#box").prop('required',false);
   $("#sam").prop('required',true);

   }   
   
   else if (this.value !== 'test2') {
   $('.display_2').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',false);
   $("#box").prop('required',false);
   $("#sam").prop('required',true);

   }   
   
   
  }
 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr> 
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>  
<option value="test1">test1 </option>
<option value="test2">test2 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_2" style="display:none;">
<td>Sam</td>
<td><input id="sam" name="sam" type="text" maxlength="50" size="50"  required></td>
</tr>


<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>
James
  • 132
  • 12