ユーザーが URL を入力できる入力要素を持つフォームがあります。これは、入力フィールドが表示される編集ボタンをクリックしたときに発生します。
ユーザーが URL の入力を開始してキャンセル ボタンをクリックすると、入力内容が null になり、入力フィールドがビューから再び非表示になります (display:none で要素にクラスが追加されます)。
ここで問題が発生します。ユーザーが何かを入力して保存ボタンをクリックすると、データ (URL) が ajax 要求と共にサーバーに送信されます。つまり、次回フォームが読み込まれたときに、送信された URL が表示されます。その時点でフォームを編集することを選択し、キャンセル ボタンを押すと、送信された URL が表示されなくなります...ここでは送信されたデータについて話しているため、もちろん望ましくありません。
提出されたデータと提出されていないデータをキャンセルする方法。
最初はキャンセル ボタンのクリックに関連し、次に入力要素にクラスを追加する関数に関連するコードを次に示します。
$('#canceladrs').click(function() {
var urlcancel=$.trim($('input#wwwaddress').val());
save=2;
close_url(save,urlcancel);
closeaddress();
});
here is the close_url() function
function close_url(savearg,urlarg,cancelarg)
{
console.log(urlarg);
if(savearg===1)// save button clicking here
{ if(urlarg==='')
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
$('input#wwwaddress').val(null);
}
else if(urlarg!=='')
{
$('input#wwwaddress').removeClass('hideurl');
$('label[for=url]').removeClass('hideurl');
$('input#wwwaddress').val(urlarg);
}
}
else if(savearg===2)//cancel button clicking here
{if((urlarg!=='')||(urlarg===''))
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
}
}
}
上記のように、save=2 を設定してキャンセル ボタンのクリックをマークしようとしています。