Change Form Field when select option changed in HTML

Question

Okay, so I have a code like below

$(document).ready(function(){
  $('#Topic').change(function(){
    $('[name="keycategory[]"]').prop('disabled', false);
    selection = $(this).val();    
    switch(selection)
    { 
      case 'Sport':
        $('#Sport').show();
        $('#Entertainment').hide();
        $('#Entertainment[name="keycategory[]"]').prop('disabled', true);
        break;
      case 'Entertainment':
        $('#Entertainment').show();
        $('#Sport').hide();
        $('#Sport[name="keycategory[]"]').prop('disabled', true);
        break;
      default:
        $('#Sport').hide();
        $('#Entertainment').hide();
        $('#Sport[name="keycategory[]"], #Entertainment[name="keycategory[]"]').prop('disabled', true);
        break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="testing.php">
  <select name="Topic" id="Topic">
    <option disabled selected> -- Select Topic -- </option>
    <option value="Sport">Sport</option>
    <option value="Entertainment">Entertainment</option>
  </select>

  <!--Topic: Sport-->
  <div id="Sport" style="display:none">
    Soccer <input type="text" name="keycategory[]">
    <br>
    Basketball <input type="text" class="form-control" name="keycategory[]">
  </div>

  <!--Topic: Music-->
  <div id="Entertainment" style="display:none">
    Movie <input type="text" class="form-control" name="keycategory[]">
    <br>
    Music <input type="text" class="form-control" name="keycategory[]">
  </div>
</form>

With the code above, I will get the size of keycategory[] = 4. My question is, how to only send the keycategory[] with the selected topic without differing the name. This is because I got a php file which has a function that receives keycategory[] despite of the topic selected

AmmarCSE · Accepted Answer · 2015-04-26 17:42:23Z

1

In your case/switch statments, modify them so they disable the hidden div inputs like

    case 'Sport':
        $('#Sport').show();
        $('#Entertainment').hide();
        $('#Entertainment [name="keycategory[]"]').attr('disabled', 'disabled');
            break;
    case 'Entertainment':
        $('#Entertainment').show();
        $('#Sport').hide();
        $('#Sport [name="keycategory[]"]').attr('disabled', 'disabled');
        break;
    default:
        $('#Sport').hide();
        $('#Entertainment').hide();
        $('#Sport [name="keycategory[]"], #Entertainment [name="keycategory[]"]').attr('disabled', 'disabled');
        break;

This will prevent them from being submitted with the form. Also, dont forget to 'reset' the fields by making them enabled before the switch statement

    $('[name="keycategory[]"]').prop('disabled', false);
    switch(selection)
    {
       .
       .

edited Apr 26, 2015 at 17:42

answered Apr 26, 2015 at 17:35

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

squall3d Over a year ago

remember to enable them when showing, after they are disabled

Collectives™ on Stack Overflow

Change Form Field when select option changed in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related