0

現在、画面上部に検索条件を入力し、画面下部で一覧表示させる画面を作成しています。
検索条件にはformを利用してますが、submitすると消えてしまうため、$_POSTを利用して消えないようにしています。
selectの部分は「selected」を付加して未選択に戻らないようにしています。
ここからが質問です。

「クリア」をクリックすると、statusが未選択になるようにjavascriptを用意しましたが、こちらが効きません。
デバッグツールで確認したところ、selectedが残っています。
別のjavascriptのは問題なく効きます。
試しに、「console.log(status)」を見ましたが、Nodelist[]とだけ表示されます。
selectedを解除するjavascriptが効かない原因調査に協力いただければ幸いです。
ソースコードを添付します。

<?php
try{
    require_once("db_connect.php");
    $pdo = new PDO("mysql:host=$SERV;dbname=$DB;charset=$CHAR",$USER,$PASS);
}
catch(PDOException $e){echo "次がエラーの内容です。;" .$e->getMessage();
}

$sdate = $_POST['sdate'] ?? "";
$edate = $_POST['edate'] ?? "";
$title = $_POST['title'] ?? "";
$content = $_POST['content'] ?? "";
$status = $_POST['status'] ?? "";

?>
<!doctype html>
<html lang=ja>
    <head>
        <meta charset="utf-8">
        <title>News一覧</title>
        <meta name="description" content="Salon Yuri-rinの管理者ページ">
        <!--リセットcss-->
        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
        <!--css-->
        <link rel="stylesheet" href="css/news_style.css">
        <!--レスポンシブ対応-->
        <meta name="viwport" content="width=device-width, initial-scale=1">
        <!--Googleフォント-->
        <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap" rel="stylesheet">
    </head>
    <body>
        <h1>News一覧</h1>
        <table class="search_table">
        <form class="conditions" id="conditions" action="news_table.php" method="post">
            <tr id="date" class="date">
                <td><label for="sdate">日付</label></td>
                <td><input type="date" name="sdate" id="sdate" value="<?=$sdate?>"></td>
                <td><label for="edate">~</label></td>
                <td><input type="date" name="edate" id="edate" value="<?=$edate?>"></td>
            </tr>
            <tr>
                <td><label for="title">タイトル</label></td>
                <td><input type="text" name="title" id="title" value="<?=$title?>"></td>
                <td><label for="content">内容</label></td>
                <td><input type="text" name="content" id="content" value="<?=$content?>"></td>
            </tr>
            <tr>    
                <td><label for="status">ステータス</label></td>
                <td>
                    <select name="status" id="status">
                        <option value="0" 
                            <?php if($status === '0')
                                {echo 'selected';}
                                    else if($status === '1')
                                    {echo '';}
                                        else {echo '';} 
                                ?>
                        >未選択</option>
                        <option value="1"  
                            <?php if($status === '1')
                                {echo 'selected';}
                                    else if($status === '0')
                                        {echo '';}
                                        else {echo '';}
                                ?>
                            >未公開</option>
                        <option value="2"  
                            <?php if($status === '2')
                                {echo 'selected';}
                                    else if($status === '0')
                                        {echo '';}
                                        else {echo '';}
                                ?>
                            >公開</option>
                    </select>           
                </td>
        </form>
        </table>
        <button type="submit" form="conditions" class="search_button" id="clear" name="clear" value="clear">クリア</button>
        <button type="submit" form="conditions" name="search_button" value="検索" class="search_button" id='search_button'>検索</button>
        <table class="tablehead">
            <tr>
                <th class="header">日付</th>
                <th class="header">タイトル</th>
                <th class="header">内容</th>
                <th class="header">公開ステータス</th>
                <th class="header2">
                    <form class="create" action="news_create.php">
                        <button type="submit" name="button" value="登録" class="button_a">登録</button>
                    </form>
                </th>
                <th class="header2"></th>
            </tr>
        </table>
        <?php
            //if(isset($_POST['sdate']) && isset($_POST['edate']) && isset($_POST['title']) && isset($_POST['content']) && isset($_POST['status']) && isset($row) &&
                if(isset($_POST['search_button'])){
            $pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
            $sql =
                ('select * from news
                    where 
                    (pub_date >= ? and pub_date <= ?)
                    and title like ?
                    and content like ?
                    and status = ?'
                    );
            $stmt = $pdo->prepare($sql);
            $stmt ->execute(
                [htmlspecialchars(date_format(date_create($_POST['sdate']),'Y-m-d'), ENT_QUOTES | ENT_HTML5, 'UTF-8'),
                htmlspecialchars(date_format(date_create($_POST['edate']),'Y-m-d'), ENT_QUOTES | ENT_HTML5, 'UTF-8'),
                htmlspecialchars($_POST['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),
                htmlspecialchars($_POST['content'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),
                htmlspecialchars($_POST['status'], ENT_QUOTES | ENT_HTML5, 'UTF-8'),]);
            $stmt->bindvalue(":title", "%" . $_POST['title'] . "%", PDO::PARAM_STR);
            $stmt->bindvalue(":content", "%" . $_POST['content'] . "%", PDO::PARAM_STR);
            $row = $stmt->fetchAll(PDO::FETCH_ASSOC);}?>

            <?php foreach($row as $data):?>
            <form action="?" method="post" class = "newstblform">
                <div class = "table1">
                    <table class="newstable">
                        <tr>
                            <label>
                                <input type="hidden" name="seq" value="<?=htmlspecialchars($data['id'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="seq">
                            </label>
                        <td class="dt">
                            <label>
                                <input type="text" name="pub_date" value="<?=htmlspecialchars($data['pub_date'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei" readonly="readonly">
                            </label>
                        </td>
                        <td class="dt">
                            <label>
                                <input type="text" name="title" value="<?=htmlspecialchars($data['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id=mei readonly="readonly">
                            </label>
                        </td>
                        <td class="dt">
                            <label>
                                <input type="text" name="content" value="<?=htmlspecialchars($data['content'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei_kana">
                            </label>
                        </td>
                        <td class="dt">
                            <label>
                                <input type="text" name="status" value="<?=htmlspecialchars($data['status'], ENT_QUOTES | ENT_HTML5, 'UTF-8')?>" id="sei_kana">
                            </label>
                        </td>
                        <td class="bt">
                            <input type="submit" name=button value="修正" formaction="news_update.php" class="button_a">
                        </td>
                        <td class="bt">
                            <input type="submit" name=button value="削除" formaction="news_delete_conf.php" class="button_a">
                        </td>
                        </tr>
                    </table>
                </div>
            </form>
            <?php endforeach; ?>
        <?php //require_once('newslist_chk_js.php'); ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.getElementById('clear').addEventListener('click', function(){
                    var select = document.querySelectorAll('status');
                    var select2 = 
                    console.log(select);
                    select.selectedIndex = -1;
                    //document.getElementById('conditions').reset();
                }),false;
            }),false;
        </script>
        <noscript>
            javascriptが実行できません。
        </noscript>
    </body>
</html>
6
  • クリアというのは button type="submit" のようですが、クリックすると submit されて、その応答で全画面が再描画されるからではないのですか?
    – WebSurfer
    Commented 2023年6月29日 1:13
  • button type="button"にしてみたのですが、クリックしても無反応になってしまいます。onclickとの併用も試しましたが同じく無反応です。何が考えられますか? Commented 2023年6月29日 3:31
  • var select = document.querySelectorAll('status'); を var select = document.getElementById('status'); に変更したらどうなりますか?
    – WebSurfer
    Commented 2023年6月29日 6:05
  • idを指定するなら #id名なんじゃないかかな、document.querySelectorAll('#status');
    – yyz
    Commented 2023年6月29日 7:28
  • 回答ありがとうございます。var select = document.getElementById('status')で解決しました。 Commented 2023年6月29日 10:10

2 件の回答 2

0

上の質問に対するコメントで、

クリアというのは button type="submit" のようですが、クリックすると submit されて、その応答で全画面が再描画されるからではないのですか?

var select = document.querySelectorAll('status');var select = document.getElementById('status'); に変更したらどうなりますか?

と書きましたが、その 2 つを直すだけで、少なくとも、 [クリア] ボタンをクリックしても無反応ということはなくなるはずです。

一度コードを、その問題の無反応というところを試すのに必要最低限なところまで削っていって検証してみることをお勧めします。

例えば以下のように。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('clear').addEventListener('click', function () {
                var select = document.getElementById('status');                
                select.selectedIndex = -1;
            }), false;
        }), false;
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <select name="status" id="status">
            <option value="0">未選択</option>
            <option value="1">未公開</option>
            <option value="2">公開</option>
        </select>
        <button type="button" id="clear" name="clear">クリア</button>
    </form>
</body>
</html>

上のコードで無反応ということはなくて、 [クリア] ボタンクリックで selectedIndex は -1 に設定されます。

0

selectタグの初期化は、querySelectorを使用し、ID指定して選択したElementのvalueを設定するのが簡単です。

querySelectorAllでは、selectタグのnodelist を返すのでさらに確認する必要があります。

let select = document.querySelector('#status');
select.value = "0";//<option value="0">未選択</option> だから"0"で初期化

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。