ページに既に存在する要素を追加すると、ユーザーに表示されるアラートがあります。オートコンプリートがあり、ユーザーがアイテムを選択した場合、要素が既に追加されていることを警告します。ただし、アラートの [OK] をクリックすると、不要なフォームが送信されます。これは、特定のケースでのみ発生します。オートコンプリート要素で Enter キーを押すと発生し、要素が存在する場合はアラートを出します。次に、アラートで [OK] をクリックすると、フォームが送信されます。フォームの送信を防ぐコードがあります。これが私のコードです:
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
$(".autocomp_centers").autocomplete({
serviceUrl:'/suggest_centers',
maxHeight:400,
width:252,
params: {country: $("#country").val() },
minChars:2,
onSelect: function(value, data){
var ids = [];
$("#sister-centers-list > li").each(function(index, value){
ids.push($(value).attr('class'));
});
if ($.inArray("center-"+data, ids) == -1){
$("#hidden-ids").append('<input type="hidden" name="center_ids[]" value="' + data +'" class="center-' + data + '"/>');
$('#sister-centers-list').append('<li class="center-' + data + '">' + value + ' <a href="#sister-center" class="remove-center-before-save" id="' + data + '">Remove</a></li>');
}else{
alert("Sister center has already been added.");
}
$("#sister-search").val("");
}
});
これはレールフォームです:
<%= form_for @center, :url => center_update_sister_centers_path(@center) do |f| %>
<div class="field" style="margin-top:10px;">
<%= f.submit 'Save', :class => "btn purple-button" %>
</div>
送信すべきではないときにフォームが送信されるのはなぜですか? また、これを防ぐにはどうすればよいですか? ありがとう