我有一个PHP文件的形式。要求是,当我按下“添加新组织”按钮时,我应该显示组织表单。但是,当我这样做时,它发生了,但是页面无缘无故被重定向到另一个页面。我在这里粘贴我的代码。还有如何调试此类问题。
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
console.log('I am being reloaded');
// put your jQuery code here.
$("#addNewOrg").click(function(){
//alert('Hi from click event');
$("#organization_form_in_resource").toggleClass("myHidden");
//alert('I removed the hidden class');
})
});
</script>
<style>
.myHidden {
display : none;
}
</style>
</head>
<body>
<br /><br />
<div id="wrap" class="">
<br /><br /><br />
<!-- Begin Resource Form -->
<div class="container" id="resource_form" >
<div class="form_content">
<h1 class="col-lg-offset-3 col-lg-10" align="justify"> Add a Resource </h1><br /><br /><br />
<form class="form-horizontal" role="form" method="post" action="insert_resource.php">
<div class="form-group">
<label for="resource_name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-5">
<input type="textbox" class="form-control" id="resource_name" name="resource_name" placeholder="Name of the Resource" value="">
</div>
<div class="form-group">
<label for="org_select" class="col-lg-2 control-label">Organization</label>
<div class="col-lg-10">
<select class="form-control" id="org_select" multiple="multiple" onclick="getOrganizations(this.value)">
</select>
<br />
<button id="addNewOrg" name="addNewOrg" class="btn btn-default" >Add New Organization</button>
<div class="container myHidden" id="organization_form_in_resource" >
<div class="form_content">
<h1 class="col-lg-offset-3 col-lg-10" align="justify"> Add a Organization </h1><br /><br /><br />
<form class="form-horizontal" role="form" method="post" action="insert_organization.php">
<div class="form-group">
<label for="organization_name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-5">
<input type="textbox" class="form-control" id="organization_name" name="organization_name" placeholder="Name of the Organization" value="">
</div>
</div>
</form>
</div>
</div>
<!-- End of Organization Form -->
</div>
</div>
<div class="form-group">
<label for="contact_select" class="col-lg-2 control-label">Contact</label>
<div class="col-lg-10">
<select class="form-control" id="contact_select" multiple="multiple">
</select>
</div>
</div>
<br />
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3 ">
<button type="submit" id="submitResource" name="submitResource" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
最佳答案
将您的jquery函数更改为下面列出的一个
$(document).ready(function() {
console.log('I am being reloaded');
// put your jQuery code here.
$("#addNewOrg").click(function(e){
//alert('Hi from click event');
e.preventDefault();
$("#organization_form_in_resource").toggleClass("myHidden");
//alert('I removed the hidden class');
})
});