单击 link 后发送表单

Question

我有一个 HTML 表格，我想使用 link 提交它。表格必须发送到 link 的 href。这是我的想法：

将点击事件设置为 link tag 执行以下操作：

阻止遵循 link 的默认操作。
通过将操作设置为 link 的 href 来编辑表单。
使用 jquery submit() 函数提交表单。

我正在寻找无需更改 html 的解决方案，只需 javascript.

我试过了，但没用。这是我的代码：

Javascript:

jQuery('.row_header').find('td').each(function(){
    var cell = jQuery(this);
    cell.find('a').each(function(){
        //Get last link in cell. There is only one
        linkObject = jQuery(this);
    });     

    //Gets form
    var form = jQuery('#searchForm');

    if(typeof linkObject !== 'undefined'){
        //Get location url for form
        var url = linkObject.attr('href');

        linkObject.click(function(e){
            //Prevent default (following link)
            e.preventDefault(); 
            //Set location from link as form action     
            form.attr('action',url);
            //Submits form
            form.submit();

        });
    }
});

HTML:

<form id="searchForm">
    <input type="text" name="myInput" value="myValue">
    <input type="submit" name="mySubmit" value="mySubmitValue">
</form>

<table>
    <tr class="row_header"><td><a href="myLocation.php">The Link </a></td></tr>
</table>

Answer 1

一个选项是将表单提交按钮的样式设置为 link。你可以在这里看到：

How to make button look like a link?

或者让 link 使用 javascript 提交表单。喜欢这里：

Use a normal link to submit a form

两者都能满足您的需求。

Answer 2

JQuery 提交函数将处理程序绑定到提交事件。

你可以使用AJAX，例如发送数据

Answer 3

如果你想设置 action 你的表单 href 你的 link 单击后，尝试以下操作：

 $( "#myLink" ).click(function() {
   var form =  $( "#searchForm" ); 
   form.action=$(this).attr('href');
   console.log(form.action);
   form.submit();
 });

这里是working Fiddle.

Answer 4

你看看你的 link 对象在哪里定义的。在 ( ).

里面有 linkObject

这个变量你定义了吗？

您使用了 a 元素，该元素会将您带到 link。所以你必须使用像这样开始的属性 data- 并且你可以让它看起来像 data-href1=' your link' 并将属性 href 设置为 #。

您的 a 元素应该如下所示：

<a href='#' data-href1 ='your link'> click </a>

Answer 5

我找到了解决办法。我仍然不知道为什么，但出于某种原因 .submit() 没有调用提交函数。我的解决方法是找到提交按钮并点击该按钮：

form.find('#submitId').trigger('click');

代替

form.submit()

和

 <input type="submit" name="mySubmit" id="submitId" value="mySubmitValue">

代替

 <input type="submit" name="mySubmit" value="mySubmitValue">

虽然不需要编辑 html，但是您必须编辑 find() 函数以查找名称或类型的提交。在查找结果时，我还稍微更改了代码。这是最终的 JS:

jQuery(function(){
    jQuery('.row_header').find('td').each(function(){

        var linkObject = jQuery(this).find('a');

        if(typeof linkObject !== 'undefined'){

            linkObject.click(function(e){
                //Prevent following the link
                e.preventDefault();
                //Get url
                var url = jQuery(this).attr('href');     
                //Get form              
                var form = jQuery('#searchForm');
                //Change form action
                form.action = jQuery(this).attr('href');
                //Click submit button
                form.find('#submitId').trigger('click');
            });
        }
    });
});

单击 link 后发送表单

Send form after clicking on link

html

javascript

forms

jquery