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?
1
-
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: stackoverflow.com/questions/11556958/…Gigaflop– Gigaflop2018-08-01 13:27:10 +00:00Commented Aug 1, 2018 at 13:27
Add a comment
|
1 Answer
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:
