CODEWITHSUNDEEP
javascriptjquery
Benjoe
Benjoe

Reputation: 466

Appending custom value in form data before submitting

I want to add custom parameters to the form before submitting it. This is to retain the current filters.

I have the following and it's not working. I've also tried $("#search-form").submit(formData); but it's throwing error.

$(".jump-to-page").on('keyup', function (e) {
  var formData = $('#search-form').serialize();
  if (e.key === 'Enter' || e.keyCode === 13) {
    formData += "&page=" + $(this).val();
    $("#search-form").submit();
  }
});

HTML:

<form class="pb-0" id="search-form" action="/tickets" method="GET">
  <div class="row">
    <div class="col-sm-3">
      <div><label>Keyword</label></div>
      <input class="form-control mb-3" type="text" name="keyword" value="{{ app('request')->input('keyword') }}" placeholder="Search by title or code"/>
    </div>
    <div class="col-sm-3">
      <div><label>Type</label></div>
      <select class="form-control mb-3" name="type">
        <option value="">-- None --</option>
        @foreach($modelInstance->getSupportTicketTypeList() as $item)
          <option value="{{ $item->id }}" {{ $item->id == app('request')->input('type')  ? 'selected':'' }}>{{ $item->name }}</option>
        @endforeach
      </select>
    </div>

Expected URL must be mysite.com/mypage?keyword=&type=&page=3

CAME UP WITH THIS SOLUTION:

$(".jump-to-page").on('keyup', function (e) {
    var formData = $('#search-form');
    var input = '<input type="hidden" name="page" value="'+$(this).val()+'"/>';
    if (e.key === 'Enter' || e.keyCode === 13) {
        formData.append(input);
        $("#search-form").submit();
    }
});

Upvotes: 0

Views: 701

Answers (1)

flyingfox
flyingfox

Reputation: 13506

First you need add <input type="hidden" id="page" name="page"> inside your form(as phil said)

Second,you need to set the value of page before submit

JS code:

$(".jump-to-page").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        $("#page").val($(this).val());//set page value here
        $("#search-form").submit();
    }
});

HTML code:

<form class="pb-0" id="search-form" action="/tickets" method="GET">
        <input type="hidden" id="page" name="page"/>
        <div class="row">
            <div class="col-sm-3">
                <div><label>Keyword</label></div>
                <input class="form-control mb-3" type="text" name="keyword" value="{{ app('request')->input('keyword') }}" placeholder="Search by title or code"/>
            </div>
            <div class="col-sm-3">
                <div><label>Type</label></div>
                <select class="form-control mb-3" name="type">
                    <option value="">-- None --</option>
                    @foreach($modelInstance->getSupportTicketTypeList() as $item)
                    <option value="{{ $item->id }}" {{ $item->id == app('request')->input('type')  ? 'selected':'' }}>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>
 </form>

Upvotes: 2

Related Questions