Python Flask Web Application - Multi-line Input Option

Question

I am building a Flask application that has a text box and allows users to type in a domain name and submit the form with a button (the results of the search appear in HTML below the search box). I want to support multiple domain entry at once using a textarea input box. How can I use a button to toggle the form (or use a separate form) between using the text box input and the text area based on the button the user selects? And how can I take the input from the related box and process it in python?

Instead of toggling between the two, it might be easier to use the TextArea element and count how many domains are inside. Also, this question may be a partial duplicate: https://stackoverflow.com/questions/11556958/sending-data-from-html-form-to-a-python-script-in-flask — Gigaflop, Aug 01 '18 at 13:27

score 1 · Answer 1 · answered Aug 01 '18 at 16:55

You can rely on a single line of input and use jquery to keep adding new domains as needed:

app.py:

import flask
app = flask.Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
  return flask.render_template('get_domains.html')

@app.route('/add_domain')
def add_domain():
  _domains = flask.request.args.getlist('domains[]') 
  return flask.jsonify({"success":"true"})
  #do something with domains

In get_domains.html, use jquery to get all entries and ajax to communicate with the /add_domain route:

<html>
 <header>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </header>
 <body>
   <div class='outer'> <!--Used to anchor jquery updates -->
     <div class='input_section'></div>
     <button class='add_domain'>Add domain</button>
   </div>
 </body>
 <script>
  $(document).ready(function(){
   var count = 1;
   var button_count = 0;
   $('.outer').on('click', '.add_domain', function(){
    var new_html = `
    <input type='text' name='domain' id='domain${count}'>
    <div class='spacer' style='height:10px;'></div>
    `
    $('.input_section').append(new_html);
     count += 1;
     if(button_count == 0){
       $('.outer').append('<button class="submit_data" id="submit_stuff">Add all</button>')
       button_count += 1;
     }
    });
     $('.outer').on('click', '.submit_data', function(){
      var results = [];
      for (var i = 1; i < count; i++){
       results.push($('#domain'+i.toString()).val());
      }
      $('.input_section').html('');
      $('#submit_stuff').remove();
      count = 1;
      button_count = 0;
      $.ajax({
      url: "/add_domain",
      type: "get",
      data: {domains: results},
       success: function(response) {
       //pass
      },
       error: function(xhr) {
      //pass
     }
   });
    });
  });
 </script>
</html>

Result:

Python Flask Web Application - Multi-line Input Option

1 Answers1