jQuery ajax模式在加载时提交表单

Question

I have a modal in an external PHP file that is included in my Ajax. The problem is that when I click to load the modal, it already submits the form, which it shouldn't (only when I press submit on the modal itself).

I've tried: e.preventDefault();, return false; $("#editForm").unbind('submit');

Also noticed a problem in the jQuery: when I click to get the id, I get the correct ID of the button (so if I edit_3, edit_5, edit_7, it will correctly alert 3, 5, 7; but the ajax form only gets the FIRST button id I clicked. So if I click edit_3, alert 3, I get 3's details; but if I click edit_5 after, I get alert 5, I get 3's details now.)

jQuery/Ajax:

$(function() {
 $( ".edit" ).click(function(e){
    var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault(); ajax also only sends ID of first edit I click, 
      // not the current one.
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });

    //return false; 
 });
});

the link that triggers:

<a href="#modalEditType" class="edit" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

And the PHP form/modal:

<form class="international" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="form-join">
   <div class="row col-lg-12">
    <div class="form-group">
    <label class="control-label col-lg-3">Type Name</label>
    <input type="text" id="title" name="title" placeholder="Type Name" class="form-control" value="<?php echo $type['title']; ?>" required />
 </div>
 <div class="col-sm-12">
   <button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
   <button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>
  </div>
    <input type="hidden" value="0" name="submitme"/>
   </form>

Answer 1

You can define onclick function in a tag and then call the function in that function that u made.

     <a href="#modalEditType" class="edit" onclick="sub_form()" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

function sub_form()
{
 var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });
}