みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascript フォームについて

javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか?
onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが
そのときのchk()の中身やif文の条件がわからないのです。

どのようにすれば上手くいくでしょうか?
回答よろしくお願いします。


ソースは以下のとおりです。
<script language="javascript">
function send() {
document.nform.submit();
document.nform2.submit();
document.nform3.submit();
}

function chk1(frm){
if(frm.elements["txt1"].value==""){
alert("解答欄に空白があります");
/* FALSEを返してフォームは送信しない */
return false;
}else{
/* TRUEを返してフォーム送信 */
return true;
}
}

</script>

<form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain">
<p>問1</p>
<p>
(1)<input type="text" name="kaitouran11" size="20">
(2)<input type="text" name="kaitouran12" size="20">
(3)<input type="text" name="kaitouran13" size="20">
(4)<input type="text" name="kaitouran14" size="20">
</p>
</form>

<form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain">
<p>問2</p>
<p>
(1)<input type="text" name="kaitouran21" size="20">
(2)<input type="text" name="kaitouran22" size="20">
(3)<input type="text" name="kaitouran23" size="20">
(4)<input type="text" name="kaitouran24" size="20">
</p>
</form>

<form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain">
<p>問3</p>
<p>
(1)<input type="text" name="kaitouran31" size="20">
(2)<input type="text" name="kaitouran32" size="20">
(3)<input type="text" name="kaitouran33" size="20">
(4)<input type="text" name="kaitouran34" size="20">
</p>
</form>

<input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">

投稿日時 - 2013-11-19 22:29:08

QNo.8354202

すぐに回答ほしいです

質問者が選んだベストアンサー

onsubmit はフォームのイベントなので、ボタンに付けても意味がありません。
今回の例ならば、送信ボタンの onclick にてチェックと送信を纏めて行うのが簡単かと。

<script> var _ = 0; // 読みやすくするオマジナイ
function send() {
_ ; function chk1(frm, names){
_ , _ ; var r = true;
_ , _ ; for (var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value != '');
_ , _ ; return r;
_ ; }
_ ; var r = true;
_ ; r &= chk1(document.forms['nform'], ['kaitouran11','kaitouran12','kaitouran13','kaitouran14']);
_ ; r &= chk1(document.forms['nform2'], ['kaitouran21','kaitouran22','kaitouran23','kaitouran24']);
_ ; r &= chk1(document.forms['nform3'], ['kaitouran31','kaitouran32','kaitouran33','kaitouran34']);
_ ; if (r) {
_ , _ ; document.forms['nform'].submit();
_ , _ ; document.forms['nform2'].submit();
_ , _ ; document.forms['nform3'].submit();
_ ; } else {
_ , _ ; alert('解答欄に空白があります');
_ ; }
}
</script>

(中略)

<input type="button" value="送信" onclick="send()">

投稿日時 - 2013-11-21 10:30:57

補足

回答ありがとうございます。
教えていただいたソースを自分で作ったソースに導入してみたところ、

>var = 0; // 読みやすくするオマジナイ
の部分が悪さをしており(なんどか置く場所などを変更しました)上手くプログラムが動作してくれません

どのようにすればうまく起動しますでしょうか?

以下ソースです。
<script type="text/javascript">

function varTest(){
debugClear();
debug(" 問題1");

var test1 = "問題文";
debug(test1);

var space1 = "";
debug(space1);
var testTitle = " 問題2";
debug(testTitle);

var test2 = "問題文";
debug(test2);

var space2 = "";
debug(space2);
var testTitle2 = " 問題3";
debug(testTitle2);

var test3 = "問題文";

debug(test3);

}

function mes()
{

window.open('example.html', 'mywindow2', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');

}


function debug(str){
document.getElementById("debug").innerHTML += "</br>" + str;
}

function debugClear(){
document.getElementById("debug").innerHTML += "";
}

var = 0;

function send(){
function chk1(frm, names){
var r = true;
for(var i = 0; i < name.lenght; i++) r &= (frm.elements[names[i].value != '']);
return r;
}

var r = true;
r &= chk1(document.forms['nform1'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14']);
r &= chk1(document.forms['nform2'],['kaitouran21','kaitouran22','kaitouran23','kaitouran24']);
r &= chk1(document.forms['nform3'],['kaitouran31','kaitouran32','kaitouran33','kaitouran34']);

if(r){
document.form['nform1'].submit();
document.form['nform2'].submit();
document.form['nform3'].submit();
}

else{
alert('解答欄に空白があります');
}
}

</script>
</head>
<body>
<h1>テスト1回目</h1>


<form>
<input type="button" value="テスト開始" onclick="varTest(); setTimeout('mes()',5*1000);"/>
</form>

<div id="debug"></div>
<form name="nform1" method="POST" action="./include/test.php" enctype="text/plain">
<p>問1</p>
<p>
(1)<input type="text" name="kaitouran11" size="20">
(2)<input type="text" name="kaitouran12" size="20">
(3)<input type="text" name="kaitouran13" size="20">
(4)<input type="text" name="kaitouran14" size="20">
</p>
</form>

<form name="nform2" method="POST" action="./include/test.php" enctype="text/plain">
<p>問2</p>
<p>
(1)<input type="text" name="kaitouran21" size="20">
(2)<input type="text" name="kaitouran22" size="20">
(3)<input type="text" name="kaitouran23" size="20">
(4)<input type="text" name="kaitouran24" size="20">
</p>
</form>

<form name="nform3" method="POST" action="./include/test.php" enctype="text/plain">
<p>問3</p>
<p>
(1)<input type="text" name="kaitouran31" size="20">
(2)<input type="text" name="kaitouran32" size="20">
(3)<input type="text" name="kaitouran33" size="20">
(4)<input type="text" name="kaitouran34" size="20">
</p>
</form>

<input type="button" value="送信" onClick="send()">


</body>

投稿日時 - 2013-11-21 18:16:04

お礼

すいません。解決しました。どうやらほかの部分でミスを起こしていたようでした。大変ご迷惑をおかけしました。

投稿日時 - 2013-11-22 16:44:46

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問