Onclick 表单提交为按钮提交答案

【问题标题】：Onclick form submit as button submitOnclick 表单提交为按钮提交
【发布时间】：2015-08-19 21:48:42
【问题描述】：

我有一个带有 onclick attr 的链接来提交我的表单。像这样：

<a href="javascript:void(0);" onclick="myFunc()">lorem ipsum</a>

function myFunc() {
$('.ajaxform').submit();
}

问题是.. 我正在使用 ajax 函数进行非刷新提交.. 我还有另一个这样的脚本：

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

如果我使用输入按钮类型提交，则 ajax 可以工作..但使用 onclick 提交不起作用...我该如何解决这个问题？

谢谢。

【问题讨论】：

您正在使用ajaxform 和myForm 这是正确的类
除此之外还好jsfiddle.net/arunpjohny/um9acxfw/2
对不起..正确的是ajaxform
修复错误了吗
没有.. 仍然卡住 =(

标签： javascript php jquery ajax

【解决方案1】：

如果您使用的是<a> 属性，则不要使用内联onclick 属性，而是单独编写click 函数，然后使用event.preventDefault();，然后提交表单

<a id='someId' href="javascript:void(0);" onclick="myFunc()">Submit</a> //Give some id
    $(function(){
     $('#someId').click(function(){
     event.preventDefault(); //This will prevent the default action of <a> attribute

     $('.ajaxform').submit(function(){
      //write the functionality here

        });

    }); 
   });

【讨论】：

【解决方案2】：

选项 1 您可以将 css 添加到提交按钮，使其看起来像一个链接，然后用您的链接替换它。

选项 2

HTML

<form id="form1" method="POST" action="#" >
<input type="text" class="youwant" name="youwant" id="youwant" />
<a href="#" class="myform" id="myform">lorem ipsum</a>
</form>

JavaScript

jQuery(document).ready(function(){

    $('#myform').on("click", function(event) {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

我没有尝试过，但它可能对您有帮助，请尝试一下，如果有帮助请回复。

【讨论】：

【解决方案3】：

$(function() {
 $("#tbutton").click(function(){
     var frmValues = $('#validation').serialize();
     $.ajax({
    type: $this.attr('method'),
    url: "hello.php",
    data: frmValues
})
.done(function () {
    $("#para").text("Serialized! Input String is " + frmValues);
})
.fail(function () {
    $("#para").text("An error occured");
});
event.preventDefault();
 });
});

【讨论】：