2017-01-23 60 views
0

enter image description here我有一个模式。在模式的标题中,我拥有登录的标题。在身体中,我有一个登录表单,在页脚中有登录按钮。更改放置在模态页脚中的按钮的任务

登录按钮后,我有一个超文本为那些想要创建帐户,通过点击它的登录表单消失,登记表格出现。

是否有任何可以使用相同的按钮登录注册。 (最简单的话可以使用两种不同形式的相同按钮,或者如果我不能,我怎样才能添加一个按钮到页脚,并使其充当重复表单的提交按钮)

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header" style="background-color: #222"> 
       <div class="mu-title"> 
       <span class="mu-subtitle" id = "loginTitle">Login</span> 
     </div> 
    </div> 
    <!-- Body of the modal --> 
    <div class="modal-body" style="background-color: #222"> 

         <form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none"> 
          <div class="form-group"> 
           <label for="name" class="control-label" style="color: white">Full Name</label> 
           <input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="username" class="control-label" style="color: white">Username</label> 
           <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="[email protected]"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="password" class="control-label" style="color: white">Password</label> 
           <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> 

          </div> 
          <div class="form-group"> 
           <label for="matrix" class="control-label" style="color: white">Matrix Number</label> 
           <input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number "> 
           <span class="help-block"></span> 
          </div> 
         </form> 

         <form id="loginForm" method="POST" action="login.php" novalidate="novalidate"> 
          <div class="form-group"> 
           <label for="username" class="control-label" style="color: white">Username</label> 
           <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="[email protected]"> 
           <span class="help-block"></span> 
          </div> 
          <div class="form-group"> 
           <label for="password" class="control-label" style="color: white">Password</label> 
           <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password"> 

          </div> 
    </div> 

    <div class="modal-footer" style="background-color: #222"> 
      <button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br> 
      </form> 
      <span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span> 

    </div> 
    </div> 
+0

你可以做......只是保证您将正确的表单发布到右侧url – RohitS

+0

@RohitS事情是我的第一个表单开始并在第二个表单开始之前完成(在我的模式的主体中),然后我在身体中开始第二个表单,但关闭标记模型的页脚,所以登录按钮只适用于登录和注册 –

+0

你必须做脚本..基本上维护一个隐藏的领域,将保持吨当前活动窗体的机架,并在提交click时读取该值。根据结果将表单提交到相应的URL – RohitS

回答

1

这里有一些boilerplates,您可以用....尝试(您的部分基本上只是确定哪些形式是活动......)

$(document).ready(function(){ 
 
    $('#submitbtn').click(function(e){ 
 
    e.preventDefault(); 
 
    var form=$('#currentForm').val(); 
 
    if(form=="login") 
 
     { 
 
     alert('submit to login'); 
 
     } 
 
    else 
 
     { 
 
     alert('submit to register'); 
 
     } 
 
    }); 
 
    $('#btnchange').click(function(){ 
 
    var form=$('#currentForm').val(); 
 
    if(form=="login") 
 
     { 
 
     $('#currentForm').val('register'); 
 
     $('#registration-form').show(); 
 
     $('#login-form').hide(); 
 
     } 
 
    else 
 
     { 
 
     $('#currentForm').val('login'); 
 
     $('#registration-form').hide(); 
 
     $('#login-form').show(); 
 
     } 
 
    }); 
 
    
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;"> 
 
    <label for="name">Name:</label> 
 
    <input type="text" name="usename"><br/> 
 
    <label for="emailid">Email ID:</label> 
 
    <input type="text" name="emailid"><br/> 
 
    <label for="password">Password :</label> 
 
    <input type="password" name="password"> 
 
</form><br/><br/> 
 
<form method="post" action="login.php" name="login-form" id="login-form"> 
 
    <label for="emailid">Email ID :</label> 
 
    <input type="text" name="emailid"> 
 
    <label for="password">Password :</label> 
 
    <input type="password" name="password"> 
 
</form> 
 
<input type="hidden" value="login" id="currentForm"/> 
 
    <input type="button" value="Submit" name="submitbtn" id="submitbtn"> 
 
<input type="button" value="Toggle Form" id="btnchange"/>  
 

+0

谢谢。这正是我想要:) –

+0

@DanialKosarifa很高兴知道这有助于......:D – RohitS

0

为了让你更好地理解你的问题,你想要做的事情的基本思想是:

单页模态,一种形式。接受用户文字输入,用该信息检查现有用户,如果不存在则创建新用户?