title: Flask - Getting NoneType when using request.form.get
body: <p>I know this has been asked several times but unfortunately I'm not being able to fully grasp other answers as my knowledge is still very limited. My attempts have been reduced to basically messing up with the <code>POST</code> and <code>GET</code> methods as well as trying <code>request.form.get()</code>, <code>request.form[]</code> and <code>request.args.get()</code> but I get either the aforementioned error or <code>method not allowed</code> error or <code>bad request</code> error.</p>
  
  <p>I created a simple website where the user chooses two numbers (either 1 or 2), the first from a dropdown list and the second from a ratio option. The output should be the sum of those numbers, however when I click the submit button I keep getting the error</p>
  
  <pre><code>TypeError: unsupported operand type(s) for +: 'NoneType' and 'NoneType'
  </code></pre>
  
  <p>My python app looks like this:</p>
  
  <pre><code>from flask import Flask, render_template,request
  app=Flask(__name__)
  
  @app.route('/')
  def main():
      return render_template('example.html')
  
  @app.route('/model',methods=['GET','POST'])
  def model():
      first=request.form.get('inputFirst',type=int)
      second=request.form.get('inputSecond',type=int)
      suma=first+second
      return render_template('final.html',suma=suma)
  
  if __name__ == "__main__":
      app.run(debug=True)
  </code></pre>
  
  <p>Here is the main html file (<code>example.html</code>)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Example&lt;/title&gt;
      &lt;script src="../static/js/jquery-3.2.1.js"&gt;&lt;/script&gt;
      &lt;script src="../static/js/model.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="container"&gt;
     &lt;div class="jumbotron"&gt;
      &lt;form&gt;
        &lt;h2&gt;Choose one number&lt;/h2&gt;
        &lt;label for="firstNumber" class="sr-only"&gt;First Number&lt;/label&gt;
        &lt;select name="inputFirst" id="firstNumber" required&gt;
        &lt;option value="1" label="One"&gt;1&lt;/option&gt;
        &lt;option value="2" label="Two" selected&gt;2&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;h2&gt; Choose another number&lt;/h2&gt;   
        &lt;input type="radio" name="inputSecond" id="one1" value="1" required/&gt;
        &lt;label for="one1"&gt;1&lt;/label&gt;
        &lt;input type="radio" name="inputSecond" id="two2" value="2"/&gt;          
        &lt;label for="two2"&gt;2&lt;/label&gt;
        &lt;button onclick="location.href='/model'" id="btnModel" class="btn btn-lg btn-primary btn-block" type="button"&gt;Run model&lt;/button&gt;
      &lt;/form&gt;
     &lt;/div&gt; 
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Here is the <code>model.js</code> file</p>
  
  <pre><code>$(function(){
      $('#btnModel').click(function(){
          $.ajax({
              url: '/model',
              data: $('form').serialize(),
              type: 'POST',
              success: function(response){
              console.log(response);
              },
              error: function(error){
              console.log(error);
              }
          });
      });
  });
  </code></pre>
  
  <p>And for the output, here is the <code>final.html</code>file </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;h1&gt;RESULT&lt;/h1&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;The result is: {{suma}} &lt;/h3&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As a last attempt, I tried to change <code>request.form.get('inputFirst',type=int)</code> by <code>request.form.get('inputFirst',0,type=int)</code> and similarly changing <code>request.form.get('inputSecond',type=int)</code> by <code>request.form.get('inputSecond',0,type=int)</code>, in which case the website works, so if I understand correctly the form in <code>example.html</code> is not saving the numbers chosen by the user, however the names <code>inputFirst</code> and <code>inputSecond</code> in the <code>example.html</code> file match the names in the request method from the python file. So I'm not sure what would be the problem.</p>
  
  <p>Any help is appreciated.</p>