Adding value to hidden input tag and submitting to form

Question

I have a test page that displays my POST data. I am trying to view the post that I just submitted but I am unable to see the added payload I added in my form.

HTML:

  <form id="test-form" action="/test/" method="post"> {# pass data to /test/ URL #}
    <div class="test-button-set">
      <button type="button" id="hdfs-test" class="btn btn-default btn-lg selected">HDFS</button>
      <button type="button" id="hive-test" class="btn btn-default btn-lg">HIVE</button>
      <button type="button" id="hdfs-hive-test" class="btn btn-default btn-lg">BOTH</button>
    </div>
    <button id="submit-test" type="submit" class="btn btn-default btn-lg">Submit</button>
    <input type="hidden" id="payload">
  </form>

JS:

var testData = {
        "timestamp": "",
        "hive": 0,
        "hdfs": 0,
        "beacons":[]
    };

var testRun = document.getElementById("test-form");
    testRun.addEventListener('submit', function(event) {
        event.preventDefault();
        testData["timestamp"] = new Date().getTime();
        console.log(testData);
        var payload = document.getElementById("payload");
        payload.value = testData;
        $(this).trigger('submit', true);
    });

Currently, I cannot see the value I gave to <input type="hidden" id="payload"> which makes me to believe that it is not getting posted.

if you are using php or something like in backend the for that you need name for your hidden field. — Suchit kumar, Jan 06 '15 at 17:49

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

You need to give the input a name:

<input type="hidden" id="payload" name="payload">

See this SO answer: Difference between id and name attributes in HTML

edited May 23 '17 at 12:21

Community

1
1

answered Jan 06 '15 at 17:49

Daniel Gimenez

18,530
3
50
70

Thanks this worked! But what I see is u'payload': `[u'[object Object]']` is there a way to display it? – Liondancer Jan 06 '15 at 17:53
What type of server is the target of the POST? Maybe this is a separate SO question? – Daniel Gimenez Jan 06 '15 at 17:55
I thought about this as well. Django backend. Just checking is there was anything I could do on the frontend – Liondancer Jan 06 '15 at 17:57
I'd have to see your code, but I would assume a solution would involve `json.dumps(Post.objects.all())` – Daniel Gimenez Jan 06 '15 at 18:08

score 1 · Answer 2 · answered Jan 06 '15 at 17:49

1

You need to add a name attribute to your hidden tag.

The name is what you refer to it by.

<input type="hidden" name="payload" id="payload">

answered Jan 06 '15 at 17:49

Joe Swindell

684
1
7
18

Adding value to hidden input tag and submitting to form

2 Answers2