title: Mysql Database with Flask (Page keeps Refreshing)
body: <p>I am new to python and flask. I have been working with MySQL.python connector to connect to the database with flask. The issues that i am having, is trying to take the input data from the webpage and have it appear in MySQL. From everything I have learned so far is using the (details = request.form) to pull data from the HTML and insert it into a variable and running code like that. When I press submit on the webpage, it refreshes it and no data has been added to the database.</p>
  <p>If you all can help, it will be much appreciated.</p>
  <pre><code>from flask import Flask, render_template, request, flash, redirect, url_for
  from flask_mysqldb import MySQL
  import mysql.connector
  app = Flask(__name__)
  
  
  conn= mysql.connector.connect (
  host = 'localhost' ,
  user = 'root',
  password = '',
  
  database = 'db_randolph',)
  
  if (conn):                                               # this connects to the database and has a if statment that says if it workds or not. 
      print (&quot;Connected Successfully&quot;)
  else:
      print (&quot;Connection Not Established&quot;)
  
  
  mycursor = conn.cursor()
  
  
  
  mysql = MySQL(app)
  
  @app.route('/ADD', methods=['GET', 'POST'])
  def test_Artist ():
      if request.method == 'POST':
          details = request.form
          artist_name = details['artist_name']
          ablum_name = details['ablum_name']
          song_name = details[ 'song_name']
          cur = mysql.connection.cursor()
          artist = &quot;INSERT INTO p_artist(artist_name) VALUES (%s)&quot;  # this is the add screen for the site and it will flash a message when complete. When things are submitted the page refresh with submitting things to the database. 
          song = &quot;INSERT INTO p_track_name(track_name) VALUES (%s)&quot;
          ablum = &quot;INSERT INTO p_ablum(ablum_name) VALUES (%s)&quot;
          mycursor.commit(artist, artist_name)
          mycursor.commit(song, song_name)
          mycursor.commit(ablum, ablum_name)
          mycursor.close()
          Flash(&quot;The infomation has suscessfully been inserted into database&quot;)
          return redirect( &quot;home.html&quot;)
  
      return render_template('add.html')
  
  
  if __name__ == '__main__':
      app.run()
  </code></pre>
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt; music Page &lt;/title&gt;
  &lt;style&gt; 
  Body {
    font-family: Calibri, Helvetica, sans-serif;
    background-color: pink;
  }
  button { 
         background-color: #4CAF50; 
         width: 100%;
          color: orange; 
          padding: 15px; 
          margin: 10px 0px; 
          border: none; 
          cursor: pointer; 
           } 
   form { 
          border: 3px solid #f1f1f1; 
      } 
   input[type=text], input[type=password] { 
          width: 100%; 
          margin: 8px 0;
          padding: 12px 20px; 
          display: inline-block; 
          border: 2px solid green; 
          box-sizing: border-box; 
      }
   button:hover { 
          opacity: 0.7; 
      } 
    .cancelbtn { 
          width: auto; 
          padding: 10px 18px;
          margin: 10px 5px;
      } 
        
     
   .container { 
          padding: 25px; 
          background-color: lightblue;
      } 
  &lt;/style&gt; 
  &lt;title&gt; Artist Table Database&lt;/title&gt;
  &lt;/head&gt;  
  &lt;body&gt;  
  
  
      &lt;p&gt;&lt;a href=&quot;http://localhost:5000/Delete_Ablum&quot;&gt;Delete Ablum&lt;/a&gt;&lt;/p&gt;
    
      &lt;p&gt;&lt;a href=&quot;http://localhost:5000/Delete_Artist&quot;&gt;Delete Artist&lt;/a&gt;&lt;/p&gt;
    
      &lt;p&gt;&lt;a href=&quot;http://localhost:5000/Delete_Songs&quot;&gt;Delete Artist&lt;/a&gt;&lt;/p&gt;
  
      &lt;p&gt;&lt;a href=&quot;http://localhost:5000/Home&quot;&gt;Home&lt;/a&gt;&lt;/p&gt;
  
      &lt;center&gt; &lt;h1&gt; Add Artist, Name, Song and Ablum Infomation &lt;/h1&gt; &lt;/center&gt; 
      &lt;form&gt;
          &lt;div class=&quot;container&quot;&gt; 
              &lt;label&gt;Artist Name: &lt;/label&gt; 
              &lt;input type=&quot;text&quot; placeholder=&quot;Artist Name&quot; name=&quot;artist_name&quot; &gt;
              &lt;label&gt;Artist Ablum : &lt;/label&gt; 
              &lt;input type=&quot;text&quot; placeholder=&quot;Enter Ablum Name&quot; name=&quot;ablum_name&quot;&gt;
              &lt;label&gt; Song &lt;/label&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Enter Song&quot; name=&quot;song_name&quot; &gt;
              &lt;button type=&quot;submit&quot;&gt;Enter Artist Infomation&lt;/button&gt; 
              &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot;&gt; Remember me 
              &lt;button type=&quot;button&quot; class=&quot;cancelbtn&quot;&gt; Cancel&lt;/button&gt; 
              Forgot &lt;a href=&quot;#&quot;&gt; password? &lt;/a&gt; 
          &lt;/div&gt; 
      &lt;/form&gt;  
   &lt;table&gt; 
  
   &lt;/table&gt;   
      
  &lt;/body&gt;   
  &lt;/html&gt;
  </code></pre>