Question

If i have something like:

<form method="post" id="customForm" action="">
    //stuff 

    <div id="copiar">
        <button class="button" href="#" id="btnAdd0">
            <span class="icon icon3">&nbsp;</span>
        </button>
        <button class="button" href="#" id="btnDel0">
            <span class="icon icon58">&nbsp;</span>
        </button>
        <button class="submeter">
            <span class="label">Send</span>
        </button>
    </div>  
    </form>

and:

<script type="text/javascript">
    $(document).ready(function() {
        $("#customForm").submit(function() {
            var formdata = $("#customForm").serializeArray();
            $.ajax({
                url: "validation.php",
                type: "post",
                dataType: "json",
                data: formdata,
                success: function(data, data1) {
                   //stuff
            });
            return false;
        });
    });
</script>

At the moment, the three buttons send the form. My idea is only permit the submit action in this button:

<button class="submeter">
    <span class="label">Send</span>
</button>

I already tried $("#customForm > #copiar > button.submeter").submit(function() {
but the page is reloaded. So isn’t working.

Any idea ?

Answer 1

You have to stop the other buttons from submitting first and then do your submit. Also when using an ID for your selector there really isn’t any need to combine it with another ID like #customForm > #copiar “

Try this:

$(document).ready(function() {
    $("#customForm").submit(function(e) {
        e.preventDefault();
        var formdata = $("#customForm").serializeArray();
        $.ajax({
            url: "validation.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data, data1) {
               //stuff
            }
        });
    });
    $("#customForm button").click(function(e) {
        var me = $(this);
        e.preventDefault();

        if(me.hasClass("submeter")) $("#customForm").submit();
    });
});

And as has already been pointed out, you don’t need/want the href=”#”