We Keep Coding

Javascript Form on Submit

below is my Form
i tried several way to get to try the form.onsubmit to run my post ajax. but i cant get it.
$(document).on("submit", ".btn_create_bin", function (e) {
e.preventDefault();
console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="{% url 'create_bin' %}" class="btn_create_bin">
{% csrf_token %}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
the above javascript is not working, i cant find "test" on my console.
how do I detect when user clicked on Form#btn_create_bin.Submit button?
UPDATED my code to it is less confused, i actually tried some other method and did not remove those testing codes

sorry, did not read django-crispy form clearly.
https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html
simple add below into Form.
self.helper.form_tag = False
this will not cause crispy to include Form.

How to handle changing boolean field from database by ajax?

There is a piece of my html:
<form action="" method="post">
{% csrf_token %}
{% if donate.is_taken == False %}
<br>
<button type="submit" class="btn" name="taken_or_not" value="not_taken">Mark as taken</button>
{% else %}
<button type="submit" class="btn" name="taken_or_not" value="taken">Mark as not taken</button
{% endif %}
</form>
There is a model:
class Donation(models.Model):
...
...
is_taken = models.BooleanField(default=False)
How to create a ajax request, that the user is able to change the value 'taken_or_not' by a single button both on the page and in the database. Without any redirects, server loading etc.
I am struggling to get it.
Thanks for help.

Make a route that will take the the donation id and return it's "is_taken".
Make a repeating call using ajax to the particular route.

Select all checkboxes in django template

I am using the following code to 'select all' and 'clear' the checkboxes of my django form in the django template.
<form id="inv_form" method="post" action="{% url 'inventory:create_inventory' %}">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" name="submit" value="Create Inventory" />
Cancel
<button onclick="select_all()">Select All</button>
<button onclick="deselect_all()">Clear</button>
</form>
function select_all() {
$('input[type=checkbox]').prop('checked', true);
}
function deselect_all() {
$('input[type=checkbox]').prop('checked', false);
}
The problem is the form is getting automatically posted if I press 'check all' button. Same in case of 'clear' button.
So I tried adding preventDefault() to my form submit event.
$("#inv_form").submit(function(event){
event.preventDefault();
});
Now the original problem has been solved, but the submit doesn't works even on clicking at all.
How to make the check all button work without auto posting the django form

I found a simpler solution here.
** stack overflow: disable auto-submit on button click **
It explains that by html5 default a button is type="submit". The solution to the above problem is explained below.
<button type="button" onclick="select_all()">Select All</button>

You probably hate to unbind submit, then you can submit the form.
$('some_form').unbind('submit').submit()
This approach should cancel prevenDefault so you can submit the form.

django forms as a pop up dialogue

I just created a django form using this following documentation:https://docs.djangoproject.com/en/1.8/topics/forms/
My Forms.py is similar to this:
from django import forms
class NameForm(forms.Form):
your_name = forms.CharField(label='Your name', max_length=100)
My Html template is similar to this (from django doc):
<dialog id="addForm">
<form action="{% url "listing" %}" method="post" >
{% csrf_token %}
{{ form }}
<input id="task_submit" type="submit" value="Submit"/>
</form>
</dialog>
<button onlick="PopUp()">Add Listing </button>
<script>
function PopUp(){
document.getElementByID("addForm").showModal();
}
</script>
However, I want my form to be a pop up dialogue when a user clicks on a button called "add tasks". I do not want the form to show until the user clicks a button called "add tasks". I have not been able to find any methods so far to do so while using Django Forms.
Question: How do I implement a pop up dialogue to display my current django form when a user clicks on a button?

Found the solution I was looking for here:
http://blog.raventools.com/create-a-modal-dialog-using-css-and-javascript/

How to send an HTML form POST request using the HTML button tag?

As of now, I have a user-input structure where the user provides their username/password then clicks either "login" or register" which then ends a post request with that information.
<form action="{% url 'users:login' %}" method = "post">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="passwd"><br>
<input type="submit" name="login" value="Log In">
<input type="submit" name="adduser" value="Add User">
</form>
What I want is to replace the two submit buttons with tags, i.e.:
<form class="control-group" action="{% url 'users:login' %}" method = "post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="passwd">
<button class="button-style">Login</button>
<button class="button-style">Register</button>
</form>
But I'm unsure how to, for example, send the form's POST request with the correct information (username, password, type (login or register)) as I do in the first example.

You can use a bit a javascript.
Here is what you have to do :
Register a trigger on each button
in the triggers :
Change the action url
Send the form
You should also register a trigger on form validation, and call one of the two trigger defined previously.

there are multiple ways to do so, first your code should work, because the button should submit by default, if not you can do <button type="submit">login</button>, if still does not work, you can use an onclick="myfunction()" and let the function handle the data, but may I ask why do you want to change it? if the reason is styling I am sure you know you can style that with just a class="myClass"

Clicking the buttons will submit the form.
If you want to distinguish which button was clicked, give them names and values, just as you did in the first example.
<button class="button-style" name="login" value="Log In">Login</button>

Yes by default the button submits the form. If this does not happen just use
<button type="submit">Login</button>