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();