在Jquery中使用load方法

时间:2016-02-26 19:59:42

标签: php jquery

有一个索引页面,我打算用作我的应用程序的中央集线器包含在另一个文件夹中的文件./php/createForm.php这是一个供用户填写的表单...我在尝试要实现的是点击菜单栏中的“创建新”(在道德中找到)&然后使用.load()方法我可以将它带到我的索引页面...作为一种调试形式,看看我的代码是否有效,我希望它在点击发送按钮时发出警报()...但是,它只是刷新...我怎样才能正确加载表格并让它在不重新启动的情况下执行其功能?

student.php

<?
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script>
$(document).ready(function(e) {
    $("#usertab").html("<? echo $_SESSION['firstname']." ".$_SESSION['lastname']; ?><b class=\"caret\"></b>");
    $('#create-New').click(function() {

        $(".bs-example").load("./php/createForm.php");
    });
    $("#send").click(function() {
        e.preventDefault();
        alert("eudjk");
    });
    //alert("dfjdfk ");
});
</script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./" class="navbar-brand">College Logo</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right ">
        <li>
          <a href="#">Home<span class="glyphicon glyphicon-home"></span></a>
        </li>
                <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ethics Form <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a id="create-New">Create New</a></li>
              <li><a href="#">View Submitted</a></li>
              <li><a href="#">Progress</a></li>
           </ul>
          </li><!--end of .dropdown-->

        <li class="active dropdown" >
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="usertab"> </a>
          <ul class="dropdown-menu">
              <li><a href="#">Change Password</a></li>
              <li><a href="#"></a></li>
              <li><a href="#" >Logout &nbsp;<span class="glyphicon glyphicon-log-out"></span></a></li>
           </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="bs-example" style="margin-top:150px;">


</div>
</body>
</html>

createForm.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<form method="post" class="col-md-10 col-md-offset-1">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title panel-active">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">User Details</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">

                            <div class="form-group">
                                <label for="fullname">Researcher</label>
                                <input type="text" disabled="disabled" class="form-control input-disable" id="fullname" placeholder="e.g Mike Oksmall ">
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" disabled="disabled" class="form-control" id="inputPassword" placeholder="Ben Debanana@yahoo.com"/>
                            </div>
                            <div class="form-group">
                                <label for="Title">Title of Project/Dessertation</label>
                                <input type="text" class="form-control" id="title" placeholder="Insert Title Here"/>
                            </div>

                    </div><!--end of panel-body for user details-->
                </div>
            </div><!-- end of user details panel-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Project Aims and Design Overview</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">

                        <div class="form-group">
                            <label for="project-aim">Aim of Project</label>
                            <textarea class="form-control" id="project-Aim" placeholder="Insert Project Aim">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label for="overview">Design Overview</label>
                            <textarea class="form-control overview" id="overview" placeholder="Project Overview">
                            </textarea>
                        </div>                 


                    </div><!--end of panel-body for Aim of Project-->
                </div>
            </div><!--end of panel-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Participants</a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="advice">Number of Participants</label>
                            <textarea class="form-control advice" id="no-participants" placeholder="State the nature of any advice received in planning the project">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label for="procedure">Method Of Selection For Participants</label>
                            <textarea class="form-control procedure" id="procedure" placeholder="Procedure on participants">
                            </textarea>
                         </div>

                    </div><!--end of panel-body for participants-->
                </div>
            </div><!--end of panel for participants-->
           <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Research</a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse">
                    <div class="panel-body">

                        <div class="form-group">
                            <label for="advice">Nature and Source of Methodlogical Advice</label>
                            <textarea class="form-control advice" id="advice" placeholder="State the nature of any advice received in planning the project">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label for="procedure">Procedure  Carried out on Participants</label>
                            <textarea class="form-control procedure" id="procedure" placeholder="Procedure on participants">
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label for="risk">Potential Risks to participants and measures</label>
                            <textarea class="form-control risk" id="procedure" placeholder="Procedure on participants">
                            </textarea>
                        </div>
                         <div class="form-group">
                            <label for="risk">Potential Risks to Researchers and measures</label>
                            <textarea class="form-control risk" id="procedure" placeholder="Procedure on participants">
                            </textarea>
                        </div>
                         <div class="form-group">
                            <label for="consent">How will the records of Consent be Saved?</label>
                            <textarea class="form-control consent" id="consent" placeholder="Procedure on participants">
                            </textarea>
                        </div>
                         <div class="form-group">
                            <label for="findings">How will the findings of this research be disseminated?</label>
                            <textarea class="form-control findings" id="findings" value="Procedure on participants">
                            </textarea>
                        </div>


                    </div>
                </div>
            </div><!--end of panel-->

            <div class="form-group form-group-sm">
                        <button class="btn btn-primary col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-4 col-xs-offset-4 send " type="submit">Send Form <i class="glyphicon glyphicon-send"></i></button>
                    </div>

        </div>

    </form>


</body>
</html>

0 个答案:

没有答案