戻る

JavaScriptでフォームの送信確認をする（DOM）

記述方法１

氏名：

MAIL：

URL：

内容：

<script>
function fncSubmit(){
	document.getElementById("frm1").parentNode.childNodes[3].innerHTML = "";
	
	if(window.confirm("送信しますか")){
		document.getElementById("frm1").submit();
	}
	else{
		document.getElementById("frm1").parentNode.childNodes[3].innerHTML = "キャンセルしました";
		return false;
	}
}
</script>
<form name="frm1" id="frm1" action="http://www.yahoo.co.jp" method="POST" onsubmit="fncSubmit();return false;">
<fieldset>
	氏名：<input name="name" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	MAIL：<input name="mail" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	URL：<input name="url" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	内容：
	<textarea name="content" data-role="none"></textarea>
</fieldset>
<fieldset>
	<input type="submit" name="smt" value="submitで送信" data-role="none">
	<input type="button" name="btn" value="buttonで送信" onclick="fncSubmit()" data-role="none">
</fieldset>
</form>

記述方法２

氏名：

MAIL：

URL：

内容：

<script>
document.frm2.onsubmit = function(){
	fncFrm2Submit();
	return false;
}

document.frm2.btn.onclick = function(){
	fncFrm2Submit();
}

function fncFrm2Submit(){
	document.getElementById("frm2").parentNode.childNodes[15].innerHTML = "";
	
	if(window.confirm("送信しますか")){
		alert("送信しました");
		document.frm2.submit();
	}
	else{
		alert("送信しませんでした");
	}
}
</script>
<form name="frm2" action="http://www.yahoo.co.jp" method="POST">
<fieldset>
	氏名：<input name="name" type="text" value="">
</fieldset>
<fieldset>
	MAIL：<input name="mail" type="text" value="">
</fieldset>
<fieldset>
	URL：<input name="url" type="text" value="">
</fieldset>
<fieldset>
	内容：
	<textarea name="content"></textarea>
</fieldset>
<fieldset>
	<input type="submit" name="smt" value="submitで送信">
	<input type="button" name="btn" value="buttonで送信">
</fieldset>
</form>

記述方法３

氏名：

MAIL：

URL：

内容：

<script>
document.getElementById("frm3").addEventListener("submit",function(event){
	fncFrm3Submit();
	event.preventDefault();
});

document.getElementById("frm3").childNodes[9].childNodes[3].addEventListener("click",function(){
	fncFrm3Submit();
});

function fncFrm3Submit(){
	document.getElementById("frm3").parentNode.childNodes[27].innerHTML = "";
	
	if(window.confirm("送信しますか")){
		document.getElementById("frm3").submit();
	}
	else{
		document.getElementById("frm3").parentNode.childNodes[27].innerHTML = "キャンセルしました";
		return false;
	}
}
</script>
<form name="frm3" id="frm3" action="http://www.yahoo.co.jp" method="POST">
<fieldset>
	氏名：<input name="name" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	MAIL：<input name="mail" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	URL：<input name="url" type="text" value="" data-role="none">
</fieldset>
<fieldset>
	内容：
	<textarea name="content" data-role="none"></textarea>
</fieldset>
<fieldset>
	<input type="submit" name="smt" value="submitで送信" data-role="none">
	<input type="button" name="btn" value="buttonで送信" data-role="none">
</fieldset>
</form>

Copyright © 2012 YOHSUKE NAKANO