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.
Related
I have a form which has a cancel button, a save (submit) button and a save continue link. Now the buttons work and the javascript is called via a function called from the form onsubmit method. This works as expected as does the cancel button. however the save and continue is not working. Follows is a simplified example:
<form id="save-form" class="admin-form" method="post" action="save-job" onsubmit="return jobFormSave(this);">
<input type="text" name="data" value="">
← cancel
<input class="button" type="submit" value="save">
<a class="button oklink" onclick="document.getElementById('save-form').submit();">ok →</a>
</form>
And the javascript for simplification just alerts ok (the real example has an ajax call to the save-job action):
<script>
window.jobFormSave = function (aForm) {
alert( "Ok" );
}
</script>
So when i click Save button the form is validated, saved and a message is displayed. Clicking on the Ok link however triggers the form submit action (save-job) but i want it to use the jobFormSave function. So I've a few questions:
can this be done while submitting the form data to the function?
can i determine whether i clicked the ok or the save button from within the javascript (or if not within the save-job action function)?
Is there a better way to achieve what seems an everyday thing.
I'm using php 7.2 to handle the forms action functionality and jQuery is available and used for the ajax query in the actual code.
I've kept the code short as mostly it is not relevent to the question but I can provide more code if you guys need it.
Probably you are looking for:
<script>
window.jobFormSave = function (aForm, action) {
alert('User '+ action + " form with data "+ JSON.stringify(aForm))
if (action == 'okayed')
aForm.submit();
}
</script>
<form id="save-form" class="admin-form" method="post" action="save-job" onsubmit="return jobFormSave(this, 'submitted');">
<input type="text" name="data" value="">
← cancel
<input class="button" type="submit" value="save">
<a class="button oklink" href="javascript:{}" onclick="return jobFormSave(document.getElementById('save-form'), 'okayed');">ok →</a>
</form>
Form can be passed as an argument as I did in anchor tag's onclick and then it can be decided to submit at function level based on the action
I am using parsleyjs for form validation. I have two buttons 'save' and 'cancel'. I want to use save button for submitting the form, and for cancel button I do not want to submit form. Currently when I click any of them, they take me to form submission
<form id="form_validation">
<div>
<input type="text" required/>
</div>
<div>
<button type="submit">Save</button>
<button type="submit">Cancel</button>
</div>
</form>
<script>
var $formValidate = $('#form_validation');
$formValidate.parsley().on('form:submit', function () {
//this code is called when I click save or cancel button
});
</script>
If you 'cancel' button isn't to submit the form, then it shouldn't have a type="submit". Problem solved.
I am having two submit button on a form named 'Save' and 'Delete'. Now I want to explicitly do submit with Delete button. How can I do it?
I have tried following:
$('#myForm').submit();
and
$('#myForm').bind('Delete').submit(); // Delete is value of delete submit button.
but it don't work for delete functionality. Pls help.
Something like this:
$('delete selector').bind('click', function() { $('#myForm').submit() });
Do you have to use jQuery? Can you not make the delete button a submit type?
<input type="submit" name="delete" value="delete"/>
Or:
<button type="submit" name="delete">Delete</button>
I want to submit and redirect a form using jquery.I have tried to do it but redirect does not works, here is my code. The problem is i have two submit buttons in my form and both are redirecting to other page when i set the action=".....php".But i do not want update cart button to redirect to any other page so i want to use jquery for submitting and redirecting form. Please give me some solution. Thanks...
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(){
$('#form1').submit();
window.location.href='Checkout.php';
});
});
</script>
<form name="form1" method="post" id="cartform" class="clearfix" action="#">
<input type="submit" id="updateCart" value="Update Cart" class="btn-txt" name="update" onclick="update_cart()">
<input type="submit" class="checkout-button btn" name="checkout" />
</form>
You should do e.preventDefault(); on the update cart button and then fire the function that updates the cart.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(e){
e.preventDefault();
updateCart();
});
});
</script>
You wouldn't want to fire the form submission when the "update cart" button is pressed, only when the "checkout" button is pressed.
Your approach is OK but you need to decide which button is your official form "submit" button, and which is attached to a jQuery function to update the form before submitting.
I would recommend that you don't do any javascript for your main "Checkout" button as you will want this to go to a payment page where you capture payment details - i.e. the form will follow it's action="checkout.php".
For your "Update Cart" button follow APAD1's answer and adapt it to your needs. If you're going to be updating form fields you'll need to think about using JSON-encoded returned data...
You could just make it an html button that doesn't submit by setting it's type to "button" and then it will just run the javascript when clicked. Then you can put the action attribute back on your form and it will only submit for the checkout submit button.
<button type="button" id="updateCart" class="btn-txt" name="update" onclick="update_cart()">Update Cart</button>
add id or class in form tag
<form id="form1" ...>
change submit button to anchor
<a id="submitAnchor"> ... </a>
and in javascript submit the form and redirect the user as well
$("#submitAnchor").click(function(){
$(".form1").submit();
setTimeout(function() {
window.location = 'your URL';
}, 1000);
});
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?");
});
}