dimanche 6 novembre 2016

Dropzone get value of other form field obtained from ajax

I am using dropzone in the form and I am able to get the value of other field. But the problem is, in one of the select box element the options are obtained from ajax in change event of other select box. After form submit, I am able to get the value of select box of previous but not of the next select box in which options are obtained from ajax. Below are the code. Please help me:

     Dropzone.autoDiscover = false;
     $(function () {
     var myDropzone = new Dropzone("#my-awesome-dropzone", {
        //url: 'someurl',
        acceptedFiles: "image/*",
        autoProcessQueue: false,
        maxFilesize: 10.0,
        //maxFiles: 4,
        parallelUploads: 1,
        uploadMultiple: true,
        init: function () {
            this.on("addedfile", function (file) {
               
            });
            this.on("processing", function () {
                this.options.autoProcessQueue = true;
            });
            this.on("success", function (file, jsonResponse) {

            });
            this.on('error', function (file, response) {
                $(file.previewElement).find('.dz-error-message').text(response.errors.file[0]);
            });
        }
    });

    $('#my-awesome-dropzone').on('submit', function (e) {
        e.preventDefault();

        if ($("#hotelname").val() == 0) {
            $("#hotelname").parents(".form-group").addClass("has-error");
            $("#hotelname").next("span.help-block").html("<strong>You must choose hotel.</strong>");
        } else {
            if ($("#roomname").val() == 0) {
                $("#roomname").parents(".form-group").addClass("has-error");
                $("#roomname").next("span.help-block").html("<strong>You must choose room.</strong>");
            } else {
                myDropzone.processQueue();
            }
        }
        return false;
    });

    $("#hotelname").on("change", function () {
        
        var hotelId = $(this).val();
        $.ajax({
            url: "",
            type: "POST",
            data: {hotelname: hotelId, "_token": ""},
            success: function (data) {
                $("#roomname").html("<option value='0'>Choose Room</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#roomname").append("<option value='" + data[i].roomId + "'>" + data[i].name + "</option>");
                }
            },
            error: function () {
                alert("Error occured");
            }
        });
    });

})
 <form action="" method="post" enctype="multipart/form-data" class="dropzone" id="my-awesome-dropzone">
                    

                    <div class="row">


                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Hotel Name</label>
                            <div class="col-sm-10">

                                <select class="form-control" name="hotelname" id="hotelname">
                                    <option value="0">Choose Hotel</option>
                                    @foreach($hotels as $hotel)
                                    <option value=""></option>
                                    @endforeach
                                </select>


                                <span class="help-block">

                                </span>

                            </div>
                        </div>
                        <br><br>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Room Name</label>
                            <div class="col-sm-10">

                                <select class="form-control" name="roomname" id="roomname">

                                </select>


                                 <span class="help-block">

                                 </span>

                            </div>
                        </div>
                        <br><br>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">

                                <input type="submit" class="btn btn-primary" id="submit-all">

                            </div>
                        </div>
                    </div>
                </form>




    


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire