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

首先我想说将JQuery与传统的javascript混合起来效率不高..而不是使用getElementById你可以使用$（'＃'+ obj）.val（）... 在你的问题中，我想最有效的解决方案是使用JQuery的.hide（）和.show（）方法隐藏和取消隐藏div .... 你可以试试这个：

function hide(obj) {
    var el = $('#' + obj).val();
    e1.hide();
}

此外，如果您希望在加载页面后立即隐藏任何div，您可以使用$（document）.ready（）{}中的hide方法...随时显示它，您可以使用e1.show （）方法......

Answer 2

首先，你需要通过css usign display:none;来隐藏你的div。你没有设置这就是你的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 3

首先将display:none;添加到您要隐藏的div

添加属性

onsubmit="return validate()"

function validate()
{
  //validate the form as you want

  document.getElementById('modal').style.display="block";

  return false ; // if you dont want to submit the form

}

Answer 4

你需要的只是一个css样式<style>#hideme{display:none}</style>

刷新时显示div标签

4 个答案: