当前位置： 文江博客话题详情

表格未提交和Innerhtml未更新

发布于 2025-02-10 15:58:18 字数 5448 浏览 2 评论 0原文

我正在尝试设置一个网站注册页面，该页面将发布到我的MySQL数据库中，

我有以下编码如下，如下所示，以下编码

<!DOCTYPE html>
<?php 

            $dbServername = "mysite.com";
            $dbUsername = "username";
            $dbPassword = "12345";
            $dbName = "databasename";

            $conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);
if($conn){ echo "Connected!";}     

if ($_SERVER["REQUEST_METHOD"] == "POST"){
    $firstname   = mysqli_real_escape_string($_POST['firstname']);
    $lastname    = mysqli_real_escape_string($_POST['lastname']);
}
          

$sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";

mysqli_query($conn, $sql);
mysqli_close($conn);
      
?>


<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style/styles.css" />
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <link rel="shortcut icon" href="#" />
    <meta
      name="description"
      content="content here"
    />

    <title>Title | Pagename</title>
  </head>

  <body>
    <nav class="nav">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span
              ><a href="index.html" class="logo"
                >Name </a
              ></span
            >
            <span class="logo2"
              >Some text.</span
            >
          </div>
          <div class="col-md-8 menu-padding">
            <span class="menu menu-span"
              ><a href="index.html" class="menu-link">Home</a>
            </span>
            <span class="menu menu-span">
              <a href="about.html" class="menu-link">About</a>
            </span>
            <span class="menu menu-span"
              ><a href="search.html" class="menu-link active">Search</a></span
            >
            <span class="menu menu-span"
              ><a href="contact.html" class="menu-link">Contact</a></span
            >

            <span class="menu menu-span language">
              <a href="../spanish/inicio-esp.html" class="menu-link">Español</a>
            </span>
            <span class="menu menu-span language"
              ><a href="../portuguese/inicio-port.html" class="menu-link"
                >Português</a
              ></span
            >
          </div>
        </div>
      </div>
    </nav>

    <div id="registrationOne">
    <div class="container">


<form name="regForm" method="post" action=<?php echo $_SERVER['PHP_SELF'];?>>
<div class="row">
  <div class="col-md-6">
              <label for="">First Name:</label>
              <input name="firstname" type="text" class="form-control" />
            </div>
            <div class="col-md-6">
              <label for="">Last Name:</label>
              <input name="lastname" type="text" class="form-control" />
            </div>

</div>
<button
            name="submitButton"
            type="submit"
            class="btn btn-primary"
            id="registrationTwo"
            >
            Register
          </button>

</form>
        
    </div>
    </div>
  
  </body>
  <script src="script/index.js"></script>
  
  </html>

按如下编码

function validateRegForm(event) {
  event.preventDefault();

  let first = document.forms["regForm"]["firstname"].value;
  let last = document.forms["regForm"]["lastname"].value;

  if (first.length < 2) {
    alert("Please enter a first name at least of at least two characters");
    return false;
  } else if (last.length < 2) {
    alert("Please enter a last name at least of at least two characters");
    return false;
  } else {
    return true;
  }
}

let regClick = document.getElementById("registrationTwo");
regClick.addEventListener("click", validateRegForm);


function thankReg() {
  if (validateRegForm() === true) {
    let regOneElement = document.getElementById("registrationOne");
    regOneElement.innerHTML = `<div class="row">
<div class="col-md-12">
<h2 class="thankYouReg">Thank you for registering with Pro.Social.<br /><br />Please check your email for your unique search link to get started. <br /><br />If you do not receive an email from us in the next few minutes, please contact us via the Contact page.</h2>
</div>
</div>`;
  }
}
thankReg();

和以下JavaScript文件，index.js，在加载页面时 ，显示“连接！”在顶部，因此连接还可以。表单验证可以按预期工作，但是当我单击“寄存器”按钮时，什么也不会发生（即，InnerHTML不会更改，并且在MySQL数据库中均未发布任何内容）。但是，如果我刷新页面，则为空白行显示在数据库中。

有人可以建议吗？

非常感谢。

原文

I am trying to set up a website registration page that will post to my MySQL database

I have the following file, mypage.php, coded as follows

<!DOCTYPE html>
<?php 

            $dbServername = "mysite.com";
            $dbUsername = "username";
            $dbPassword = "12345";
            $dbName = "databasename";

            $conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);
if($conn){ echo "Connected!";}     

if ($_SERVER["REQUEST_METHOD"] == "POST"){
    $firstname   = mysqli_real_escape_string($_POST['firstname']);
    $lastname    = mysqli_real_escape_string($_POST['lastname']);
}
          

$sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";

mysqli_query($conn, $sql);
mysqli_close($conn);
      
?>


<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style/styles.css" />
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <link rel="shortcut icon" href="#" />
    <meta
      name="description"
      content="content here"
    />

    <title>Title | Pagename</title>
  </head>

  <body>
    <nav class="nav">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span
              ><a href="index.html" class="logo"
                >Name </a
              ></span
            >
            <span class="logo2"
              >Some text.</span
            >
          </div>
          <div class="col-md-8 menu-padding">
            <span class="menu menu-span"
              ><a href="index.html" class="menu-link">Home</a>
            </span>
            <span class="menu menu-span">
              <a href="about.html" class="menu-link">About</a>
            </span>
            <span class="menu menu-span"
              ><a href="search.html" class="menu-link active">Search</a></span
            >
            <span class="menu menu-span"
              ><a href="contact.html" class="menu-link">Contact</a></span
            >

            <span class="menu menu-span language">
              <a href="../spanish/inicio-esp.html" class="menu-link">Español</a>
            </span>
            <span class="menu menu-span language"
              ><a href="../portuguese/inicio-port.html" class="menu-link"
                >Português</a
              ></span
            >
          </div>
        </div>
      </div>
    </nav>

    <div id="registrationOne">
    <div class="container">


<form name="regForm" method="post" action=<?php echo $_SERVER['PHP_SELF'];?>>
<div class="row">
  <div class="col-md-6">
              <label for="">First Name:</label>
              <input name="firstname" type="text" class="form-control" />
            </div>
            <div class="col-md-6">
              <label for="">Last Name:</label>
              <input name="lastname" type="text" class="form-control" />
            </div>

</div>
<button
            name="submitButton"
            type="submit"
            class="btn btn-primary"
            id="registrationTwo"
            >
            Register
          </button>

</form>
        
    </div>
    </div>
  
  </body>
  <script src="script/index.js"></script>
  
  </html>

And the following javascript file, index.js, coded as follows

function validateRegForm(event) {
  event.preventDefault();

  let first = document.forms["regForm"]["firstname"].value;
  let last = document.forms["regForm"]["lastname"].value;

  if (first.length < 2) {
    alert("Please enter a first name at least of at least two characters");
    return false;
  } else if (last.length < 2) {
    alert("Please enter a last name at least of at least two characters");
    return false;
  } else {
    return true;
  }
}

let regClick = document.getElementById("registrationTwo");
regClick.addEventListener("click", validateRegForm);


function thankReg() {
  if (validateRegForm() === true) {
    let regOneElement = document.getElementById("registrationOne");
    regOneElement.innerHTML = `<div class="row">
<div class="col-md-12">
<h2 class="thankYouReg">Thank you for registering with Pro.Social.<br /><br />Please check your email for your unique search link to get started. <br /><br />If you do not receive an email from us in the next few minutes, please contact us via the Contact page.</h2>
</div>
</div>`;
  }
}
thankReg();

When I load the page, it shows "Connected!" at the top, so the connection is ok. The form validation works as expected, but when I click on the "Register" button, nothing happens (i.e., the innerhtml doesn't change and nothing is posted to the MySQL database). However, if I refresh the page, blank rows appear in the database.

Could someone please advise?

Many thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

遇见了你 2025-02-17 15:58:18

event.preventdefault（）;防止表格提交。您只有在验证失败时才应该这样做。

function validateRegForm(event) {
  let valid = true;
  let first = document.forms["regForm"]["firstname"].value;
  let last = document.forms["regForm"]["lastname"].value;

  if (first.length < 2) {
    alert("Please enter a first name at least of at least two characters");
    valid = false;
  } else if (last.length < 2) {
    alert("Please enter a last name at least of at least two characters");
    valid = false;
  }
  if (!valid) {
    event.preventDefault();
  }
}

您可以通过简单地将minlength =“ 2”放入＆lt; input＆gt;元素中来避免这种情况。

您不应该从themreg（）呼叫valialateregform（），因为没有事件可以作为参数传递。我不确定为什么您首先将其称为顶级，因为在提交表单之前运行。

event.preventDefault(); prevents the form from submitting. You should only do this if validation fails.

function validateRegForm(event) {
  let valid = true;
  let first = document.forms["regForm"]["firstname"].value;
  let last = document.forms["regForm"]["lastname"].value;

  if (first.length < 2) {
    alert("Please enter a first name at least of at least two characters");
    valid = false;
  } else if (last.length < 2) {
    alert("Please enter a last name at least of at least two characters");
    valid = false;
  }
  if (!valid) {
    event.preventDefault();
  }
}

You could avoid this by simply putting minlength="2" in your <input> elements.

You shouldn't call validateRegForm() from thankReg(), since there's no event to pass as the argument. I'm not sure why you're calling this at top-level in the first place, since that runs before the form is submitted.

回复 原文
懵少女 2025-02-17 15:58:18

让我们看看我是否可以为您提供帮助。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST"){
//enter your code for connecting to the DB after you have verified that there are POSTS


$dbServername = "mysite.com";
$dbUsername = "username";
$dbPassword = "12345";
$dbName = "databasename";

$conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);
if($conn){ echo "Connected!";}

//mysqli_real_escape_string requires knowing what kind of carset the database is using so it should be put like this.

$firstname   = mysqli_real_escape_string($conn, $_POST['firstname']);
$lastname    = mysqli_real_escape_string($conn, $_POST['lastname']);

$sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";

mysqli_query($conn, $sql);
mysqli_close($conn);
}
?>

let's see if I can be of help for you.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST"){
//enter your code for connecting to the DB after you have verified that there are POSTS


$dbServername = "mysite.com";
$dbUsername = "username";
$dbPassword = "12345";
$dbName = "databasename";

$conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);
if($conn){ echo "Connected!";}

//mysqli_real_escape_string requires knowing what kind of carset the database is using so it should be put like this.

$firstname   = mysqli_real_escape_string($conn, $_POST['firstname']);
$lastname    = mysqli_real_escape_string($conn, $_POST['lastname']);

$sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";

mysqli_query($conn, $sql);
mysqli_close($conn);
}
?>
回复 原文
~没有更多了~

关于作者

时光清浅

暂无简介

文章
评论
496 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文