95415


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

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

[code]

    <?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>
    
[/code]


CC BY-SA 4.0
2023-06-28T23:56:15.793
95405
2023-06-29T08:53:14.557
2023-06-29T01:12:25.817
3060
58703
question
javascript php
javascriptが動かない


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

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

[code]

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


CC BY-SA 4.0
2023-06-29T08:03:45.630
95414
2023-06-29T08:03:45.630
22793
95405
answer


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

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

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

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

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

例えば以下のように。

[code]

    <!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>
    
    
[/code]

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


CC BY-SA 4.0
2023-06-29T08:53:14.557
95415
2023-06-29T08:53:14.557
51338
95405
answer