librelist archives

« back to archive

[flask] Obtain order of input fields from POST

[flask] Obtain order of input fields from POST

From:
Jakub Muszynski
Date:
2013-05-01 @ 14:10
Hi

I have html form, with variable fields number (added on client site via
simple javascript.

The Post form looks like the one below:

The return POST comes like that dict(request.form.items())

{'csrf_token': u'20130501155039##630f678bb0203f165ff060b10a4c185933f52504',
'title': u'', 'text': u'', 'text_fields': u'3', 'description2': u'32',
'description0': u'222', 'description1': u'23', 'image_fields': u'1'}

I had a plan to use "atribute" flag to enumerate sequence number in every
field to determin sequence, but I can't obtain that from request.methods...
How could I get form data with list of input fields as they are displayed
on web page?

Or should I look for another technology. What would You suggest for upload
form with variable images and text fields.


--------------------------------
The web Page:

<form method="POST" action="" enctype=multipart/form-data id='myfields'>
            <div style="display:none;"><input id="csrf_token"
name="csrf_token" type="hidden"
 value="20130501155346##d7cbef4f84a90deaa697a56b61a28fcc94e7b6f3"></div>

              <div>
              <label for="title">Title</label>
              <input id="title" name="title" type="text" value="">
              </div>

              <div>
              <label for="description">Description</label>
              <input id="description0" name="description0" type="text"
value="" atribute="0">
              </div>

       <input type=file name=image0 atribute="1">

      <input type=submit value=Upload>
              <input type="hidden" name="text_fields" value="1" />
              <input type="hidden" name="image_fields" value="1" />

</form>

          <div id='addmorelink'>
            <a href='javascript:addText()'>add more</a>
          </div>
          <div id='addmorelinkImage'>
            <a href='javascript:addImage()'>add more image</a>
          </div>



The script:
    <script type="text/javascript">
      var texts=1;
      var image=1;
      var seq=2;
      function addText(){
         var newContent = "<br> <input id='description"+texts+"'
name='description"+texts+"' type='text' value='' atribute='"+seq+"'>";
         $("#myfields").append(newContent);
         texts++;
         seq++;
         $('input[name="text_fields"]').val(texts);
      }
      function addImage(){
         var newContent2 = "<br> <input type=file name=image"+image+"
atribute='"+seq+"'> ";
         image++;
         seq++;
         $("#myfields").append(newContent2);
         $('input[name="image_fields"]').val(image);
      }
    </script>


Greetings
Jakub

Re: [flask] Obtain order of input fields from POST

From:
Alex Ogier
Date:
2013-05-01 @ 14:57
I assume you mean you wanted to use HTML attributes on input fields to
contain sequence numbers, but unfortunately this information isn't even
sent to the server so there's no way to access it from flask. There's two
ways to achieve what you want.

One is to change the "name" attribute of your fields to always be in
sequence, so you can extract that number from the name on the server. For
example, "description1-1" might be followed by "image1-2" where the last
number is always increasing. Then on the server you can call
name.split("-") to extract the two parts. That might be complicated to do
if you allow dynamic reordering.

Another is to have a hidden input field along with each description and
image. So when you create a form field "description1" you also create a
hidden field "description1_order" and set its value to 1, then 2, then 3
etc.

Best,
Alex Ogier


On Wed, May 1, 2013 at 10:10 AM, Jakub Muszynski <
jakubxmuszynski@googlemail.com> wrote:

> Hi
>
> I have html form, with variable fields number (added on client site via
> simple javascript.
>
> The Post form looks like the one below:
>
> The return POST comes like that dict(request.form.items())
>
> {'csrf_token':
> u'20130501155039##630f678bb0203f165ff060b10a4c185933f52504', 'title': u'',
> 'text': u'', 'text_fields': u'3', 'description2': u'32', 'description0':
> u'222', 'description1': u'23', 'image_fields': u'1'}
>
> I had a plan to use "atribute" flag to enumerate sequence number in every
> field to determin sequence, but I can't obtain that from request.methods...
> How could I get form data with list of input fields as they are displayed
> on web page?
>
> Or should I look for another technology. What would You suggest for upload
> form with variable images and text fields.
>
>
> --------------------------------
> The web Page:
>
> <form method="POST" action="" enctype=multipart/form-data id='myfields'>
>             <div style="display:none;"><input id="csrf_token"
> name="csrf_token" type="hidden"
>  value="20130501155346##d7cbef4f84a90deaa697a56b61a28fcc94e7b6f3"></div>
>
>               <div>
>               <label for="title">Title</label>
>               <input id="title" name="title" type="text" value="">
>               </div>
>
>               <div>
>               <label for="description">Description</label>
>               <input id="description0" name="description0" type="text"
> value="" atribute="0">
>               </div>
>
>        <input type=file name=image0 atribute="1">
>
>       <input type=submit value=Upload>
>               <input type="hidden" name="text_fields" value="1" />
>               <input type="hidden" name="image_fields" value="1" />
>
> </form>
>
>           <div id='addmorelink'>
>             <a href='javascript:addText()'>add more</a>
>           </div>
>           <div id='addmorelinkImage'>
>             <a href='javascript:addImage()'>add more image</a>
>           </div>
>
>
>
> The script:
>     <script type="text/javascript">
>       var texts=1;
>       var image=1;
>       var seq=2;
>       function addText(){
>          var newContent = "<br> <input id='description"+texts+"'
> name='description"+texts+"' type='text' value='' atribute='"+seq+"'>";
>          $("#myfields").append(newContent);
>          texts++;
>          seq++;
>          $('input[name="text_fields"]').val(texts);
>       }
>       function addImage(){
>          var newContent2 = "<br> <input type=file name=image"+image+"
> atribute='"+seq+"'> ";
>          image++;
>          seq++;
>          $("#myfields").append(newContent2);
>          $('input[name="image_fields"]').val(image);
>       }
>     </script>
>
>
> Greetings
> Jakub
>
>
>