Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
Php search form shows results without pressing the search button when it should wait until the button is pressed to show them
正如标题所暗示的那样,我正在尝试显示查询结果并且它工作正常,但它会自动在搜索按钮下方显示结果,当它应该等待按钮被按下然后重新加载页面并显示结果时。我有点确定这是代码的问题,但我找不到在哪里。我知道这是一个愚蠢的问题,但感谢所有的帮助。
这是我的代码:
<?php
mysql_connect('localhost', 'root', 'Passw0rd') or die(mysql_error());
mysql_select_db("cvtool") or die(mysql_error());
include("include/session.php");
$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--The viewport tag is used in order to scale the page properly inside any screen size -->
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CV Tool</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css"/>
<!--Import JQuery from stored file -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--Import JQuery from Google's Content Delivery Network -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<!--Big wrapper contains the whole site (header,navigation menu,....,footer-->
<div id="big_wrapper">
<header id="top_header">
<a href="main.php"><img src="images/cvlogo.png"> </a>
</header>
<br>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="main.php">Home</a></li>
<?php
/**
* User has already logged in, so display relavent links, including
* a link to the admin center if the user is an administrator.
*/
if($session->logged_in){
echo "<li><a href='"search.php'">Search</a></li>"
."<li><a href='"myCVs.php'">My CV(s)</a></li>"
."<li><a href='"userinfo.php?user=$session->username'">My Account</a></li>"
;
echo "<li><a href='"process.php'">Logout</a></li>";
}
else
?>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<section id="main_section">
<?php
/**
* User not logged in, display the login form.
* If user has already tried to login, but errors were
* found, display the total number of errors.
* If errors occurred, they will be displayed.
*/
if($form->num_errors > 0){
echo "<font size='"2'" color='"#ff0000'">".$form->num_errors." error(s) found</font>";
}
?>
<form action="search.php" method="GET" >
<h1>Search for an CV</h1>
<h3>Department</h3>
<br/>
<select id="dropDown">
<option value="">Choose a department</option>
<option value="Comp">Computer Science</option>
<option value="Bus">Business Studies</option>
<option value="Psy" >Psychology</option>
<option value="Eng">English Studies</option>
</select>
<br/>
<h3>Skills</h3>
<br/>
<div id="Comp"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Java
<input type="checkbox" name="whatever" />
AI
<input type="checkbox" name="whatever" />
Web Development
</div>
<div id="Bus"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Business 1
<input type="checkbox" name="whatever" />
Business 2
<input type="checkbox" name="whatever" />
Business 3
</div>
<div id="Psy"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Psychology 1
<input type="checkbox" name="whatever" />
Psychology 2
<input type="checkbox" name="whatever" />
Psychology 3
</div>
<div id="Eng"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
English Studies 1
<input type="checkbox" name="whatever" />
English Studies 2
<input type="checkbox" name="whatever" />
English Studies 3
</div>
<script>
$(document).ready();
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>
</form>
<form action="search_result.php">
<input type="submit" name="search" id="search" value="Search" />
<div id="search"></div>
<script>
$(document).ready(function(){
$("#dropDown").change(function(){
var data = $(this).val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
</script>
</form>
</section>
<footer id="the_footer">
City CV Tool 2014
</footer>
<a href="#" class="back-to-top"></a>
</div>
</body>
</html>
就是因为这行
$("#dropDown").change(function(){
在表单中添加一个提交按钮,如果这是您想要的,然后运行该功能
<input type="submit" value="Submit" />
根据 rwacarter 在下面关于可访问性的正确评论后编辑
将 Id 添加到表单标记
<form id="searchformSubmit"
然后做
$("#searchformSubmit").on('submit',function(){
如果用户按 Enter 键提交而不是按钮,前提是页面上只有一个表单,这也应该有效
页面重新加载的原因是 HTML 表单中的任何<button>
或<input type='submit'>
都将重新加载页面,除非您对它们有onClick='return false;'
。我认为您需要补充:
onClick="startsearch();return false;"
在提交按钮上。您还必须随之发送表单数据。为此,请用这个创建一个变量:
var form_data = $('#form').serialize();
并发送:
$.post('search_result.php', {form: form_data}, function(data) {$("#search").html(data);})
当您的下拉列表更改(单击、用户输入等)时,将调用您的 ajax 调用(结果搜索),但您应该将操作绑定到表单单击。
$(document).ready(function(){
$("#search").click(function(){
var data = $("#dropDown").val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
此外,这不是在表单中指定操作所必需的,但它会触发表单操作并将您重定向到页面search_result.php
,我建议您更新它并设置action="#"
相关文章:
- 如何使用AngularJS显示按钮或锚标记值
- PHP到JavaScript图表;显示w/按钮
- 输入按钮分隔显示按钮名称和值
- 如果条件为true,ServiceNow显示按钮
- 仅当在文本框中输入文本时显示X按钮
- 点击页面上的计数和显示按钮
- 填写完输入后,如何显示按钮
- 聚焦时如何显示按钮?有棱角的
- 如果已登录,则显示按钮,Meteor's空格键
- 通过键盘单击显示按钮上的按键事件
- 防止在 Jquery 表单提交时加载页面,但“无”显示按钮
- 为什么没有正确显示按钮
- 单击另一个用于显示/隐藏图层的按钮时,在Adobe PDF中隐藏/显示按钮的代码是什么
- 是否可以在单击其他按钮时显示按钮的引导弹出框
- 嵌入应该能够显示按钮
- 根据 Cookie 的存在突出显示按钮
- 如何使用javascript在特定网页上显示按钮
- CSS 在图像上显示按钮
- 单击时隐藏按钮,计时器用完时显示按钮
- 当用户使用 jquery 将焦点聚焦到文本区域时显示按钮