how to submit form by GET method using js

Question

I'm trying to pass values in the url through js but getting the error below

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)

Javascript

$(document).on('submit','#adminProductFilter',function () {
            var category_id = $('#category').val();
            var prdouct_name = $('#productName').val();
            var link = '{{url('/admin/products?:id')}}';
            var url = link.replace(':id',"categories_id="+category_id+"&product="+prdouct_name);
            $(this).attr('action',url);
            $('#adminProductFilter').submit();
        });

Form.php

<form class="form-inline form-validate" enctype="multipart/form-data" id="adminProductFilter">
                        {{csrf_field()}}
                      <div class="form-group">
                        <h5 style="font-weight: bold; padding:0px 5px; ">{{ trans('labels.FilterByCategory/Products') }}:</h5>
                      </div>
                      <div class="form-group" style="min-width: 220px">
                        <select class="form-control" name="categories_id" style="width: 100%" id="category">
                            <option value="">{{ trans('labels.SelectCategory') }}</option>
                            @foreach ($results['subCategories'] as  $key=>$subCategories)
                                <option value="{{ $subCategories->id }}"
                                    @if(isset($_REQUEST['categories_id']) and !empty($_REQUEST['categories_id']))
                                        @if( $subCategories->id == $_REQUEST['categories_id'])
                                            selected
                                        @endif
                                    @endif
                                >{{ $subCategories->name }}</option>
                            @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <input type="text" name="product" class="form-control" id="productName"
                            @if(isset($_REQUEST['product']) and !empty($_REQUEST['product']))
                                value="{{ $_REQUEST['product'] }}"
                            @endif
                         placeholder="Products">
                      </div>
                      <button type="submit" class="btn btn-success">{{ trans('labels.Search') }}</button>
                      <a href="{{ URL::to('admin/products')}}" class="btn btn-danger">{{ trans('labels.ClearSearch') }}</a>
                    </form>

Route.php

Route::get('/products', 'AdminMasterProductsController@products');

When i click submit button it is showing url in the form action but the form is not getting submitted.

I just wanted to submit the form and get the result.

Please Help.

You have to [preventDefault](https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) the form `event.preventDefault();` — Roy Bogado, Jun 12 '19 at 07:53
I would suggest having a look at this tutorial [Laravel form submission](https://www.youtube.com/watch?v=tBHa-HOsj3Q) as it seems that you are over complicating your form submission. — Jelly Bean, Jun 12 '19 at 08:25

score 0 · Accepted Answer · answered Jun 12 '19 at 10:11

You can change the attribute of submit button to 'button', give it an id.

<form class="form-inline form-validate" enctype="multipart/form-data" id="adminProductFilter">
                        {{csrf_field()}}
                      <div class="form-group">
                        <h5 style="font-weight: bold; padding:0px 5px; ">{{ trans('labels.FilterByCategory/Products') }}:</h5>
                      </div>
                      <div class="form-group" style="min-width: 220px">
                        <select class="form-control" name="categories_id" style="width: 100%" id="category">
                            <option value="">{{ trans('labels.SelectCategory') }}</option>
                            @foreach ($results['subCategories'] as  $key=>$subCategories)
                                <option value="{{ $subCategories->id }}"
                                    @if(isset($_REQUEST['categories_id']) and !empty($_REQUEST['categories_id']))
                                        @if( $subCategories->id == $_REQUEST['categories_id'])
                                            selected
                                        @endif
                                    @endif
                                >{{ $subCategories->name }}</option>
                            @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <input type="text" name="product" class="form-control" id="productName"
                            @if(isset($_REQUEST['product']) and !empty($_REQUEST['product']))
                                value="{{ $_REQUEST['product'] }}"
                            @endif
                         placeholder="Products">
                      </div>
                      <button type="button" id='btn-submit' class="btn btn-success">{{ trans('labels.Search') }}</button>
                      <a href="{{ URL::to('admin/products')}}" class="btn btn-danger">{{ trans('labels.ClearSearch') }}</a>
                    </form>

And submit through event click.

$("#btn-submit").click(function(){
         var category_id = $('#category').val();
            var prdouct_name = $('#productName').val();
            var link = '{{url('/admin/products?:id')}}';
            var url = link.replace(':id',"categories_id="+category_id+"&product="+prdouct_name);
            $("#adminProductFilter").attr('action',url);
            $('#adminProductFilter').submit();
})

thank you guys for your replies and I got the solution. The issue is both form are validate and I'm using same validation java script for both forms. which i change and add validation according to id of that particular form so it's work. — V001, Jun 13 '19 at 05:17

how to submit form by GET method using js

1 Answers1