We Keep Coding

How To Update Hidden Field In Django Form

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.

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>

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>

The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.

Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

clear textbox on submit button without reloading the page

Below is the jquery and the two code lines one for the text box and the other for the submit button but i just cant get them to link. I have tried a few different ways suggested on here but i cannot get the submit button to link to the text box and clear it. All help greatly appreciated
$j is set as noConflict()
$j('.submit').keypress(function(){
$j('.comment').val('');
});
<textarea name="name" rows="5" class="fullinput" id="comment"></textarea>
<input id="submit" type="submit" value="Add to List" class="add" />
UPDATE - So i realised that i was using the incorrect selectors the correct code should have been.
$j('#submit').click(function(event){
$j('#comment').val('');
event.preventDefault();
});
This along with the answers below resolved this issue.

This should work:
$j('#submit').click(function(event){
$j('#comment').val('');
event.preventDefault();
});
By clicking on a "submit" input, the user is invoking a postback. Therefore you need to use the built-in javascript event to prevent the postback from happening using the .preventDefault() method.

HTML Onlcick event only works with # Anchor Tag

When I attempt to call a function my this page using the below code. I just seems to refresh the page and not call the script.
<form role="search" name="locationForm">
<div class="form-group">
<input id="locationInput" type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
</form>
If I add a '#' to the end of the url, reload the page, then the onlcick event works as it is suppose to.
As far as I knew these were Anchor tags and I have no idea why they would be required in the calling of a function.
How do I correct this? As I don't want to have to use the #.

You are using a button element, whose default behavior, when clicked, submits its parent form. return false will stop the form from submitting:
<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>

If you don't want the button to automatically submit, you could change its type to button. Then, all it will do is run its onclick code. (You can still have that code submit the form manually)

I suppose you want to run the start() function when you submit the form?
You said you're working with an click event listener.
Try to listen for the submit event, instead.
$('#your_form_id').on('submit', function(e) {
e.preventDefault();
your script...
});
The code above basically does this.
Furthermore, the preventDefault keeps the form from actually submitting itself.
You could access the form data with
$('#your_form_id').serialize();
I hope this pushes you into the right direction!

Why is <input type="button"> submitting a form?

<form name="callEventForm" method="post" action="/PDC/callevent.do">
...
<input type="button" value="Save" name="addCallEvent" id="addCallEvent" onclick="alert('You clicked me!')"/>
...
</form>
When clicking this "Save" button, the form is submitted instead of displaying the alert. I was lead to believe that type="button" would cause the form to not submit on click.

Change:
onclick="alert('You clicked me!')"
To:
onclick="alert('You clicked me!');return false;"

I hate to answer my own questions but this was a weird one. There was an ajax:updateField tag that was overriding the onclick event of the button. Changing the source event of the ajax:updateField allowed my established onclick event to fire appropriately. I know that there's no way anyone would have caught that based on the code I posted, but the rest of the page is so much code that I would hate to make people wade through it.