search

Home  >  Q&A  >  body text

The rewritten title is: Using PHP buttons combined with jQuery and POST methods to get return values

<p>I have a simple form to get usernames and want to achieve the following: </p> <ul> <li>When the user clicks the button, the button will be disabled to prevent multiple clicks (in real cases it may take a few seconds to process all the data, such as calling API, writing to the database, etc.);</li> <li>After click, a new POST request needs to occur in order to capture $_POST['username'] in PHP and process the request further. </li> </ul> <p>How to achieve this goal? </p> <p>The code is as follows, but it does not work as expected: </p> <pre class="brush:php;toolbar:false;"><?php session_start(); // Process the form data when the form is submitted if ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST['submit-button'])) { $uname=$_POST['username']; header('Location: success.php'); } } ?> <!DOCTYPE html> <html> <head> <title>My Form</title> </head> <body> <form id="your_form_id" action="test4.php" method="post"> <p><label>Username</label> <input id="username" type="text" name="username" value="" autofocus/></p> <input type="submit" id="submit-button" name="submit" value="Login" /> </form> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $("#submit-button").on("click", function(e){ document.getElementById("submit-button").disabled = true; document.getElementById("submit-button").value="Processing, please wait..."; document.getElementById("your_form_id").submit(); }); </script> </body> </html></pre></p>
P粉738821035P粉738821035435 days ago532

reply all(2)I'll reply

  • P粉615829742

    P粉6158297422023-09-06 00:44:03

    You are using the JQuery library, but you are using native JavaScript commands to handle buttons and submit(). Either you go all Pure JS, or you go all JQuery.
    The code below only uses JQuery. Additionally, I replaced submit with a button.
    . Finally, buttons are not POSTed, so if you need to test, do it on the input field.

    Below is a code containing the elements I just mentioned that should help you. 

    <?
// 当表单提交时处理表单数据
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    if(isset($_POST['username']))
    {
        $uname=$_POST['username'];
        header('Location: success.php');
    }
}
?>

<!DOCTYPE html>
<html>
  <head>
    <title>My Form</title>
  </head>
<body>

<form id="your_form_id" action="test4.php" method="post">
     <p><label>Username</label>
     <input id="username" type="text" name="username" value=""  autofocus/></p>
     <input type="button" id="submit-button" name="submit-button" value="Login" />
</form>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $("#submit-button").on("click", function(e){
            $('#submit-button').prop('disabled',true);
            $('#submit-button').val('Processing, please wait...');
            $('#your_form_id').submit();
    });
</script>

</body>
</html>

    reply
    0
  • P粉364642019

    P粉3646420192023-09-06 00:31:19

    To achieve this, the following principles can be used:

    • test-a.php (ordinary HTML form, including jQuery and AJAX, used to disable the submit button and display a simple "page loader");
    • test-b.php (PHP file used to process data);
    • test-c.php (used to display the response).

    test-a.php：

    <!DOCTYPE html>
<html>
<head>
    <title>Ajax example with Page loader</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /*CSS for Page loader*/
        #loader {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(e) {
                e.preventDefault(); // 阻止元素的默认操作
                $('#submitButton').prop('disabled', true); // 禁用id为submitButton的按钮
                $('#loader').show(); // 显示“页面加载器”

                // 发送AJAX请求
                $.ajax({
                    url: 'test-b.php', //处理PHP文件的路径
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        // 将响应保存到会话变量中
                        sessionStorage.setItem('response', response);
                        // 转到“test-c.php”
                        window.location.href = 'test-c.php';
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm" method="POST">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required><br>

        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required><br>

        <input type="submit" id="submitButton" value="Submit">
    </form>

    <div id="loader">
        This is page loader, please wait...
    </div>
</body>
</html>

    test-b.php：

    <?php
session_start();

$name = $_POST['name'];
$email = $_POST['email'];

// 在这里可以使用$name和$email进行进一步处理或保存到数据库

// 打印响应数据的示例
$response = "The following data has been received:<br>";
$response .= "Name: " . $name . "<br>";
$response .= "Email: " . $email . "<br>";

// 将响应保存到会话变量中
$_SESSION['response'] = $response;

// 完成本文件的工作
exit;
?>

    test-c.php：

    <!DOCTYPE html>
<html>
<head>
    <title>Success</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Process file response:</h1>
    <?php
    session_start();

    if (isset($_SESSION['response'])) {
        $response = $_SESSION['response'];
        echo $response;
        unset($_SESSION['response']); // 取消设置会话变量
    } else {
        echo "No data to show.";
    }
    ?>
</body>
</html>

    reply
    0
  • Cancelreply