Submitting HTML form with additional hidden data using JQuery

Question

I'm trying to add another parameter using a hidden input:

$('#form1').submit(function(){ //listen for submit event

        $('<input />').attr('type', 'hidden')
            .attr('name', 'id')
            .attr('value', id)
            .appendTo('#form1');

    return true;

});

"id" is a global variable.

My HTML form:

 <form id="form1" method=POST runat="server" enctype='multipart/form-data' action="/set_image">
       <div class="fileButtons">
       <input type='file' id="imgInp" name="imgInp" accept="image/*"/>
        <input type='button' id='remove' name="remove" value='Remove' />
        </div>
     <br>


<div class="modal-footer">
        <a type="button" class="btn pull-left" data-dismiss="modal">Cancel</a>
        <button type="submit" class="btn btn-primary pull-left">OK</button>
      </div>    
    </form>

In the log console of Google app engine, I can see that only "id" gets its value.

In firebug, it shows while debugging:

imgInp
    input#imgInp property value = "2.jpg" attribute value = "null"

main.py:

class SetImage(webapp2.RequestHandler):
    def post(self):
        id = str(self.request.get('id'))
        image = str(self.request.get('impInp'))
        ...

app = webapp2.WSGIApplication([ ('/set_image', SetImage),
                                ('/', MainPage)], debug=True)

I used the post in here:

https://stackoverflow.com/a/993897/2653179

Edit: The problem was solved, it was a typo in the imgInp variable in SetImage class...

How do you know it does no do anything? what is `id` ? – Sergio Sep 11 '13 at 22:06 — Sergio, Sep 11 '13 at 22:06
I added the additional info in the first post. – user2653179 Sep 11 '13 at 22:08 — user2653179, Sep 11 '13 at 22:08
try method=POST -> method="POST" – dragonx Sep 11 '13 at 22:36 — dragonx, Sep 11 '13 at 22:36
Tried it, still the same... – user2653179 Sep 11 '13 at 22:40 — user2653179, Sep 11 '13 at 22:40

score 1 · Answer 1 · answered Sep 11 '13 at 22:58

1

        $('<input />').attr('type', 'hidden')
        .attr('name', 'id')
        .attr('value', id)

answered Sep 11 '13 at 22:58

thinker3

12,771
5
30
36

Thanks, now I am able to get the id, but still not the image. – user2653179 Sep 11 '13 at 23:04
That is difficult to me. – thinker3 Sep 11 '13 at 23:10
I added more info... I appreciate your help guys. – user2653179 Sep 11 '13 at 23:43

score 0 · Answer 2 · answered Sep 12 '13 at 15:53

0

Add the new field this way:

$('#form1').submit(function(){ //listen for submit event

    $(this).append('<input name="' +id+ '" type="text" />');

});

jsFiddle

answered Sep 12 '13 at 15:53

cssyphus

37,875
18
96
111

user2653179 · Accepted Answer · 2013-09-13T00:25:52.680

-1

There was a typo in getting the image in SetImage class... :)

I wrote impInp instead of imgInp...

edited Sep 13 '13 at 00:25

answered Sep 12 '13 at 10:26

user2653179

393
1
6
21

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – René Höhle Sep 12 '13 at 10:47
Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. – Michel Keijzers Sep 12 '13 at 11:13

Submitting HTML form with additional hidden data using JQuery

3 Answers3