ChiefJS's avatar

Form Submit

When I submit my form, the value from the model dropdown cannot be posted although I can select data from the dropdown. The code from my view:

<form class="form" id="form-add">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    @foreach($members as $member)
    <div class="form-group col-md-3" style="display: none;">
        <input type="text" name="user_id" class="form-control" value="{{ $member->user_id }}">

    </div>
    @endforeach

    <div class="form-group col-md-5">
        <label for="cartype">Car Type</label>
        <select name="cartype" id="cartype" class="form-control">
            <option>Choose a car type</option>
            @foreach($types as $type)
            <option value="{{ $type->cartypeid }}">{{ $type->car_type }}</option>

            @endforeach

        </select>

    </div>
    <div class="form-group col-md-5">
        <label for="model">Model</label>
        <select name="model" id="model" class="form-control">
            <option value=""></option>

        </select>

    </div>
    <div class="form-group col-md-2">
        <button type="submit" class="btn add-btn btn-primary">Add</button>

    </div>

</form>

The Javascript code:

$('#cartype').on('change', function(e){
    console.log(e);
    var car_id = e.target.value;
    $.get('/ajax-model?modid=' + car_id, function (data) {
        $('#model').empty();
        $.each(data, function (index, accssObj) {
            $('#model').append('<option value="' + modObj.modelid + '">' + modObj.model + '</option>');
        })
    })

});
$(function(){
    $('#form-add').submit(function(e){
        e.preventDefault();
        var _token = $('input[name="_token"]').val();
        var user_id = $('input[name="user_id"]').val();
        var model = $('input[name="model"]').val();

        var data = new FormData();
        data.append('_token', _token);
        data.append('user_id', user_id);
        data.append('model', model);

        $.ajax({
            url: '/save',
            type: 'POST',
            data:data,
            dataType: "json",
            processData: false,
            success:function(data){
                alert('Item added!');
            },
            error:function(data){
                alert('Failed!');
            }
        });

    });
});
0 likes
7 replies
bugsysha's avatar

Nope. That is blade. We can not see what foreach loop will produce.

ChiefJS's avatar

@bugsysha It's a dynamic select dropdown.

<div class="form-group col-md-5">
    <label for="cartype">Car Type</label>
    <select name="cartype" id="cartype" class="form-control parent">
        <option>Choose a car type</option>
        <option value="1">BMW</option>

        <option value="2">Mercedes</option>


    </select>

</div>
<div class="form-group col-md-5">
    <label for="access">Model</label>
    <select name="model" id="model" class="form-control">
        <option value=""></option>

    </select>

</div>

I was able to submit the form just fine until I tried to use AJAX

bugsysha's avatar

When ever your topic isn't on first page of discussions you create a new one?

StefanoRuth's avatar

You are not mapping name=cartype to the ajax data post and thats why you dont se the data

Please or to participate in this conversation.