When I submit a form and the page refreshes the password and password confirmation values are being displayed in the address bar.

Why is this?

Can anyone explain this and give me an idea how to suppress this behavior?

Please see attached screenshot.

Thank you in advance!

pass12.jpg

Recommended Answers

It happens when you use the GET method, use POST instead.

Jump to Post

Ok, I think you have to fix the opening form tags, at the moment you have three of them, the first is not closed and it will lead to some errors:

<form id="DemoForm"

The second is well defined:

<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = …
Jump to Post

I suppose you're using this plugin: http://jqueryvalidation.org/

If yes, then it seems you can define only one validation process for the chosen form, so don't set two of them:

$('#DemoForm').validate({
    rules:{},
    messages:{}
}); …
Jump to Post

All 12 Replies

Re: Password Displaying in Address Bar After Form Submission 80 80

It happens when you use the GET method, use POST instead.

commented: Thank you! +8
Re: Password Displaying in Address Bar After Form Submission 80 80

Actually, I am already using POST, not GET.

Re: Password Displaying in Address Bar After Form Submission 80 80

A POST request does not append any information to the url, it uses a separated request body, but it is possible to append GET variables to a POST request url. Are you using javascript to submit the form? Could you show the code?

Re: Password Displaying in Address Bar After Form Submission 80 80

The code for the posted question:

`

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>

</head>
<body>
<form id="DemoForm"
<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = 'DemoForm'>
    Username<br />
    <input type="text" id="user_input" name="username" /><br>
    Email<br />
    <input type="text" id="email" name="email" /><br>       
</form>
<div id="test">
</div>
 <form id="formCheckPassword">
     Password<br />
     <input type="password" class="form-control" name="password" id="password"/><br>
     Password Again<br />
     <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>
    <input type="submit" value="submit"/>
 </form>   
<!--Script to disable Submit button --> 

<!--Rules & Messages-->

<!--Username-->

<!--Email-->
      <script src = 'jquery.validate.min.js'></script>    
      <script>
         $('#DemoForm').validate ({
            rules: {
                        'email': {
                                    required:'true',
                                    email: 'true',
                                    }
                      },
                      messages:{
                           'email':{
                           required:'Please submit your email.',
                           email:'Enter a valid email.',
                                       }
                                       },


                                                   });
      </script>

      <script>
      $("#formCheckPassword").validate({
           rules: {
               password: { 
                 required: true,
                    minlength: 6,
                    maxlength: 10,

               } , 

                   cfmPassword: { 
                    equalTo: "#password",
                     minlength: 6,
                     maxlength: 10
               }


           },
     messages:{
         password: { 
                 required:"the password is required"

               }
     }

       }); 
      </script>
</body>

</html>

`

Re: Password Displaying in Address Bar After Form Submission 80 80

Ok, I think you have to fix the opening form tags, at the moment you have three of them, the first is not closed and it will lead to some errors:

<form id="DemoForm"

The second is well defined:

<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = 'DemoForm'>

The third is going to submit a GET request:

<form id="formCheckPassword">

Because the method is not defined and the default setting is to play GET.

When you submit the form, only the values of the third form will be submitted because these are contextual to the submit button, to include the input fields of the second form, you have to merge them into a single form:

<form method="post" action="jTest1.8.html" id="DemoForm" name="DemoForm">

    Username<br />
    <input type="text" id="user_input" name="username" /><br>

    Email<br />
    <input type="text" id="email" name="email" /><br>

    Password<br />
    <input type="password" class="form-control" name="password" id="password"/><br>

    Password Again<br />
    <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>

    <input type="submit" value="submit"/>

</form>

Fix also the javascript validation rules, to match the same form ID, or simply merge them and you're finished.

commented: Thank you. I will work on this later and post the results here. +0
commented: yep! +12
Re: Password Displaying in Address Bar After Form Submission 80 80

cereal:

Hi. I have updated the code per your suggestions but am running into other problems now.

The form can be submitted with no fields filled and the validation for the password/confirm does not work at all (The email validation still works fine). These behaviors were not happening before.

I am running this on a local Apache, otherwise you could see the behavior for yourself - I do not have it up on the hosted server yet.

Thank you for your help.

The new code is below:

`

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>

</head>
<body>
<form method = "post" action = "jTest5.8.html" id = "DemoForm" name = "DemoForm">
    Username<br />
    <input type="text" id="user_input" name="username" /><br>
    Email<br />
    <input type="text" id="email" name="email" /><br>       
    Password<br />
    <input type="password" class="form-control" name="password" id="password"/><br>
    Password Again<br />
    <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>

    <input type="submit" value="submit"/>
 </form>   

<!--Rules & Messages-->

<!--Username-->

<!--Email-->
      <script src = 'jquery.validate.min.js'></script>    
      <script>
         $("#DemoForm").validate ({
            rules: {
                        'email': {
                                    required:'true',
                                    email: 'true',
                                    }
                      },
                      messages:{
                           'email':{
                           required:'Please submit your email.',
                           email:'Enter a valid email.',
                                       }
                                       },
                                   });
       </script>  


  <!--Password--> 
       <script>
 $("#DemoForm").validate({
           rules: {
               password: { 
                 required: true,
                    minlength: 6,
                    maxlength: 10,

               } , 

                   cfmPassword: { 
                    equalTo: "#password",
                     minlength: 6,
                     maxlength: 10
               }


           },
     messages:{
         password: { 
                 required:"The password is required"

               }
     }

       });
       </script>


</body>

</html>

`

Re: Password Displaying in Address Bar After Form Submission 80 80

I suppose you're using this plugin: http://jqueryvalidation.org/

If yes, then it seems you can define only one validation process for the chosen form, so don't set two of them:

$('#DemoForm').validate({
    rules:{},
    messages:{}
});

$('#DemoForm').validate({
    rules:{},
    messages:{}
});

Set only one for this ID. The second problem is given by the value assigned to the required attribute which needs to be boolean, not string. So, instead of:

required:"true",

Use:

required:true,

The same applies to the other attributes in which you define a boolean value, like email:

email:true,

Full example:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <title>jQuery Form Validation</title>
    </head>
    <body>

        <form method="post" action="jTest5.8.html" id="DemoForm" name="DemoForm">

            Username<br />
            <input type="text" id="user_input" name="username" /><br>

            Email<br />
            <input type="text" id="email" name="email" /><br>

            Password<br />
            <input type="password" class="form-control" name="password" id="password"/><br>

            Password Again<br />
            <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>

            <input type="submit" value="submit"/>

        </form>

        <script src='jquery.validate.min.js'></script>    
        <script>
            $("#DemoForm").validate({
                rules: {
                    'email': {
                        required: true,
                        email: true,
                        },

                    'password': {
                        required: true,
                        minlength: 6,
                        maxlength: 10,
                        },

                    'cfmPassword': {
                        equalTo: "#password",
                        minlength: 6,
                        maxlength: 10
                        }
                    },

                messages: {
                    'email': {
                        required:'Please submit your email.',
                        email:'Enter a valid email.',
                        },
                    'password': {
                        required:"The password is required"
                        }
                    }
            });
        </script>

    </body>
</html>

Which should work fine.

commented: Thank you for all your help on this! +0
Re: Password Displaying in Address Bar After Form Submission 80 80

cereal:

I will try this all right now.

Thank you for such a quick response and for your help!

Re: Password Displaying in Address Bar After Form Submission 80 80

cereal:

In your last post you stated "Set only one for this ID." - I am confused by this. I will eventually have at least seven fields to validate on the one form. How can I go about doing that using jQuery validation?

Re: Password Displaying in Address Bar After Form Submission 80 80

OK, rereading your last reply, I think I understand better now just what you meant. Thanks again.

Re: Password Displaying in Address Bar After Form Submission 80 80

cereal:

I think that worked perfectly + I have learned a lot from the help you have given me which is very important. I appreciate it!

-Matthew

commented: You're welcome! +13
Re: Password Displaying in Address Bar After Form Submission 80 80

i have one doubt when we are create simple login form and we take get method inside form tag and when we run this html file we entered username password. this username password display on the address bar but i want to know where will be store these username password ? because we are not using any database and any server side languages its only html file.if you run again this form and you try to enter same data or another ,older data is visible inside these fields how what is actual reason?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.