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
This is the right solution to my question:
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.