点击链接后发送表格

Question

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

为链接tag设置一个点击事件，它执行以下操作：

• 阻止跟随链接的默认操作。
• 通过将操作设置为链接的 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

如果您想在点击时将action 您的表单设置为href 您的链接，请尝试以下操作：

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

这是working Fiddle。

Answer 2

你看到你的链接对象是在哪里定义的。 linkObject 在 ( ) 里面。

你定义了这个变量吗？

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

您的a 元素应如下所示：

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

Answer 3

一种选择是将表单提交按钮设置为像链接一样的样式。你可以在这里看到：

How to make button look like a link?

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

Use a normal link to submit a form

两者都会满足您的需求。

Answer 4

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

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

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');
            });
        }
    });
});