使标签像输入按钮一样

时间:2012-01-26 19:41:58

标签: javascript jquery post get hyperlink

如何将<a href="http://test/com/tag/test">Test</a>表示为表单按钮?通过表现形式按钮,我的意思是点击链接进行method="get"或发布,以便能够通过获取或发布来捕获它。

没有必要是一个链接,我可以调整,以使它像这样工作!

3 个答案:

答案 0 :(得分:5)

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

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

trigger()的文档:http://api.jquery.com/trigger

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

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

$.ajax()的文档:http://api.jquery.com/jquery.ajax

请注意,.on()是jQuery 1.7中的新增内容,在这种情况下与使用.bind()相同。

答案 1 :(得分:2)

<form ....>
    <a id="whatever" href="http://test/com/tag/test">Test</a>
</form>

假设您的表单中有任何带有ID的元素,您可以使用jQuery选择该ID并在其上附加click事件。在这种特殊情况下,它还会使用get来请求来自/whatever.php的数据,您应该对其进行微调以同时使用get/post并根据您的需要序列化表单数据。< / p>

$("#whatever").click(function(){
  $.get("/whatever.php");
});

答案 2 :(得分:0)

没有jQuery

<form id="your_form">
    <a href="javascript:{}" onclick="document.getElementById('your_form').submit(); return false;">submit</a>
</form>