Onclick表单提交为按钮提交

Question

I have a link with onclick attr to submit my form. Like this:

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

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

The problem is.. I'm using an ajax function to do a non-refresh submit.. And I have another script like this:

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

});

If I use a input button type submit the ajax works.. But it doesnt work using the onclick submit... How can I solve this?

Thanks.

Answer 1

If you are using a <a> attribute then instead of inline onclick attribute write the click function seperately and then use event.preventDefault(); and then submit the form

<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

        });

    }); 
   });

Answer 2

Option 1 You can add css to a submit button to look like a link and replace it with your link.

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

});

I didn't try it but it may help you, just give a try and do reply if helpful.

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