0

在下面的代码中，我有文本框和提交按钮。当我输入或刷新该页面时，会显示 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>
4

4 回答 4

1

首先，我想说的是，将 JQuery 与传统 javascript 混合不是很有效。您可以使用 $('#' + obj).val() 代替使用 getElementById ...在你的问题中，我猜是最有效的解决方案将是使用 JQuery 的 .hide() 和 .show() 方法来隐藏和取消隐藏 div ......你可以试试这个：

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

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

于 2013-08-23T07:54:51.350 回答
0

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

于 2013-08-23T07:40:09.807 回答
0

首先添加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

}
于 2013-08-23T07:36:02.213 回答
0

首先，您需要通过 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

}
于 2013-08-23T07:34:20.480 回答