How To Update Hidden Field In Django Form

37
January 25, 2019, at 10:50 AM

I am trying to figure out the best approach to modifying a hidden django form field. Or if it's even possible. I had my HTML setup to accomplish this very task and it was working perfectly. However, in order to prevent multiple submissions I had to change my HTML and now I am unable to figure out how to pass a value via an HTML button depending on what the user clicks on.

Previously, I had two buttons defined as outline below:

<button type="submit" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="submit" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

As stated above, this worked perfectly for the purpose of passing a value to an attribute for my model. The value of status was saved as expected depending on which button the user clicked on.

Now I have updated the buttons to type="button" in response to this issue that I opened up today...How To Prevent Double Submit With Form Validation

I tried using the following code:

<button type="button" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="button" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

And then I also changed the status field to {{ status.as_hidden }} in my HTML to get the value. This only works if I hardcode the status value in my database structure. I need to be able to get this value dynamically depending on what the user clicks. Is JQuery with Ajax the right approach for this? Is there some simple way to modify the hidden field depending on which button the user clicks?

Is there some better way to go about trying to get this field in a hidden manner? As stated above the HTML way with type="submit" worked perfectly, but caused problems when I was trying to prevent the user from double submitting the form. As in all things programming I solved one problem and created another.

Thanks in advance for any thoughts.

Answer 1

Keep using two submit buttons like you were. But instead of disabling the buttons, you disable the whole form from submitting if once submitted.

First, give your form a unique html ID.

<form id="myform">
    ...
</form>
<!-- JS code -->
<script type="text/javascript">
$('#myform').on('submit', function(e) {
    if ($(this).hasClass('submitted')) {
        // prevent submission
        e.preventDefault();
        return;
    }
    $(this).addClass('submitted');
});
</script>
READ ALSO
How do I get a specific data from a JSON array?

How do I get a specific data from a JSON array?

having problems getting json data from an array

60
How to deploy Microsoft botframework in Azure vm?

How to deploy Microsoft botframework in Azure vm?

I have a working MBF application in portal, i moved it to azure vm and when ever i sent message from postman getting 200 ok response instead actual response

29
How can i connect mongoDB in a node.js application without using the npm module?

How can i connect mongoDB in a node.js application without using the npm module?

I'm setting up a DB for my api, and i want to use the mongoDB, but i don't want to use the mongo npm module, because it will spoil the structure of my codeSo please how can i connect mongoDB database in my node

53