Jquery - Как заменить значение выбранного элемента, а затем отправить

Question

Проблема:

Вот задача под рукой:

1. У нас есть форма. Эта форма имеет скрытое поле ввода с именем и идентификатором "page"
2. У меня есть ссылки на страницы. Когда форма отправлена, результаты разбиваются на страницы. Ссылки имеют номера страниц, содержащиеся в их атрибуте href.
3. При нажатии на ссылку нумерации страниц я хочу извлечь номер страницы из ссылки нумерации страниц. (это хранится в переменной pageNumber) и замените значение скрытого поля в моей форме на этот pageNumber, а затем отправьте форму (не переходя по ссылке, которая была нажата).

Это вообще возможно? Любые указатели приветствуются.

Вот код, который у меня есть:

(Обратите внимание, что я использую rails, и он содержится в файле application.js:

  $(document).on('turbolinks:load', function(event){        
  var ransack_form = $('form').clone();    // clone the form on page load.
                                           // form is passed into the function.
                                           // <input type="hidden" name="page" id="page" value="4" class="pagy-page">
  $(document).on('click', 'a.page-link', {form: ransack_form}, function(event){  
    var pageNumber = $(this).attr("href");    
    var form = event.data.form;
                // The form has a hidden input element with id and name being: "gage"
                // we want to replace the hidden input's value with the pageNumber value
                // obtained from above. How can this be done?
    form('.pagy-page').val(pageNum);    
    form.submit();  
                // We want to prevent the pagination link from being clicked.
                // event.preventDefault() prevents this from happening 
                // but we also want the form to be submitted at the same time!
                // is there a way around this?                
       });
    });

Обновленный код:

1. Благодаря Barmar мы находимся на этапе, когда у нас есть полностью отредактированная форма, которую нам нужно отправить.
2. Когда ссылка на URL разбита на страницынажата, мы хотим, чтобы форма была отправлена, пока ТАКЖЕ запрещает браузеру переходить по URL-ссылке. По какой-то причине форма не отправляется:

Вот обновленный код:

    $(document).on('turbolinks:load', function(event){        
  var ransack_form = $('form').clone();    // clone the form on page load.
                                           // form is passed into the function.
                                           // <input type="hidden" name="page" id="page" value="4" class="pagy-page">
  $(document).on('click', 'a.page-link', {form: ransack_form}, function(event){  
    var pageNumber = $(this).attr("href");    
    var form = event.data.form;             
    form.find('.pagy-page').val(pageNumber);    
    form.submit();  
    event.preventDefault();
                // We want to prevent the pagination link from being clicked.
                // event.preventDefault() prevents this from happening 
                // but we also want the form to be submitted at the same time!
                // How can we submit the form (and allow the page to be refreshed)
                // while at the same time preventing the url to be clicked.
       });
    });

Окончательное решение:

$(document).on('turbolinks:load', function(event){        
  var ransack_form = $('form').clone();    // clone the form on page load.
                                           // form is passed into the function.
                                           // <input type="hidden" name="page" id="page" value="4" class="pagy-page">
  $(document).on('click', 'a.page-link', {form: ransack_form}, function(event){  
    var pageNumber = $(this).attr("href");    
    var form = event.data.form;             
    form.find('.pagy-page').val(pageNumber);              
    form.appendTo($(this)).submit();    
       });
    });

Answer 1

Исправление проблемы замены формы

form - это объект jQuery, а не функция, поэтому form('.pagy-page') не будет работать. Вам необходимо вызвать метод .find():

form.find('.pagy-page').val(pageNum);

Почему клонированная форма не будет отправлена?

Вы не можете отправить отключенную форму. Попробуйте это:

form.appendTo($(this)).submit();