0

I have two forms one with product details like price, description and name. And the other with images, they both have different Ajax but they send data to the same route. I want to submit them with one button. So if I click a submit button it should submit all data at once which are price, name, image etc. How can I do this if possible?

Blade file

    //Form1

    <form id="form1">
      <input type="hidden" value="{{csrf_token()}}" id="token"/>
       <label for="name">Name</label>
        <input type="text" class="form-control" name="name" id="name" 
          placeholder="Enter product name">
           <label for="price">Price</label>
            <input type="text" class="form-control" name="price" id="price" 
             placeholder="Enter product price">
        </form>



   //Form2
     <form id="file_form" method="post" enctype="multipart/form-data">
       <input type="hidden" value="{{csrf_token()}}" id="token"/>
         <label for="images">Choose Images</label>
      <input id="files" type="file" class="" name="files[]" multiple />
      </form>


       //Submit Button
       <input type='button' class="btn btn-primary" value="Submit" id="btn"/>  

Javascript

    //Form1 javascript
    var token = $("#token").val();
    $(document).ready(function(){
    $("#btn").click(function(){
    var url = '{{ route('product.store') }}';
    var form = $('form')[0]; 
    var formData = new FormData(form);
    formData.append('_token', token); 
    $.ajax({
        url: url,
        data: formData, 
        type: 'POST',
        cache: false,
        contentType: false, 
        processData: false, 
        success:function(data){
        if($.isEmptyObject(data.error)){
        $("#msg").html("Product has been added successfull");
        $("#msg").fadeOut(3000);
         }

        }
    });

});



  //Form 2 Javascript
    $("#btn").click(function (e) {
            e.preventDefault();
            file_area = $('.file-area');
            progressbar = $('.progress-bar');
            status_bar = $('#status');
            image_list = $(".image-list");
            status_bar.css('display', 'block');
            status_bar.html('<div class="fa-3x">' +
                    '<i class="fas fa-spinner fa-pulse"></i>' +
                    '</div>');
            if (selected_files.length < 1) {
                status_bar.html('<li class="error">Please select file</li>')
            } else {
                var data = new FormData();
                data.append('_token', token);
                for (var i = 0, len = selected_files.length; i < len; i++) {
                    data.append('files[]', selected_files[i]);
                }
                fiel_feild = $('#files');
                $.ajax({
                    url: '{{ route('product.store') }}',
                    type: 'POST',
                    data: data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (response) {
                        result = JSON.parse(response);
                        if (result['status'] == 'error') {
                            status_bar.html(result['error']);
                        } else if (result['status'] == 'success') {
                            selected_files = [];
                            image_list.html('');
                            file_area.css('display', 'none');
                            status_bar.html('<li class="success">File uploaded successfully.</li>');
                        }
                    }
                });
                return false;
            }
        });
user11710915
  • 436
  • 7
  • 29
  • why not make them into a single form? –  Dec 14 '19 at 14:37
  • I have tried to make them in a single form but the images were not deleted correctly, so if I choose two images then remove one , if I submit it will submit two images instead of one. @Unknown – user11710915 Dec 14 '19 at 14:39

0 Answers0