繁体   English   中英

单击提交后,包含注册表的Div消失。

[英]Div containing a registration form disappears after I click submit.

更清楚地说。 在我的主页index.php上,有一个名为Register的按钮,该按钮会触发Jquery脚本。 该脚本用于在首页顶部显示包含注册表格的div(显示为:none)。 所有这些完美地工作。 我想做的是在用户单击“提交”按钮后在此div中显示一些文本。 目前,当我尝试执行此操作时,按提交按钮后,div会被修改,但它会消失,我必须再次单击“注册”按钮以查看更改。 我该如何阻止呢?

有包含脚本和“注册”按钮的代码。

    <?php
  include 'register.php';
  include 'login.php';
  include_once 'config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="StyleSheet" type="text/css" href="StyleSheet.css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
      $(document).ready(function () {
          $('#show').click(function () {
              $('#transparencyL').show();
              $('#frontlayer').show();
          });

          $('#hideL').click(function (e) {
              $('#transparencyL').hide();
              $('#frontlayer').hide();
          });

          $(document).mouseup(function (e) {
              var container = $('#frontlayer');
              var container2 = $('#transparencyL');
              if (!container.is(e.target)               // if the target of the click isn't the container...
                 && container.has(e.target).length === 0)  // ... nor a descendant of the container
              {
                  container.hide();
                  container2.hide();
              }
          });
          $('#registerB').click(function () {
              $('#transparencyR').show();
              $('#registerlayer').show();
          });
          $('#hideR').click(function (e) {
              $('#transparencyR').hide();
              $('#registerlayer').hide();
          });
          $(document).mouseup(function (e) {
              var container3 = $('#registerlayer');
              var container4 = $('#transparencyR');
              if (!container3.is(e.target)
                 && container3.has(e.target).length === 0) {
                  container3.hide();
                  container4.hide();
              }
          });
          /*
          * Replace all SVG images with inline SVG
          */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });
      });
  </script>
<title>LoveFootball</title>
</head>
<body>       
<div id="topbar">
  <?php if( !(isset( $_POST['login'] ) ) ) { ?>
  <a id="show" href="#">Login</a> 
  <a id="registerB" href="#">Register</a>
  <?php 
} else {
  $usr = new Users;
  $usr->storeFormValues( $_POST );

  if( $usr->userLogin() ) {
    echo "Welcome"; 
  } else {
    echo "Incorrect Username/Password"; 
  }
}
?>

这是包含注册表格的div代码。

<?php
include_once 'config.php';
?>

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>LoveFootball</title>
 </head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
  $(document).ready(function () {
          $('#laba').click(function () {
              $('#transparencyR').show();
              $('#registerlayer').show();
          });
  };
  </script>
 <body>
<div id="transparencyR" style="display: none;" onclick="return false;"></div>
<div id="registerlayer" style="display: none;">
  <div id="register">
    <p>Register with us now!</p>
    <form class="registerForm" action="#" method="post">
      <table class="registerForm">
        <tr>
          <td>Email:</td>
          <td><input type="text" id="usn" maxlength="30" required autofocus name="email" size="31" /></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input type="password" id="passwd" maxlength="30" required name="password" size="31" /></td>
        <tr>
          <td>Confirn Password:</td>
          <td><input type="password" id="conpasswd" maxlength="30" required name="conpassword" size="31" /></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td><select name="country" required>
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
</select></td>
       </tr>
       <tr>
         <td>Date of Birth:</td>
         <td>
           <input type="date" id="conpasswd" maxlength="30" required name="birthDate" placeholder="YYYY-MM-DD" />
         </td>
       </tr>
      </table>
      <br><br><br><br><br><br><br><br><br>
      <?php if( !(isset( $_POST['register'] ) ) ) { ?>
      <input type="submit" style="float: left;" value="Register" name="register" id="laba">
      <?php 
} else {
  $usr = new Users;
  $usr->storeFormValues( $_POST );

  if( $_POST['password'] == $_POST['conpassword'] ) {
    ?> <p>Registration complete. You are awesome!</p>
    <?php 
  } else {
    ?> <p>Password and confirmed password do not match.Bro pls..</p>
    <?php
  }
}
?>
    </form>
  <input type="button" id="hideR" value="Close">
  </div>
</div>        
</body>
</html>

如您所见,我试图通过使用代码底部的php代码来完成这项工作,但是正如我所说,当我单击Submit按钮时,div消失了。

您是否尝试过将注册按钮的输入类型更改为“按钮”而不是“提交”?

尝试更改此:

      $('#laba').click(function () {
          $('#transparencyR').show();
          $('#registerlayer').show();
      });

对此:

      $('#laba').click(function () {
          $('#transparencyR').show();
          $('#registerlayer').show();
      });
      <?php if( (isset( $_POST['register'] ) ) ) { ?>
      jQuery('#laba').trigger('click');
      <?php } ?>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM