重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

createElementが一瞬で消えてしまいます

解決済

  • 質問者：livejacker
  • 質問日時：
  • 回答数：2件

<script type="text/javascript">
<!--
function check(){
if(document.loginform.user.value==""){
var element1=document.createElement("span");
element1.innerHTML="Usernameを入力してください。";
element1.className="error0";
var ojbody1=document.getElementById("titlerror1");
ojbody1.appendChild(element1);
false;
}
if(document.loginform.pass.value==""){
var element2=document.createElement("span");
element2.innerHTML="Passwordを入力してください。";
element2.className="error0";
var ojbody2=document.getElementById("titlerror2"); /
ojbody2.appendChild(element2);
false;
}
}

// -->
</script>
<title>ログインページ</title>
</head>

<body>
<div id="error"><font color="red"><?=$error?></font></div>
<div id="loginform">
<form id="loginform" name="loginform" action="index.php" method="post">
<fieldset>
<p>
<div class="titlerror" id="titlerror1">
<label for="user">User Name <span class="hankaku">(半角英数字)</span></label><br />
</div>
<input type="text" name="user" value="" id="user" text-align="middle">
</p>
<p>
<div class="titlerror" id="titlerror2">
<label for="pass">Password <span class="hankaku">(半角英数字)</span></label><br />
</div>
<input type="password" name="pass" value="" id="pass" >
</p>
<div id="submit">
<p class="submit">
<button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button>
</p>
</div>
</fieldset>
</form>
</div>
</body>

javascript初心者です。
これを実行するとつくられたタグが一瞬だけ表示して消えてしまいます。（CSSを付けると）
上記は表示すらしません。
どこが間違っているか、なぜそうなのかを教えていただけると助かります。
お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： yyr446
  • 回答日時：

<button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button>



のonclick="check()"を、onclick="return check();"
にしてみたらどうでしょう。

checkの結果がfalseの時はsubmit（画面遷移）しなくなります。

この回答への補足

何度もsubmitを押すと延々とタグが追加されてしまいます。
もしよろしければ何かいい案はないでしょうか？
location.reload();をコードの一番上に持ってきてもreturn check();を書く前のようになってしまいました。
この場合仕方のないことなんでしょうか？

補足日時：2010/12/10 23:20
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しい説明ありがとうございます！

通報する
お礼日時：2010/12/10 23:14

No.2

  • 回答者： yyr446
  • 回答日時：

やっぱり、function check()からも


　×false;
　○return false;
しないとだめですね。（2箇所）
その上で、
onclick="return check()" です。
※こんな書き方もあるのかと思った。

この回答への補足

<!--
function check(){
var flag = 0;
if(document.loginform.user.value==""){
flag = 1;
var error1 = document.getElementById("error1");
if(error1 == null){
var element1=document.createElement("div");
element1.innerHTML='<span class="error0" id="error1">Usernameを入力してください。</span>';
var ojbody1=document.getElementById("titlerror1");
ojbody1.appendChild(element1);
}
}
if(document.loginform.pass.value==""){
flag = 1;
var error2 = document.getElementById("error2");
if(error2 == null){
var element2=document.createElement("div");
element2.innerHTML='<span class="error0" id="error2">Passwordを入力してください。</span>';
var ojbody2=document.getElementById("titlerror2");
ojbody2.appendChild(element2);
}
}
if(flag == 0){
return true;
}else{
return false;
}

}
// -->
</script>

書くところがなかったのでここに失礼します。
上記で理想の動きになりました！！
どうもありがとうございました！！

補足日時：2010/12/11 10:52
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

おおおおおおおお！
出来ました！２カ所でreturn false;すると片方がfalseの場合そこで止まってしまったので
<script type="text/javascript">
<!--
function check(){
var flag = 0;
if(document.loginform.user.value==""){
flag = 1;
var element1=document.createElement("span");
element1.innerHTML="Usernameを入力してください。";
element1.className="error0";
var ojbody1=document.getElementById("titlerror1");
ojbody1.appendChild(element1);
}
if(document.loginform.pass.value==""){
flag = 1;
var element2=document.createElement("span");
element2.innerHTML="Passwordを入力してください。";
element2.className="error0";
var ojbody2=document.getElementById("titlerror2");
ojbody2.appendChild(element2);
return false;
}
if(flag == 0){
return true;
}else{
return false;
}

}
// -->
</script>
にしたらできました！
どうもありがとうございます！

通報する
お礼日時：2010/12/10 23:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報