librelist archives

« back to archive

Obtain order of input fields from POST

Obtain order of input fields from POST

From:
Jakub Muszynski
Date:
2013-05-01 @ 13:44
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