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.
Related
I have a form like below. if "Cancel Request" is clicked in the form, "delete__product" form element will be destroy. my problem here is that HTMX cannot work without (I hope not) a process like hx-post-get.... is there a solution for this?
<form method="post" id="delete__product">
{% csrf_token %}
<p>Are you sure you want to delete ""?</p>
<button href="javascript:void(1)" hx-trigger="click" hx-target="#delete__product">
Cancel Request
</button>
<button hx-post="{% url 'catalog:DeleteProduct' product.pk %}" hx-target="#delete__product">
Delete
</button>
</form>
I was trying to press a button to reload the page but it doesn't work and I don't know why
I'm using handlebars, so in theory all this code down here is inside a <body>
It sends the "POST" and everything okay, the only thing that does not run is the script
As a little relevant information, I am using Bootstrap 5.
<script>
const reload = document.getElementById('reload');
reload.addEventListener('click', _ => {
window.location.reload();
});
</script>
<div class="Things with little reference">
. . .
<form action="/dashboard/" method="POST">
<div class="form-group">
<button id="reload" class="btn btn-success">ye!</button>
</div>
</form>
The default type of button is "submit" which will submit the form.
for this case, you should change the button type to "button" or use preventDefault to stop the default behavior of the button clicked.
change the button type to "button"
<button type="button" id="reload" class="btn btn-success">ye!</button>
or use preventDefault
reload.addEventListener('click', e => {
e.preventDefault()
window.location.reload();
});
Instead of using JS you can directly specify it in button.
<button onClick="window.location.reload();" class="btn btn-success" >ye!</button>
After submiting the form You can call the method for reloading from onSubmit event.
<button type="button" onClick="onSubmit()">Close</button>
<script>
function refreshPage(){
window.location.reload();
}
onSubmit()
{
/*Here you can add your code for submit event*/
this.refreshPage();
}
</script>
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.
Can someone help me figure out how to disable a button tag, with type submit, when a form is submitted? Everything I find is showing me how to disable an input tag with type submit.
What I currently have is:
HTML:
<form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal">
<button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button>
Jquery:
$('#addBookingForm').on('submit', function() {
$("#addBooking").attr( "disabled", "disabled" );
});
OR:
onsubmit="document.getElementById('addBooking').disabled = 1;"
The problem with this is that it does not submit the page. The easiest solution would be to convert the button to be an input but I was hoping it could be done as a button
Many thanks!
<form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal">
<script>
$(document).ready(function(){
$("#addBooking").attr("disabled", "disabled");
});
</script>
<button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button>
</form>
This will solve your problem.
In your jquery solution, add the '(this).submit();' line BEFORE the line u use to disable the button
I tried to find out where is the problem, but no clue.
I have 4 buttons for one form by using HTML5 multi submit. When I click on DELETE button, a dialog pops out, by using an attribute onclick="confirm('message');. When I hit Cancel, it should stop form submission, close the dialog and stay on the same page without any actions, instead it keeps submitting the form. It works perfectly until now, and I can't find out where is the problem.
<form action="http://google.com/index/25" method="post" accept-charset="utf-8">
<button class="btn" type="submit" name="formSubmit" value="new">New</button>
<button class="btn" type="submit" name="formSubmit" value="save">Bulk save</button>
<button class="btn btn-danger" type="submit" name="formSubmit" value="delete" onclick="confirm('Do you really want to remove a record(s)?.');">Delete permanently</button>
<button class="btn" type="submit" onclick="confirm('stop or proceed');">submit</button>
</form>
And a live DEMO IS HERE on jsbin
Anyone got the same bug ?
Handle it on the form instead of the button, and have the handler return the outcome from the confirm dialog:
<form onsubmit="return confirm('stop or proceed');">
You can also handle the events of each button, but don't forget to return:
<button onclick="return confirm('blabla');">Button</button>
If you wanna use Jquery, you should use this code:
click
JQuery
$(function () {
$(".classTest").click(function (e) {
return confirm("Submit the Post action?");
});
}