Как я могу хранить одновременно 3 значения одного и того же текстового поля?

Question

<script type="text/javascript">
document.getElementById("subcategory").addEventListener("change", function() {
   console.log(this.value);    
});
   $(function(){
        $('.categoryList').click(function(){
          console.log($(this).attr("name"));

          var cat_id = event.target.value;
          var url = "http://localhost:8000/api/getSubcategory/"+cat_id;
          $.ajax({
              type: "GET",
              url: url,
              dataType: "JSON",
              success: function(res)
              {
                var html = "";
                $.each(res, function (key, value) {
                     html += "<li class="+'subcategorys'+" value="+key+" name="+value+">"+value+" </li>";
                });
                 $('#subcategory').html($(html).addClass('subcategoryList'));
                     $('.subcategorys').on('click', function(event) {
                      console.log($(this).attr("name"));
                       var  subcat_id =event.target.value;
    
                         console.log(subcat_id);
                     });
              }
          });
        });

    });
$(document).ready(function() {
    $('#subcategory').on('click', function(event) {
       
        
       var  subcat_id =event.target.value;
    
          console.log(subcat_id);
          var url = "/api/getSubcategorytwo/"+subcat_id;
          $.ajax({
              type: "GET",
              url: url,
              dataType: "JSON",
              success: function(res)
              {
                
                var html = "";
                $.each(res, function (key, value) {
                     html += "<li value="+key+">"+value+"</option></li>";
                });
                $("#subcategorytwo").html(html);

              }
          });
         });


    $('#subcategorytwo').on('click', function(event) {

    var  opt_subcat_two =event.target.value;
    var opt = $(event.target).text();    
    console.log(opt,opt_subcat_two);

$( "#fetchvalue" ).replaceWith("<input type='text' class='form-control' name='subcategorytwo' value="+opt_subcat_two+" id='fetchvalue' data-toggle='modal' data-target='#myModal'> "+opt+"</input>");
     $('#myModal').modal('hide');
     $('.modal-backdrop').remove();
    });
   });

</script>

<input  type="text" class="form-control" name="subcategorytwo" id="fetchvalue" data-toggle="modal" data-target="#myModal" ></input>

  <!-- The Modal -->
  <div class="modal" id="myModal">
<div class="modal-dialog modal-lg" >
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        </div>
        
        

                            <div class="modal-body">
                      <div class="row">
                          <table class="table table-striped">
                              <thead>
                              </thead>

                                <tbody class="table">
                                    <tr>
                                      <td style="background-color: green">
                                       <div class="col-md-7" >
                                            @foreach($categories as $category)
                                               <option  class="categoryList" name="{{$category->category}}" value="{{$category->id}}">{{$category->category}}</option>
                                            @endforeach
                                        </div>
                                      </td>
                                         <td>
                                            <div class="col-md-7">
                                              <ul style="list-style: none" id="subcategory"></ul>
                                            </div>
                                         </td>
                                         <td>
                                            <div class="col-md-7">
                                              <ul style="list-style: none" name="subcategorytwo" id="subcategorytwo" ></ul>
                                            </div>
                                         </td>     
                                    </tr>
                              </tbody>
                            </table>
                            
                      </div>
                    </div>
                          </div>
    </div>
  </div>

</div>

Вот код JavaScript и модальный код ... У меня всего 4 таблицы ...

1. категория подкатегория
2. подкатегория
3. subcategorytwo

4. таблица сообщений

   все они связаны с внешним ключом Структура таблицы сообщений

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

Как сохранить 3 значения одновременно в другом месте вдб Модальное шоу, как это

Модальное, как это

Answer 1

MySQL, скорее всего, в режиме STRICT, попробуйте изменить столбец, чтобы разрешить null:

ALTER TABLE `posts` CHANGE `subcategory2` `subcategory2` varchar NULL

Или попробуйте запустить

SET GLOBAL sql_mode='' or