Jquery - How to replace a selected element's value and then submit

Question

The Problem:

Here is the task at hand:

1. We have have a form. This form has a hidden input field in it with the name and id of "page"
2. I have pagination links. When the form is submitted, the results are paginated. The links have the page numbers contained in their href attribute.
3. When a pagination link is clicked, I want to extract the page number from the pagination link. (this is stored in the pageNumber variable), and replace the hidden field's value in my form with this pageNumber, and then submit the form (without following through on the pagination link that was clicked).

Is this at all possible? Any pointers would be much appreciated.

Here is the code I have so far:

(Note I am using rails, and this is contained in the application.js file:

  $(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?                
       });
    });

Updated Code:

1. Thanks to Barmar we are at the stage where we now have a fully edited form that we need to submit.
2. When the pagination URL link is clicked, we want the form to be submitted WHILE ALSO preventing the browser from following the URL link. For some reason, the form is not being submitted:

Here is the updated code:

    $(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.
       });
    });

The Final Solution:

$(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

Fixing The Form Replacement Problem

form is a jQuery object, not a function, so form('.pagy-page') won't work. You need to call the .find() method:

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

Why Won't a Cloned Form be submitted?

You cannot submit a disconnected form. Try this:

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