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 对象，而不是一个函数，所以 form('.pagy-page') 不起作用。你需要调用.find()方法：

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

为什么不提交克隆表单？

您不能提交断开连接的表单。试试这个：

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