質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.89%

JavaScriptでfromの送信

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,344

前提・実現したいこと

jspで画面を作りました。
そこにデータを削除するボタンがあり、
JavaScriptを使用し「削除しますか?」の
ポップアップを出したいです。
自分なりにやってみたのですが、
ポップアップすらでませんorz
どう書いていいかわからないのでご質問させていただきました。

JSP

<%@ page contentType="text/html; charset=UTF-8"
    import="java.sql.*,javax.naming.*,javax.sql.*,java.text.*,java.util.Date,java.util.Calendar"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<html>

<sql:setDataSource var="db" driver="com.mysql.jdbc.Driver"
    url="jdbc:mysql://localhost/Library" user="root" password="" />
<sql:query var="rs" dataSource="${db}">
  SELECT book.book_no,book.book_name,IF(book.note="" OR book.note IS NULL,"-", book.note)AS note,genre.genre_name,
  lend.lend_date,book.state FROM book  LEFT JOIN lend ON book.book_no = lend.book_no LEFT JOIN
  user ON user.user_no = lend.user_no LEFT JOIN genre ON book.genre_no = genre.genre_no where book.delete_flg = 0

  <c:if test="${!empty param['genreNo']}">
      and book.genre_no = ?
      <sql:param value="${param['genreNo']}" />
    </c:if>
  ORDER BY book.book_no;
</sql:query>
<sql:query var="rs1" dataSource="${db}">
    select * from genre
</sql:query>
<sql:query var="rs2" dataSource="${db}">
    select book.book_no,book.delete_flg from book where book.delete_flg = 0
</sql:query>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<head>
<script type="text/javascript">


function check(){

    if(window.confirm('削除しますか?')){ // 確認ダイアログを表示

        return true; // 「OK」時は送信を実行

    }
    else{ // 「キャンセル」時の処理

        window.alert('キャンセルされました'); // 警告ダイアログを表示
        return false; // 送信を中止

    }

    </script>
<link rel="stylesheet" type="text/css" href="css/Library.css">
<meta content="text/html; charset=UTF-8">
<title>書籍管理画面</title>
</head>
<body>
    <%-- ログインせずに画面遷移してきた場合、ログイン画面へ戻るようにする処理 --%>
    <%
        HttpSession a = request.getSession();
        Boolean userResult = false;

        if (session.getAttribute("userResult") != null) {

            userResult = (boolean) session.getAttribute("userResult");

        } else if (session.getAttribute("userResult") == null) {
            request.setAttribute("errorMessage", "ログインがされていません");

            this.getServletContext().getRequestDispatcher("/Login.jsp")
                    .forward(request, response);
        }
    %>
    <h1>
        <p class="login" style="text-align: center">
            <img src="img/reading_boy.png" allign="center" width="80" height="80">
            書籍管理画面<img src="img/reading_girl.png" allign="center" width="80"
                height="80">

        </p>
    </h1>
    <form method="POST" action="book_kanri.jsp">

        <%
            Connection con = null;
            PreparedStatement ps = null;
            String sql = null;
            ResultSet gs = null;

            try {
                Context initContext = new InitialContext();
                DataSource ds = (DataSource) initContext
                        .lookup("java:comp/env/jdbc/Library");
                con = ds.getConnection();

                sql = "SELECT book.book_no,book.book_name,genre.genre_name,book.state"
                        + " FROM book LEFT JOIN genre ON book.genre_no = genre.genre_no"
                        + " WHERE book.delete_flg = 0";
                // SELECT命令の準備
                ps = con.prepareStatement(sql);
                // UPDATE命令を実行

                gs = ps.executeQuery();
        %>
        <%-- ジャンルをドロップダウンで表示 (絞込み機能) --%>
        <br>
        <form method="POST" action="book_kanri.jsp">
            <!-- 絞り込み -->
            <p>
                ジャンル <select name="genreNo">
                    <option value="">全て</option>
                    <c:forEach var="row" items="${rs1.rows}">
                        <option value=${row.genre_no}>${row.genre_name}</option>
                    </c:forEach>
                </select>
            </p>

            <INPUT
                style="color: white; WIDTH: 80px; HEIGHT: 30px; background-color: D57200;"
                type="submit" value="絞り込む" />
        </form>
        <%-- 備考(メモ)を記載したい書籍IDをドロップダウンで表示 --%>
        <form method="POST" action="book_memo">

            <p>
                書籍ID <select name="book_no">
                    <c:forEach var="row" items="${rs2.rows}">
                        <option>${row.book_no}</option>
                    </c:forEach>
                </select>
            </p>
            <%-- 備考(メモ)をテキストボックスに入力 --%>
            <div>
                備考<input type="text" name="note" />
            </div>
            <br>

            <c:if test="${!empty requestScope['errorMessage']}">
                <div style="color: red">${requestScope['errorMessage']}</div>
            </c:if>

            <input
                style="color: white; WIDTH: 60px; HEIGHT: 30px; background-color: D57200;"
                type="submit" value="登録" />
        </form>
        <h2>書籍一覧</h2>
        <%-- 書籍一覧表示 --%>
        <table class="tbl_01" border="1">
            <tr>
                <th>書籍ID</th>
                <th>書籍名</th>
                <th>ジャンル</th>
                <th>貸出</th>
                <th>貸出変更</th>
                <th>削除</th>
                <th>備考(メモ)</th>
            </tr>
            <c:forEach var="row" items="${rs.rows}">
                <tr>

                    <td>${row.book_no}</td>
                    <td>${row.book_name}</td>
                    <td>${row.genre_name}</td>
                    <%-- 貸出が可能(数値:1)の場合"○"を表示--%>
                    <td><c:if test="${row.state == 1}"></c:if> <%-- 貸出が不可(数値:2)の場合"×"を表示 --%>
                        <c:if test="${row.state != 1}">×</c:if></td>
                    <%-- 貸出が可能の場合、"不可へ"の切り替えボタン表示 --%>
                    <c:if test="${row.state == 1}">
                        <%-- 書籍削除ボタン --%>
                        <td><form method="POST" action="book_possible">

                                <input type="hidden" name="id" value=${row.book_no}>
                                <button class="kano" type="submit">不可へ</button>
                            </form></td>
                    </c:if>
                    <c:if test="${row.state != 1}">
                        <td><form method="POST" action="book_lmproper">

                                <input type="hidden" name="id" value=${row.book_no}>
                                <button class="huka" type="submit">可能へ</button>
                            </form></td>
                    </c:if>
                    <td>
                        <form method="POST" action="delete_book" onSubmit="return check()">
                             <input type="hidden" name="user_edit" value=${row.book_no}> 
                            <input type="submit" value="削除" />
                        </form>
                    </td>
                    <td>${row.note}</td>
                </tr>
            </c:forEach>
        </table>
        <br>
        <%-- 削除済書籍編集画面へ遷移 --%>
        <form action="book_resurrection.jsp" style="display: inline">
            <input
                style="color: white; WIDTH: 120px; HEIGHT: 30px; background-color: D57200;"
                type="submit" name="reset2" value="削除済書籍編集">
        </form>
        <%-- 管理者用マイページへ遷移 --%>
        <form action="kanri_mypage.jsp" style="display: inline">
            <input
                style="color: white; WIDTH: 100px; HEIGHT: 30px; background-color: D57200;"
                type="submit" name="mypage" value="TOPページ">

        </form>




        <%
            } catch (Exception e) {
                throw new ServletException(e);
            } finally {
                try {
                    if (gs != null) {
                        gs.close();
                    }
                    if (ps != null) {
                        ps.close();
                    }
                    if (con != null) {
                        con.close();
                    }
                } catch (Exception e) {
                }
            }
        %>

</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

onclick="return MoveCheck();" で、 キャンセル時には  false を渡して クリックをキャンセルするようにしないと。

MoveCheck も 最後に return res; を足してね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/29 10:25

    それはよくないのですか?

    キャンセル

  • 2016/06/29 10:38

    はい

    キャンセル

  • 2016/06/29 10:41

    onSubmit="return check()"
    をformからはずせばいいのですか?

    キャンセル

0

削除ボタンとは

<input type="button" value="削除" onclick="MoveCheck();" />

ここのことですか?
ただのボタンなのでMoveCheck()内のconfirmで分岐している通りだと思いますが
「移動してもいいですかー?」にキャンセルしても移動してしまうという質問でしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/29 09:41

    上のほうにあるものは試しで入れてみたものです。。。

    キャンセル

  • 2016/06/29 09:55

    >試しで入れてみた

    では具体的にどう記載したら不具合になっているのでしょう?

    キャンセル

  • 2016/06/29 10:18

    すいません
    ソースを訂正しました。

    キャンセル

  • 2016/06/29 11:14

    どうだろ、formで送るのは削除指示ばかりじゃないので
    onsubmitでやると用途が限られちゃいますね
    元の仕様のように、buttonでonclick="check()"して
    パラメータ付きでlocationを移動して削除かどうか
    判断するのが妥当だと思います。
    ちなみにformを入れ子にしたら何をやっても無駄
    ブラウザや環境によって何がおこるかわからない

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.89%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る