完成表格后如何永久禁用按钮？

I'm currently in the process of creating a reservation page for our company. What I would like to do is have it to where when the user clicks the Reserve Now Button a form pops up for them to complete. After the user completes the form the reserve button is disabled permanently to everyone accessing the site. How can I accomplish this? I am not very well versed in java script or php. Any help would be greatly appreciated.

我目前正在为我们公司创建预订页面。我想要做的就是让用户点击“立即预约”按钮时弹出一个表单供他们完成。用户完成表单后,对访问该站点的每个人永久禁用保留按钮。我怎么能做到这一点?我不是很熟悉java脚本或php。任何帮助将不胜感激。

    <div class="container">
      <div class="row">
        <div class="col-lg-12">
           <table class="table table-striped">
             <tr>
                <td>Product</td>
                <td><a href="#" class="btn btn-primary ">RESERVE NOW</a></td>
             </tr>
           </table>
           <form>
             First name:<br>
             <input type="text" name="firstname" value="Mickey">
             <br>
             Last name:<br>
             <input type="text" name="lastname" value="Mouse">
             <br><br>
             <input type="submit" value="Submit">
           </form>  
       </div>
     </div>
   </div>

I have mocked up an example that can be found here:
https://jsfiddle.net/rman215/gw2m53w9/1/

我已经嘲笑了一个可以在这里找到的例子:https://jsfiddle.net/rman215/gw2m53w9/1/

4 个解决方案

#1

If I understood you you want to provide ability ti reserve something, but only for 1 person, right?

如果我理解你,你想提供能力保留一些东西,但仅限1人,对吧?

So, you can store flag in database (for example in disabled_at [timestamp, default = null] column). When somebody click on button and call processing page (via ajax or simple redirect) set flag disabled_at value NOW(). And each time on processing page is disabled_at IS NULL. If yes - save first and last name to database.

因此,您可以将标志存储在数据库中(例如,在disabled_at [timestamp,default = null]列中)。当有人点击按钮并调用处理页面(通过ajax或简单重定向)时,设置标志disabled_at值NOW()。每次处理页面都是disabled_at IS NULL。如果是 - 将名字和姓氏保存到数据库。

On page with form need to add attribute disabled to submit button if disabled_at IS NOT NULL

如果disabled_at IS NOT NULL,则在具有表单的页面上需要添加属性以禁用提交按钮

EDIT:

disable.php

<?php

function reserveItem($name = null, $value = null)
{
    $name .= '.reserved';
    $value = $value ? $value : 1;
    return file_put_contents($name, $value);
}

function isDisabled($name = null)
{
    return file_exists($name . '.reserved');
}

$disabled = isDisabled('item1');

if (isset($_POST['submit'])) {
    $name = isset($_POST['firstname']) ? $_POST['firstname'] : '';
    $lastName = isset($_POST['lastname']) ? $_POST['lastname'] : '';
    if (!$disabled) {
        reserveItem('item1', $name . $lastName);
    }
}

?>

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
 </head>
 <body>
   <div class="container">
      <div class="row">
        <div class="col-lg-12">
           <table class="table table-striped">
             <tr>
                <td>Product</td>
                <td><a href="#" class="btn btn-primary ">RESERVE NOW</a></td>
             </tr>
           </table>
           <form method="post" action="disable.php">
             First name:<br>
             <input type="text" name="firstname" value="Mickey">
             <br>
             Last name:<br>
             <input type="text" name="lastname" value="Mouse">
             <br><br>
             <input type="submit" value="Submit" <?= $disabled ? 'disabled' : ''; ?>>
           </form>  
       </div>
     </div>
   </div> 
 </body> 
</html>

Note: code written in editor only and not tested.

注意:代码仅在编辑器中编写,未经过测试。

#2

give id to submit button and on click of submit call this function

给id提交按钮,点击提交调用这个功能

function disableButton() {
     $("#idOfButton").attr("disabled","disabled")
}

#3

After form submit you will get the success response. After getting success just disable the Reserve Now Button using this code :

表单提交后,您将获得成功响应。获得成功后,只需使用以下代码禁用“立即预约”按钮:

If you are using ajax to submit form then you need to do that : suppose Reserve Now Button id : reserve_btn_id

如果您使用ajax提交表单,那么您需要这样做:假设立即预订按钮ID:reserve_btn_id

$.ajax({
  // your code....
}).done(function() {
  $("#reserve_btn_id").attr("disabled","disabled");
});

#4

Since JavaScript is executed every time a client loads the page, you cannot insert JavaScript code to block the button. I suggest you to use a simple MySQL database, something like:

由于每次客户端加载页面时都会执行JavaScript,因此无法插入JavaScript代码来阻止按钮。我建议你使用一个简单的MySQL数据库,例如:

CREATE TABLE Items(
   ItemID INTEGER AUTO_INCREMENT PRIMARY KEY,
   Description VARCHAR(255),
   IsReserved TINYINT(1) //this works like a boolean        
);

So that your page will have a select of all items, something like this:

这样您的页面就可以选择所有项目,如下所示:

SELECT * FROM Items ORDER BY ItemID

SELECT * FROM Items ORDER BY ItemID

And then you will print them with something like this:

然后你会用这样的东西打印出来:

$server = "localhost";
$username = "root";
$password = "root";
$database = "mydatabase";
$connection = mysqli_connect($server, $username, $password, $database);

$result = mysqli_query($connection, "SELECT * FROM Items ORDER BY ItemID");

if (mysqli_num_rows($result) > 0){
   echo("<form action=\"mypage.php\" method=\"post\">");
   while($row = $result->fetch_assoc()){
      echo("input name=\"id\" type=\"hidden\" value=" . $row['ItemID'] . ">"); //this input type hidden isn't shown on the page but we use it to store the id of the item so that we can retrieve it on the PHP page on submit
      echo("ID: " . $row['ItemID']);
      echo("Description: " . $row['Description']);
      if ($row['IsReserved'] == 1){
         echo("<button class=\"mybutton\" type=\"submit\" disabled>Reserve</button>");
      }
      else{
         echo("<button class=\"mybutton\" type=\"submit\">Reserve</button>");
      }
   }
   echo("</form>");
}
else{
   echo("No data");
}

Then to update the status of an item that is reserved, just update the status when the form has been submitted to the other PHP page, you will have something like this:

然后,要更新保留项目的状态,只需更新表单已提交到其他PHP页面时的状态,您将具有以下内容:

$server = "localhost";
$username = "root";
$password = "root";
$database = "mydatabase";
$connection = mysqli_connect($server, $username, $password, $database);

$id = (int) $_POST['id']; // here you get the id of the hidden input

 // $data = mysqli_query($connection, "SELECT * FROM Items WHERE ItemID = $id");

/* $data now contains all info stored about the item, you can use it if you
   need to insert those info in another table, etc. */ 

// UPDATING STATUS
mysqli_query($connection, "UPDATE Items SET IsReserved = 1 WHERE ItemID = $id");

mysqli_close($connection);

So this is it, basically, I hope it helps you with your project :)

所以这就是它,基本上,我希望它可以帮助你的项目:)

I leave you this guide on how to handle Forms & their data with PHP.

我给你留下关于如何使用PHP处理表单及其数据的指南。

#1