Laravel, как получить результат от контроллера с помощью ajax, отправив несколько значений из флажков

Question

У меня есть поле выбора, которое работает нормально и отправляет значения в контроллер, но я хочу использовать флажки вместо этого поля выбора и без использования кнопки отправки, так что это то, что мне нужно сделать

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

     <select class="offer-multiple" style="width: 100%" name="categories[]" id="categories" multiple="multiple">
                                @foreach($categories as $item)
                                    @if(in_array($item->id,$categoryArray))
                                        <option value="{{ $item->id }}" selected="selected">  {{ $item->title }} - {{ $item->num_offer }} Offer</option>
                                    @else
                                        <option value="{{ $item->id }}">   {{ $item->title }} - {{ $item->num_offer }} Offer</option>
                                    @endif
                                @endforeach
                            </select>

Jquery:

$("#categories").change(function() {

//console.log(locationUrl);
var dataArray = [];

var dataString = JSON.stringify($("#categories").val());

var urlCall = '/getOfferCategory/'+locationUrl[5];

console.log(urlCall);

var loadingSection = 'result';
//call ajax
makeAjaxCall(urlCall,dataString,'',loadingSection);
});

Answer 1

Не уверен, что это подходящий способ использовать флажки. У вас могут быть флажки с тем же именем, если вы используете имя [] в качестве имени, чтобы оно отправляло массив на сервер (в любом случае PHP).

Разметка будет примерно такой, как показано ниже, но она включает кнопку отправки. С опцией флажка, как вы думаете, чтобы знать, когда пользователь сделал выбор? Пользователь должен будет нажать кнопку отправки или что-то еще, когда они сделают выбор?

<form action="" method="" class="form" id="form">

    <fieldset>
        <legend>Check Boxes with Same Name</legend>

    <p>
        <label><input type="checkbox" name="category[]" value="1" />1</label>
        <label><input type="checkbox" name="category[]" value="2" /> 2</label>
        <label><input type="checkbox" name="category[]" value="3" /> 3</label>
        <label><input type="checkbox" name="category[]" value="4" /> 4</label>
        <label><input type="checkbox" name="category[]" value="5" /> 5</label>
        <label><input type="checkbox" name="category[]" value="6" /> 6</label>
    </p>

    </fieldset>
    <button type="submit">
    Submit
    </button>

</form>

JQuery будет выглядеть примерно так:

$("#form").submit(function(e) {

e.preventDefault();

var urlCall = '/getOfferCategory/action';

$.ajax({
    url: "/echo/html/",
    type: "POST",
    dataType:  "HTML",
    data:  $('#form').serialize()
}).done(function (result, status, xhr) {
    alert(result);
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
});
});

/ echo / html / для Fiddle.