Flask is unable to pick data from html form

Issue

    <form action='signup' method="POST"  onsubmit="return checkPassword();">

        <div class="container">

            <center>
                <h1 style="color: #511845; font-family:'Varela Round',sans-serif;">User Sign up</h1>
            </center>
            <div class="spc">
                <div class="input-container">
                    <i class="fa fa-user icon" style="font-size:30px;"></i>
                    <input type="text" placeholder="Username" name="username" id="username" required>
                </div>
            </div>

            <div class="spc">
                <div class="input-container">
                    <i class="fa fa-envelope-square icon" style="font-size: 30px;"></i>
                    <input type="email" placeholder="Email Address" name="email" id="email" required>
                </div>
            </div>

            <div class="spc">
                <div class="input-container">
                    <i class="fa fa-phone icon" style="font-size: 30px;"></i>
                    <input type="number" placeholder="Phone Number should start with 92" title="Invalid Phone Number" name="phone no" id="number" pattern="[0-9]{12}" required>
                </div>
            </div>

            <div class="spc">
                <div class="input-container">
                    <i class="fa fa-lock icon" style="font-size: 30px;"></i>
                    <input type="password" placeholder="Password" name="psw" id="psw" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"  pattern=(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,} required>
                </div>
            </div>

            <div class="spc">
                <div class="input-container">
                    <i class="fa fa-lock icon" style="font-size: 30px;"></i>
                    <input class="input-field" type="password" placeholder="Re-enter password" id="rpsw"  name="rpsw">
                    </div>
            </div>
             
            <center><button class="signup" type="submit" name="sub">Sign-up</button></center>

            <div class="spc" style="padding-left:30px">
                <div class="input-container">
                    <h3 class="signin">
                        <centre>Already have an Account?</centre>
                        <button class="signin-btn"><a style="text-decoration: none;color: white;" href="/signin">Sign-in</a></button>
                    </h3>

                </div>
            </div>
         

        </div>
    </form>
     
    <script>
        function checkPassword(){
          var1 = document.getElementById("psw");
          var2 = document.getElementById("rpsw");
          if(var1.value != var2.value){
              alert("Passwords do not match, please try again!");
              return false;   
              }
          }
         </script>

@app.route('/signup', methods=['GET','POST'])
def signup_page():
     
     if [request.method == "POST"]:
         user_name = request.form['username']
         user_email = request.form['email']
         user_number = request.form['number']
         user_password = request.form["psw"]
        user_id =  user_name[0:3] + str(user_number)[0:3] + user_password[0:3] + str(random.randrange(1000))
         

     return render_template('/Sign_up/signup.html')

I am trying to input data from the sign-up form then perform some calculations and finally store it in a database(not implemented right now) when I try to execute the above code it gives me errors on localhost the error as shown:

File "C:\Users\lenovo\Desktop\Emergency-Service\User\index.py", line 30, in signup_page
user_name = request.form['username']
File "C:\Users\lenovo\AppData\Local\Programs\Python\Python39\Lib\site-packages\werkzeug\datastructures.py", line 442, in __getitem__
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'username'

Solution

I think your problem is, that this should be request.form.get, like this

if [request.method == "POST"]:
         user_name = request.form.get['username']
         user_email = request.form.get['email']
         user_number = request.form.get['number']
         user_password = request.form.get["psw"]
        user_id =  user_name[0:3] + str(user_number)[0:3] + user_password[0:3] + str(random.randrange(1000))

Answered By – Oliver Hnat

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0