Как опубликовать выбранный параметр с помощью ajax?

#javascript #php #ajax #laravel

Вопрос:

Я использую Ajax в Laravel для хранения данных, ниже приведена форма, которую я использую для хранения данных, в ней есть ввод, а также выбранная опция

   <form class="forms" method="get" action="">
                      {{ csrf_field() }}
          
                      <div class="form-group row">
                        <label for="exampleInputUsername2" class="col-sm-2 col-form-label">Estate Name</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control Estate_name" name="Estate_name" id="exampleInputUsername2" placeholder="Enter Estate Name" >
                        </div>
          
                        <label for="exampleInputEmail2" class="col-sm-1 col-form-label">Landlord</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control Landlord" name="Landlord" id="exampleInputEmail2" autocomplete="off" placeholder="Enter Landlord" >
                        </div>
                      </div>
          
                      <div class="form-group row">
                        <label for="exampleInputEmail2" class="col-sm-2 col-form-label">District</label>
                        <div class="col-sm-4">
                          <select class="js-example-basic-single w-200 District_id" name="District_id">
                            @foreach ($District as $districts)
                            <option value="{{$districts -> id}}">{{$districts -> DISTRICT}}</option>
                            @endforeach
                          </select>
                        </div>
    </div>
    </form>

Ниже приведен сценарий для вставки данных, но я не знаю, как лучше всего написать код, в котором хранится выбранный параметр. мне нужна помощь в этом!, опция выбора должна вставить «District_id» в базу данных.

 <script>
        $(document).ready(function (){
      
          $(document).on('click', '.add_estate', function(e){
            e.preventDefault();
            //console.log("Hello")
            var data = {
              'Estate_name': $('.Estate_name').val(),
              'Landlord': $('.Landlord').val(),
              'District_id': $('.District_id').val(),//this is where i fail to insert
            }
            //console.log(data);
            //Call Ajax Methoad
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
    
            $.ajax({
              type: "POST",
              url:"/register/estate",
              data: data,
              dataType: "json",
              sucess: function (response) {
                  console.log(response); 
              }
            });
    
          });
        });
      </script>

1. потому $('District_id') что ищет <District_id> элемент

2. @epascarello и как мне это хорошо написать?

3. Ну а как вы написали другие, которые работают? 🙂 Вы буквально сделали это два раза прямо над ним.

4. Смотрите, чем ввод отличается от выбора

5. Ну, я думаю, что в вашем варианте нет никакой ценности

Ответ №1:

Во-вторых, вы можете запустить событие формы с помощью события отправки, а затем сериализовать информацию, чтобы ваш ajax-запрос выглядел следующим образом

 $(".forms").submit(function(e) {

    e.preventDefault();

    var form = $(this);
    var url = form.attr('action'); //you can paste your URL directly if you want /register/estate
    
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               console.log(data); 
           }
         });

    
});