skip to Main Content

I have simple form to get username and want to achieve that:

  • when user click button it gets disabled to prevent multiple clicks (it may take few seconds to process all data in real scenario as calling APIs, writing to DB, etc);
  • after click new POST request needs to happen in order to capture $_POST[‘username’] in PHP and process the request further.

How to achieve that?

The code is like that but does not work as expected:

<?php

session_start();

// Processing form data when 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>

2

Answers


  1. Chosen as BEST ANSWER

    This is the right solution to my question:

    <?php
      if(isset($_POST['name']))
        //here the 'name' becomes accessible
          die($_POST['name']);
    ?>
    
    <!DOCTYPE html>
    <html>
      <head>
        <title>My Form</title>
      </head>
    <body>
    
    <form method="post" name="form" enctype="multipart/form-data">
        <input type="text" name="name" id="name" placeholder="Name" required/>
        <input type="email" name="email" id="email" placeholder="Email" required/>
        <input type="password" name="pass" id="pass" placeholder="Password" required/>
        <input type="submit" name="submit" value="Send" onclick="myFunction()"/>
    </form>
        
      <script>
        function myFunction() {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        $.ajax({
                type : "POST",  //type of method
                url  : "profile.php",  //your page
                data : { name : name, email : email, password : password },// passing the values
                success: function(res){  
                          //do what you want here...
                        }
            });
        }
        </script>
    
    </body>
    </html>
    

  2. You are using the JQuery library but you are using native JavaScript commands to process the button and the submit(). Either you do everything in Pure JS, or you do everything in JQuery.
    The code below uses only JQuery. Moreover I replaced the submit by a button.
    .
    And finally the buttons are not passed in POST, so if you have to do a test do it on the input field.

    Below is a code that includes the elements that I have just mentioned and that should help you.

    <?
    // Processing form data when form is submitted
    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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search