php - 更新時にdivタグが表示される

Question

この下のコードには、テキストボックスと送信ボタンがあります。そのページを入力または更新すると、divタグが表示されますが、テキストボックスに値を入力して送信ボタンをクリックすると、divタグが表示されるはずです。問題はdivタグです常に表示されます。誰か助けてください。

<form action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
    <input type="text" name = "keyword" />
    <input type="submit" id="opn" value = "Search" />
</form>
<div id='hideme'>
    <strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'>
        <img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')"/>
    </a>
    <div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal" >
        <table>
            <tr>
                <th>course_code</th>
                <th>course name</th>
            </tr>
    <?php foreach($results as $row):?>
            <tr>
                <center>
                    <td>
                    <?php echo $row->course_code?>
                    </td>
                </center>
                <center>
                    <td>
                    <?php echo $row->course_name?>
                    </td>
                </center>
            </tr>
    <?php endforeach;?> 
        </table></div></div>
    </div>
<script>
    $('a.modal').bind('click', function(event) { 
        event.preventDefault();
        $('#modal').fadeIn(10);
    });
    function hide(obj) {
        var el = document.getElementById(obj);
        el.style.display = 'none';
    }
</script>

Answer 1

まず、css usign で div を非表示にする必要がありますdisplay:none;。これを設定していないため、ページの読み込み時に div が表示されます。

あなたのdivは次のようになります

 <div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;display:none;" id="modal" >

フォーム送信時に関数を呼び出します。タグ<form>は次のようになります

<form onSubmit="return showDiv();" action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">

そして、あなたのJavaScript関数は次のようになります

function showDiv() {
    $('#modal').fadeIn(10);
    return false; //not to refresh page

}

Answer 2

必要なのはCSSスタイルだけです<style>#hideme{display:none}</style>