单击div而不是点击提交然后传递参数

Question

I've got a form with a submit button on a form that opens up a nested php page within a div on my page.

All I want to do is hide the submit button, and instead replace this with clicking one of the divs and thus running a script called showBiog(key), which then passes key to the form for submitting.... help... ;-)

<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {

    $.ajax({
            url: 'test2.php',
            type: 'POST',
            dataType: 'html',
            data: $('#SubmitForm').serialize(),
            success: function(content)
            {
                $("#DisplayDiv").html(content);
            }  
    });

    event.preventDefault();
});

});
</script>

HTML is:

 <form id="SubmitForm" method="post">
        <div id="SubmitDiv" style="background-color:black;">
            <button type="submit" class="btnSubmit">Submit</button>
        </div>
</form>

<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>

Answer 1

Just remove the button element, and do something like:

$('#myspecificdiv').on('click', function() {
     $('#SubmitForm').submit();
}