使标签充当输入按钮 [英] Make a tag act like input button

问题描述

我怎样才能让一个< a href =http：// test / com / tag / test> Test< / a> 按钮？通过表单按钮的操作，我的意思是当单击链接执行 method =get或发布时，以便能够通过get或post捕获它。

不需要必须是一个链接，我可以适应，以使其工作就像！

解决方案

如果您想使用链接提交表单：

HTML -

 < form action =my-page.phpid =my-formmethod =post> ...< / form> 
< a href =＃id =form-submit> SUBMIT< / a> 
  

JS -

 （'click'，function（）{
 
 //触发提交事件（function）（）{
 $（'＃form-submit'）。在表单
 $（'＃my-form'）。trigger（'submit'）; 
 
 //停止链接的默认行为
返回false; 
}）; 
}）; 
  

code> trigger（）： http://api.jquery.com/trigger

如果您想在不离开页面的情况下提交表单，您可以使用AJAX调用：

  $（function（）{ $（'＃form-submit'）。on（'click'，function（）{
 
 //缓存表单元素以备后用
 var $ form = $ （'＃my-form'）; 
 $ .ajax（{
 url：$ form.attr（'action'）||''，//设置AJAX请求的动作
类型：$ form.attr（'method'）||'get'，//设置AJAX请求的方法
 data：$ form.serialize（），
 success：function（serverResponse） {
 
 //你现在可以做你想做的事，表单已经提交，并且你已经收到了serverResponse 
 alert（'Form Submitted！'）; 
} 
 （''submit'，function（）{
 
 // stop the the''）; 
 $）
 
 $（'＃my-form'）。正常提交表单，例如，如果有人在文本输入框中按下回车键
 return false; 
}）; 
}）; 
  

文件为 $。ajax（）： http://api.jquery.com/jquery.ajax

请注意， .on（）在jQuery 1.7中是新的，在这种情况下与使用 .bind（） 。

How can I make an <a href="http://test/com/tag/test">Test</a> act like a form button? And by acting like a form button I mean that when clicking the link to do a method="get" or post in order to be able to capture it by get or post.

Not necessary has to be a link, I can adapt in order to make it work like that!

解决方案

If you want to submit a form using a link:

HTML --

<form action="my-page.php" id="my-form" method="post">...</form>
<a href="#" id="form-submit">SUBMIT</a>

JS --

$(function () {
    $('#form-submit').on('click', function () {

        //fire the submit event on the form
        $('#my-form').trigger('submit');

        //stop the default behavior of the link
        return false;
    });
});

Docs for trigger(): http://api.jquery.com/trigger

If you want to submit the form without leaving the page, you can use an AJAX call:

$(function () {
    $('#form-submit').on('click', function () {

        //cache the form element for use later
        var $form = $('#my-form');
        $.ajax({
            url     : $form.attr('action') || '',//set the action of the AJAX request
            type    : $form.attr('method') || 'get',//set the method of the AJAX reqeuest
            data    : $form.serialize(),
            success : function (serverResponse) {

                //you can do what you want now, the form has been submitted, and you have received the serverResponse
                alert('Form Submitted!');
            }
        });
    });

    $('#my-form').on('submit', function () {

        //stop the normal submission of the form, for instance if someone presses the enter key inside a text input
        return false;
    });
});

Docs for $.ajax(): http://api.jquery.com/jquery.ajax

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind().

这篇关于使标签充当输入按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！