jQuery ajax modal представляет форму при загрузке

Question

У меня есть модальный внешний файл PHP, который включен в мой Ajax. Проблема в том, что когда я нажимаю, чтобы загрузить модальный, он уже отправляет форму, которой она не должна (только когда я нажимаю submit на самом модале).

Я пробовал: e.preventDefault() ;, return false; . $ ("# EditForm") отвязать ('Submit');

Также заметили проблему в jQuery: когда я нажимаю, чтобы получить идентификатор, я получаю правильный идентификатор кнопки (так что, если я редактирую_3, edit_5, edit_7, он будет правильно предупреждать 3, 5, 7, но ajax form получает только идентификатор кнопки FIRST, который я нажал, поэтому, если я нажму кнопку edit_3, предупредить 3, я получу 3 детали, но если я нажму кнопку edit_5 после этого, я получу предупреждение 5, теперь я получаю данные 3.)

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

ссылка, которая запускает:

<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>

И PHP форма/модальный:

<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

можно определить OnClick функцию в теге, а затем вызвать функцию в этой функции, что и сделал.

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

Answer 2

Ну, вы можете изначально предотвратить отправку формы, так же, как это так,

$("form.international").submit(function(event){ 
    event.preventDefault(); 
}); 

Это предотвратит запуск ничего, что отправляет форму

Answer 3

я решил переписать код (PHP) сторону , Теперь, не отправляя идентификатор правильно (другой вопрос в другое время), код больше не отправляется при загрузке. Моя догадка после перезаписи были две кнопки:

<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> 

По какой-то причине (если я найду, я буду повторно редактировать), даже отменить не скрывала модальность, но заполнив форму. Я преобразовал его по ссылке:

<a href="" class="btn btn-info" onclick="$('#modalEditType').modal('hide');">Cancel</a> 

И это, казалось, помогло. Принимая этот ответ, а джай, как оба, были правильными.