我有一个带有表单的 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');
})
});
关于javascript - 在没有任何操作的情况下重新加载，切换功能正在工作，但由于重新加载影响消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34030765/