Значения в выборе сбрасываются сразу после их выбора, к форме привязано несколько функций Ajax. Какие-либо решения или обходные пути?

#javascript #ajax #laravel

Вопрос:

Итак, у меня есть 3 варианта выбора в форме. Форма имеет 3 функции jQuery и Ajax, установленные при вводе. Один предназначен для динамического отображения некоторых данных продукта, второй-потому что данные выбора «ширины» зависят от выбора «модели», а последняя функция-потому что выбор «проекции» зависит от выбора «модели» и «ширины». Они «работают», но проблема в том, что значения не сохраняются в форме, поэтому, если я выберу ширину, вместо сохранения этой ширины в форме, она просто вернется к установленному мной параметру по умолчанию. Я не специалист в JS или Ajax, поэтому буду признателен за любую помощь. Это мой первый вызов Ajax для проекции.

 $('#toldoForm').on('input', function (event) {  event.preventDefault();  let $wrapper = $('#toldoForm'),  modelo_toldo_id = $wrapper.find('#modelo_toldo_id').val(),  width = $wrapper.find('#width').val(),  _token = $('input[name="_token"]').val();  $.ajaxSetup({  headers: {  'X-CSRF-TOKEN': $('[name="_token"]').attr('content')  }  });  $.ajax({  url: "{{ route('toldo.fetch.projection') }}",  method: "POST",  data: {  modelo_toldo_id: modelo_toldo_id,  width: width,  _token: _token },  success: function (result) {  $('#projection').html(result);  },  });  });  

Это функция Laravel внутри контроллера

 public function fetchProjection(Request $request) {  $model = $request-gt;get('modelo_toldo_id');  $width = $request-gt;get('width');  $data = SistemaToldo::where('modelo_toldo_id', $model)-gt;where('width', $width)-gt;groupBy('projection')-gt;get();  $output = 'lt;option value=""gt;Seleccionar proyecciónlt;/optiongt;';  foreach($data as $row){  $output .= 'lt;option value="'.$row-gt;projection.'"gt;'.$row-gt;projection.'lt;/optiongt;';  }  echo $output; }  

И это мой вызов Ajax для ширины

 $('#toldoForm').on('input', function (event) {  event.preventDefault();  let $wrapper = $('#toldoForm'),  modelo_toldo_id = $wrapper.find('#modelo_toldo_id').val(),  _token = $('input[name="_token"]').val();  $.ajaxSetup({  headers: {  'X-CSRF-TOKEN': $('[name="_token"]').attr('content')  }  });  $.ajax({  url: "{{ route('toldo.fetch.numbers') }}",  method: "POST",  data: {  modelo_toldo_id: modelo_toldo_id,  _token: _token },  success: function (result) {  $('#width').html(result);  },  });  });  

And the Laravel Function

 public function fetchNumbers(Request $request) {  $model = $request-gt;get('modelo_toldo_id');  $data = SistemaToldo::where('modelo_toldo_id', $model)-gt;groupBy('width')-gt;get();  $output = 'lt;option value=""gt;Seleccionar ancholt;/optiongt;';  foreach($data as $row){  $output .= 'lt;option value="'.$row-gt;width.'"gt;'.$row-gt;width.'lt;/optiongt;';  }  echo $output; }  

The widths load correctly once I select a model, when I select the width, it loads the projection but the input goes back to «Seleccionar ancho» instead of keeping the value I chose.

The last function is to display dynamically the final product of the order and compare different prices, so it uses all the inputs inside that form to pull it from the DB.

Thanks in advance