Saving a form's text field data and resetting it to be blank

Question

So for a web application, I need to code a New User form using HTML/PHP/MySQL. The requirements for the user form include:

1. Posts to itself
2. Has a user name, password, and a confirm password text field
3. Has a reset button that resets all fields
4. If the two password fields don't match, report error, reset form, and keep the user name
5. If the user name is already taken, report error and reset everything
6. If everything is okay, hash and salt the password, add data to database, report success, and reset form

I'm working on #3 and #4 currently. This is what I have so far (sorry if the code is hard to read):

<form name="form" method="post" action="NewUser.php">

User Name: <input name="userName" type="text" id="userName" value="<?php echo $_POST["userName"]; ?>"> <br>
Password:  <input type="password" name="password" id="password"> <br>
Confirm:   <input type="password" name="passwordConfirm" id="passwordConfirm">
<?php
    if ($_POST["password"] != $_POST["passwordConfirm"]) {
        echo "Error: Passwords do not match.";
    }
?> <br>
<input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset">
</form>

Now, as you can see, since the default value for userName changes, the reset button doesn't actually blank out the text field if the user fails the password check and then tries to reset the form.

Apart from future issues I'm probably going to run in to implementing the rest of the requirements, how would I fix this issue I'm currently having?

Answer 1

The <input type="reset"> resets the form to the state it was when it was loaded.

Either you stick with PHP, then you need to change the type to submit and check by if (isset($_POST["reset"])) if the user wanted to reset the form.

Or you use Javascript: <input type="reset" onclick="document.getElementById('username').value='';" />

Answer 2

you must have two files ..

index.html 
savedata.php

now you can send Form Data from index.html to savadata.php via jQuery , AJAX . Just Follow these steps . Add this Script into your index.html which have already created .

  <script>
jQuery(function(){
   $('form').submit(function(e) {
      e.preventDefault();
      var username  = $("#userName").val();
      var password  = $("#password").val();
      var cPassword = $("#passwordConfirm").val();
// i am validating confirm password on client side but don't do it for security reasons
      if(password == cPassword) {

        // now send the Form Data to Server Side to save theme 
         $.post('savadata.php', {
            username:username,
            password:password  
         } , function(responce){
              if(responce == '1') {
               // form submitted successfully
                  // clear form fields 
                  $("#userName").val('');
                  $("#password").val('');
                  $("#passwordConfirm").val('');
                   alert('Data Saved...');
               } else {
                alert('there is an error to save data');
               }
          })

    } else {
      alert('Confirm password not matched');
    }
   }
});
</script>

and the savedata.php will recive the Data in $_POST array you can treat theme like this .

<?php
$username = $_POST['username'];
$password = md5($_POST['password']);
// Do what ever you want with savadata.php
// if Data Saved Successfuly echo '1'; javascript will take this flag as your data is saved.
?>