CODEWITHSUNDEEP
javascriptphpjqueryhtml
jamesalone
jamesalone

Reputation: 341

Change Form Field when select option changed in HTML

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

Upvotes: 0

Views: 1060

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30557

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)
    {
       .
       .

Upvotes: 1

Related Questions