Jquery - 如何替換選定元素的值然后提交

Question

問題：

這是手頭的任務：

1. 我們有一個表格。 此表單中有一個隱藏的輸入字段，其中包含“頁面”的名稱和 ID
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 object，而不是 function，所以form('.pagy-page')不起作用。 您需要調用.find()方法：

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

為什么不提交克隆表單？

您不能提交斷開連接的表單。 嘗試這個：

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