Search code examples
javascriptpythonhtmlflaskrequest.form

Sending data from a html non-input to Flask


how can i send non-input data (like lists) from html to Flask.

<form action="/" method="POST"> 
  <ul class="list-group">
    <li class="list-group-item " id="">Data that i want to receive 1</li>
    <li class="list-group-item " id="">Data that i want to receive 2</li>
    <li class="list-group-item " id="">Data that i want to receive 3</li>
  </ul>
  <input name="send" type="submit" value="Send">
</form> 

with request.from i only receive the button informations in python, but i want the data from the list. What i have to do, that i can get the list-data?


Solution

  • HTML forms only send along <input> tagged values to the remote endpoint when a "submit" input is pressed. You have three list elements, but only one "input" element - the submit button.

    Try putting the other elements you want to be sent up with the form in "input" tags, with appropriate types, and 'name' attributes identifying how the values will be extracted in processing code:

    <form action="/" method="POST"> 
    <ul class="list-group">
        <li class="list-group-item">
            <select name="my_select"> <!-- *NOTE* the select field, with options in a dropdown -->
                <option value="val1">Value 1</option>
                <option value="val1">Value 2</option>
                <option value="val1">Value 3</option>
            </select>
        </li>
        <li class="list-group-item">
            <input type="text" name="data_2" placeholder="Data that I want to receive 2"></input>
        </li>
        <li class="list-group-item">
            <input type="text" name="data_3" placeholder="Data that I want to receive 3"></input>
        </li>
        <li class="list-group-item">
            <input name="send" type="submit" value="Send"></input>
        </li>
    </ul>
    

    The tag you're probably looking for to achieve your 'list' goal is 'select'. Select has 'option' children that are the available choices from a dropdown list.

    There are other input types than "text"; see https://www.w3schools.com/html/html_forms.asp for a concise basic rundown of how HTML forms work.

    Edit: cleaned up some formatting; added placeholder value, added list dropdown after re-reading OP question.