条件により、リンク先に画面遷移しないようにする方法

このQ&Aのポイント
  • リンクボタンを押したときに、同じフォーム内の、他の入力内容をチェックして、その結果によってはリンクを無効にして画面遷移しないようにしたい
  • 名前が入力されている時は次画面に遷移し、入力されていない場合は、メッセージを表示して、現画面にとどまるようにしたい
  • JavaScriptを使用して、フォーム内の入力内容をチェックし、条件によってリンクを無効にする方法を教えてください
回答を見る
  • ベストアンサー

条件により、リンク先に画面遷移しないようにする方法

リンクボタンを押したときに、同じフォーム内の、他の入力内容をチェックして、その結果によってはリンクを無効にして画面遷移しないようにしたいのですが、可能でしょうか。 分らないながら、ソースを作成してみたのですが、うまくいきませんでした。どなたか、ご存知でしたら、お願いします。 下のサンプルの場合は、名前が入力されている時は次画面に遷移し、入力されていない場合は、メッセージを表示して、現画面にとどまるようにしたいのです。 <script type="text/javascript"> <!-- //************************* function funcCheck(){ //************************* var v; v = document.myform.in_name.value; alert("document.myform.in_name.value=" + v ); if(v == ""){ alert("名前を入力してください"); return false; }else{ return true; } } //--> </script> <head> </head> <body> <form name="myform"> 名前:<input type=text name="in_name" value=""> <a href="xxx.htm" onclick="funcCheck()">チェック</a> </form> </body> </html>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

returnで戻り値を設定するだけでしょう。 元ソースでわざわざ戻り値までつけているので かなり惜しい。 元:<a href="xxx.htm" onclick="funcCheck()">チェック</a> 改:<a href="xxx.htm" onclick="return funcCheck()">チェック</a>

eiko2004
質問者

お礼

うまく行きました! 実は、前にreturn=funcCheck()と書いてしまい、うまくいかなかったのです。 どうもありがとうございました。

関連するQ&A

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか?

  • 携帯 JAVA JSP 画面遷移

    携帯のWebアプリを作成しており、ボタンごとに画面遷移させる方法を考えています。 以下はPC用に作成したJSP <script Language="JavaScript"> <!-- function inOut(flg){ if(flg){ lert("あ"); location.href='top.jsp'; }else{ alert("い"); location.href='top2.jsp'; } } // --> </script> <html> <head> <title>テスト</title> </head> <body> <form method="POST" action="top3.jsp"> <input type="button" name="in" onClick="inOut(true);" value="あ" /> <input type="button" name="out" onClick="inOut(false);" value="い" /> <input type="submit" name="back" value="う" /> </form> </html> 現状の問題点は2点あり、 1.携帯はJavaScriptが使用できない 2.<input type="button"~ とするとテキストボックスのような見栄え・機能になってしまう。 携帯Webアプリの場合、ボタンごとの画面遷移はどのように行えばよいのでしょうか?

  • PHP処理実行後のページの遷移について

    現在、新規情報登録画面の作成を行っています。 PHPで、データベースにインサート処理後、成功したら他のページへ遷移するという処理を行いたいのですが、PHP側の処理が実行されるとページの遷移が行われず、action='遷移ページ指定'したらインサートが実行されません。 JavascriptとPHPともにまだ学習し始めたばかりの初心者で、わかりにくい質問ですが回答のほうよろしくお願いします。 <処理の流れ> 入力 ↓ 登録ボタン押す ↓ チェック ↓ チェック成功時→ページ遷移 チェック不成功時→ページ遷移なし <html> <head><title>新規登録</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2");</script> </head> <body> <form method="post" action="form_ad_shinki_touroku2.php" name="formA" onsubmit="return AllCheck()"> <script type="text/javascript"> 動的入力フォーム追加機能、チェック機能など </script> <?php SQLの処理など ?> <input type="submit" name="tuika" value=" 登 録 "> <input type="button" onclick="addInput()" value="フォーム追加" /> <input type="button" name="back" value=" 戻 る " onClick="location.href='javascript:history.back();'"> </form> <body> <html>

  • テキストボックス未記入時のアラート表示 JS

    【出来ていること】 下記のように電話番号の未入をチェックしアラートを出すことができました。 <script> function check3() { tel3check = document.form3.tel3.value; data13 = tel3check; if(!data13) { alert("電話番号が未入力です13"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form> 【躓いていること】 電話番号の未入だけでなく、FAXの未入もチェックしそれぞれでアラートを出そうとしましたが動きません。ご指導いただけますでしょうか? よろしくお願いいたします。 <script> function check3() { tel3check = document.form3.tel3.value; fax3check = document.form3.fax3.value; data13 = tel3check; data133 = fax3check; if(!data13) { alert("電話番号が未入力です13"); return; } elseif(!data133) { alert("FAX番号が未入力です133"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="text" name="fax3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form>

  • 未入力のラジオボタンに、alertを表示したい。

    過去問を見て、応用しようとしましたがうまくゆきません。 超初心者ですので・・・ すいません、質問させてください。 WinXP、IE6を使っています。 下記のソースコード(簡略化しています)で、未入力の場合テキストではalertが表示されるのですが、ラジオボタンでは表示されません。 どう記述すれば表示されるのでしょうか? お分かりの方、教えてください。 よろしくお願いします。 <html> <head> <title>お申し込み</title> <script language="JavaScript"> <!-- function checkSubmit() { if (document.form1.Name.value == "") { alert("お名前をご入力ください!"); return false; } if (confirm("この内容で送信します。\nよろしいですか?") == false) { return false; } return true; } //--> </script> </head> <form name="form1" method="post" action="http://www.000/" onSubmit="return checkSubmit()"> お名前:<input type="text" name="Name" size="20"> 男性<input type="radio" name="Seibetu" value="Man"> 女性<input type="radio" name="Seibetu" value="Woman"> <input type="submit" value="お申し込み"> </form> </body> </html>

  • 一括で入力のチェックをしたいのです!

    どなたか教えてください・・・ フツー入力チェックを行う場合 <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.Name.value==""){ alert("名前を入力してください。"); return false; } if(document.myform.Email.value==""){ alert("Eメールアドレスを入力してください。"); return false; } if(document.myform.Email.value.indexOf("@")<=0){ alert("Eメールアドレスが正しくありません。"); return false; } if(document.myform.Comment.value==""){ alert("コメントを入力してください。"); return false; } return true; } // --> </SCRIPT> こんなカンジで各フォーム毎にチェックを行い メッセージを出したりすると思うのですが、 フォーム数が多いため、入力のチェックを 一括で行いたいのですが・・・ JavaScriptを始めて間もないため とんちんかんな質問をしている様でしたら すみません。 どなたか入力チェックを一括で出来る方法を 教えて頂けないでしょうか・・・ お願いします。

  • 2つのJavaSを使う場合・・・

    こんにちは、他の質問もさせていただいているのですが、こちらもお願いいたします! 私はホームページに関して素人なのですが、WEBで例文などをコピーしてきて利用させて頂いています。しかし元が素人なのでわからない事が多く・・・ 例えば、 <script language="JavaScript"><!-- function check() { txt = document.myFORM.TEST.value; n = txt.length; if (n > 10) alert("10文字以内にしてください"); } // --></script> </head><body><form name="myFORM"> <textarea rows="3" name="myTEXT" onChange="check()"></textarea> </form></body></html> こういうテキストボックの入力文字を規制するスクリプトと、 <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.TEST.value==""){ alert("コメントを入力してください。"); return false; } return true; } // --></SCRIPT> という未入力だった場合アラートを出すスクリプトを2つ使いたい時はどのように設定すればいいのでしょうか? <SCRIPT language="JavaScript"><!-- の下に両方書きますよね?で、両方とも function check() というのを使うようなのですが・・・。 素人で全くわかりません。やはり勉強しようかと思いますが、とりあえず、上記を ご存知の方、よろしくお願いいたします!

    • ベストアンサー
    • HTML
  • 前画面遷移した際に前回入力した値を入力してある状態

    前画面遷移した際に前回入力した値を入力してある状態にしたいです。 javascriptとPHPで入力フォームのコードを書いているのですが、入力フォーム(①画面)にて両方の言語で重複で値を保持したいです。 流れとしては、①入力フォーム→②確認画面なのですが。 PHPでは保持のコードは書けています。これをJavaScriptでも保持して重複保持したいです。 以下のURLを参考にしたのですが、 値の保持にsessionStorageというのがあるらしいです。 https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage URLを参考に下の方にコードを書いてみたのですが、入力フォームを埋めて送信ボタンを押しても付属画像のようにメッセージが出て、次に進めません。どこが間違っているで ましょうか? 回答よろしくお願いいたします。 ●●①入力フォームのコード <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $name = $_POST['name']; $name = htmlspecialchars($name, ENT_QUOTES); if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if(count($errors) === 0) { $_SESSION['name'] = $name; /* 確認画面の表示, */ header('Location:http:▼▼'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $name = $_SESSION['name']; } ?> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title></title> <script src="jquery-3.6.0.min.js"></script> <style type="text/css"> </style> </head> <body> <form action="orm1.php" method="post" id="form"> <p> 名前 </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </form> </body> <script> const form = document.querySelector('#form'); const name = document.querySelector('#name'); form.addEventListener('submit', function(event) { let msg = ""; if (name.value == "") msg += "名前が入力されていません。\n"; if (msg == "") return; event.preventDefault(); alert(msg); }); var key = 'date_key'; var set_value = sessionStorage.getItem(key); $('name').val(set_value); $('name').on('change', function () { var value = $('#name').val(); sessionStorage.setItem(key, value); }); </script> </html>

  • 次画面への受け渡し

    お世話になります。 1の画面から、2の画面へ遷移します。 1の画面でのボタン押下により、hiddenの内容を2の画面に渡し、2の画面のボタン押下で受け渡しているか確認したいのですが、やり方がわかりません。 下に試したものをのせておきます。 あと、書き方で問題があったり、こうした方がいいという注意もしてくださると助かります。 単純なJavaScriptだと思うのですが、初心者でどうしたらいいかもわかりません。助けてください。 1の画面: <HTML> <HEAD> <script language="JavaScript"> <!-- function selEvent(selID){ document.frmAct.fuseaction.value = selID; alert(selID); } --> </script> </HEAD> <BODY> <form name="frmAct" method="post" action="form_action2.html"> <INPUT TYPE="submit" VALUE="新規登録" onClick="selEvent(1);"> <INPUT TYPE="submit" VALUE="ID検索" onClick="selEvent(2);"> <INPUT TYPE="hidden" NAME="fuseaction" VALUE=""> </form> </BODY> </HTML> 2の画面: <HTML> <HEAD> <script language="JavaScript"> <!-- function kakunin(){ alert(document.frmAct.fuseaction.value); } --> </script> </HEAD> <BODY> <form name="frmkaku" method="post" action="xxx.html"> <INPUT TYPE="button" VALUE="確認" onClick="kakunin();"> </form> </BODY> </HTML>

  • FORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

       以下のような画面を作りたいのですが↓ -------------------------------------------------------------------------------- ● a.php (ユーザ情報入力画面) ※フォームに入力する画面    <FORM method="POST" action="b.php">   <INPUT type="text" name="mail">   <INPUT type="submit" name="submit" value="確認">  </FORM> ● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面  <FORM method="POST" action="c.php">   <!-- ここには、フォームに入力された値を表示する -->   <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する   <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る  </FORM> ● c.php (完了画面) -------------------------------------------------------------------------------- b.php について質問なのですが、 b.phpにおいて、登録ボタンと戻るボタンを2つつけて、 それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・? <FORM method="POST" action="c.php">と書いてしまうと、 戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね?? こういう場合ってJavaScriptとかで遷移先を指定するんですか・・? もしそうでしたら、JavaScriptがよくわからないので できればサンプルコード示していただけると助かります・・・。   

専門家に質問してみよう