HTML フォーム Onsubmit() にカスタム確認ボックスを実装する必要があります。これを実装するにはどうすればよいですか?
このようなもの
<form method="post" style="float:left" action="xxx/**"
onsubmit="return confirmfinish()"
confirmfinish() は、カスタム確認ボックスを実装し、適切な値 (true/false) を返す必要があります。
HTML フォーム Onsubmit() にカスタム確認ボックスを実装する必要があります。これを実装するにはどうすればよいですか?
このようなもの
<form method="post" style="float:left" action="xxx/**"
onsubmit="return confirmfinish()"
confirmfinish() は、カスタム確認ボックスを実装し、適切な値 (true/false) を返す必要があります。
私はあなたのFORMタグの例を取り上げ、以下に示すようにいくつか調整しました. これにより、カスタム確認を行うことができます。カスタム確認で [はい] をクリックするまで、フォームの送信が停止されます。
<form id="mainForm" method="post" action="xxx/**" onsubmit="return confirmfinish();">
<input type="text">
<input type="submit">
</form>
<div id="confirmationDiv" style="display:none; border:1px solid black; padding:10px; margin-top:10px; width:500px;">
Are you sure you want to submit the form?<br>
<input type="button" value="Yes" onclick="confirmed = true; document.getElementById('mainForm').submit();">
<input type="button" value="No" onclick="document.getElementById('confirmationDiv').style.display='none'; return false;">
</div>
<script type="text/javascript">
var confirmed = false;
function confirmfinish(){
if(!confirmed){
document.getElementById('confirmationDiv').style.display='block';
return false;
} else {
return true;
}
}
</script>
あなたのコードに基づいて私が持っているこのコードを試してください:
<form method="post" action="xxx/**" onsubmit="return confirmfinish();">
<input type="text">
<input type="submit">
</form>
<script type="text/javascript">
function confirmfinish(){
return confirm("Are you sure you are ready to submit the form?");
}
</script>
以下のようにjquery UIを使用できます
<div id="dialog-confirm" title="Delete Country">
<p>
Are you soure you wont to delete this record ?</p>
</div>
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
model: true,
width: 300,
resizable: false,
height: 200
});
$(".lnkDelete").click(function (e) {
e.preventDefault();
var targeturl = $(this).attr("href");
$("#dialog-confirm").dialog({
buttons: {
"Confirm": function () {
window.location.href = targeturl;
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog("open");
});
});
</script>
私はこれがあなたを助けると思う......
このようなものを使用できます。
function confirmfinish(){
if (confirm("Your question")) {
// do things if OK
}
}
次のような確認ボックスに組み込みの JavaScript のサポートを使用できます。
<script type="text/javascript">
function confirmfinish(){
if (confirm("Are you sure you want Submit the form?") == true)
return true;
else
return false;
}
</script>
また
JavaScriptの組み込みサポートではなく、カスタムコントロールを実装するだけでよい場合
頭を上げて、 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)のこのリンクをクリックしてください。
jAlert を実装するにはjquery.jalerts.js
、ファイルが必要で、次のコードを confirmfinish() に追加する必要があります。
jConfirm('Submit form?', 'Submitting the form', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
それが役に立てば幸い