I have an issue where my form submits even though I've not told it to (in Javascript). I have an event handler for the form button, which checks if the input is a valid integer above 0, and works upon that. The problem is that even if it finds this to be false, the form still submits.
Here is my form code:
<form id="case_form" method="post" action="/dms/create/">
{% csrf_token %}
<h3>Case ID</h3>
<input name="caseID" id="caseNum" type="text" class="form-control" placeholder="ID of Case to create" required
autofocus><br/>
<button class="btn btn-lg btn-primary btn-block" id="submitButton">Create Case</button>
</form>
And my Javascript event handler.
$('#submitButton').click(function () {
numVal = $("#caseNum").val();
if (Math.floor(numVal) == numVal && $.isNumeric(numVal) && numVal > 0){
$("#case_form").submit();
}else{
$("#errorDisplay").show();
//Code gets here but still submits once leaving function
}
});
This is my first Answer :D
Try this.
<form onsubmit="return fnValidate()" ...> ... </form>
Javascript:
function fnValidate(){
var numVal = $("#caseNum").val();
if (Math.floor(numVal) == numVal && $.isNumeric(numVal) && numVal > 0){
return true;
}else{
$("#errorDisplay").show();
return false;
}
}
When fnValidate returns True your form will be submited. when function returns false this won't be submited.
Good Luck !
Solved it...
Apologies for submitting this question, I was trying to figure it out for ages, then Sod's law - as soon as I submit the question I have a "oh, that's so obvious" moment.
I forgot to put...
type=button
...in the button HTML.
this was happening to me, I realized I had to put my commented code in these Django comment tags for them to stop firing: {% comment %} comments here {% endcomment %}.
Related
Before I get into the problem details, I still need to tell you about this form I am creating. I have a Registration form and once the user submits the form by clicking the Submit button, it will NOT go directly to a Successfully Registered page. The user will be seeing a Confirmation page prior to that. In this page, the user will see all the data he inputted for him to review. Below it are the Confirm button and the Return button (if user still likes/needs to edit his details, it will then show the form for him to edit once this button is clicked). But here's the thing, the Registration form page and the Confirmation page are in just the same page. What I did is that when the user submits the form, it will hide some elements including the Submit button and then just show the details he inputted. When the user clicks the Return button on the Confirmation page, it will just then show again the hidden fields so the user can edit his details.
What I did in preventing the form from submitting when there are errors is that I disabled the submit button. But it is not working. I am using bootstrap for my form so when there are errors, the input fields' borders would turn red and would obtain a class has-error. Here's what I did:
$("td .form-group").each(function() {
if($(this).hasClass('has-error') == true) {
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled',true);
}
});
But again, it is not working. I also googled some jQueries like the .valid() and .validate() functions but I'm not really sure about it and also didn't work for me.
I also did this code where the Submit button should disable when required fields are still empty. And it is perfectly working:
$('#submit').attr('disabled',true);
$('input[id^="account"]').keyup(function() {
if(($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0)) {
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled',true);
}
});
I hope you understand my problem. I will make it clearer if this confuses you.
What I did in preventing the form from submitting when there are errors is that I disabled the submit button. But it is not working.
When is it checking for errors? It needs to disable the submit button at the same time it is checking for errors. Your code doesn't work because there's no event telling it WHEN to execute. WHEN do you want submit button to be disabled?
Do you want it triggered when the field is validated or when the form is submitted?
You can't really tie it to the submit button unless you want to click it first to validate the form fields, and then again to submit validated fields. Then you'll need to figure out how to tell it that it's been validated like by a class, maybe? Only accept inputs that hasClass('valid')?
below are the changes
$(".form-group").find("td").each(function() {
if($(this).hasClass('has-error')) {
$('input[type="submit"]').prop('disabled', false);
} else {
$('input[type="submit"]').prop('disabled', true);
}
});
Try the following
$('#submit').click(function(){
var error = false;
$("td .form-group").each(function() {
if($(this).hasClass('has-error') == true) {
error = true;
return false; //break out of .each
}
});
return !error;
});
You can achieve this by maintaining 2 sections.
1. Form section
<form id="form1">
<input type="text" id="name" />
<input type="email" id="email" />
<input type="button" id="confirm" value="Confirm" />
</form>
2. Confirm section
<div id="disp_data" style="display: none;">
<lable>Name: <span id="name_val"></span></lable>
<lable>Email: <span id="email_val"></span></lable>
<input type="button" id="return" value="Return" />
<input type="button" id="submit" value="Submit" />
</div>
You have to submit the form by using js submit method on validating the form in confirm section (When the user clicks on submit button)
$("#submit").click(function(){
var error_cnt = false;
if($("#name").val() == '') {
error_cnt = true;
alert("Enter Name");
}
if($("#email").val() == '') {
error_cnt = true;
alert("Enter Email");
}
if(error_cnt == false) {
$("#form1").submit();
} else {
$("#disp_data").hide();
$("#form1").show();
}
Demo
You have to prevent the form from sumition by return back a boolean false so that it will stop the execution.
$('#submit').click(function(){
var ret = (($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0));
if(!ret) return false;
});
If you want to disable the submit button in case of any error you need to monitor the changes of each input fields. so better to give a class name to all those input fields like commonClass
then
function validation_check(){
var ret = (($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0));
return ret;
}
$("#submit").prop("disabled",true)
$(".commonClass").change(function(){
if(validation_check()){
$("#submit").prop("disabled",false)
}
else {
$("#submit").prop("disabled",true)
}
});
please use onsubmit attribute in the form element and write a javascript function to return false when there is any error. I've added fiddle you can try.
HTML FORM
<form action="" method="" onsubmit="return dosubmit();">
<input type="text" id="name" />
<input type="email" id="email" />
<input type="submit" value="Submit" />
</form>
JAVASCRIPT
function dosubmit() {
if(false) { //Check for errors, if there are errors return false. This will prevent th form being submitted.
return false;
} else {
return true;
}
}
Let me know if this fixes your issue.
I've a problem trying to submit a formset through Ajax. A little informaton of what I'm doing is that the user enters a word and through Ajax I get the length of of it and produce a formset according to that number. I then print it out with a for loop and each form has a valid button that its suppose to submit that specific format to validate it. So its a single form submit for each button. Here is my code:
<div id="example1" type="hidden">
{{ exampleForm.management_form }}
{% for form in exampleForm %}
<form onsubmit="return false;" method="GET" id="{{ form.prefix }}" >
( {{ form.letterOfWord }} + {{ form.keyToUse }} ) MOD 26 =
{{ form.letterToFill }} <button name="action" id="validateButton" value="validate"> Validate </button> <br>
</form>
{% endfor %}
And my javascript file:
$("#validateButton").on({
click : function() {
// var variable = document.getElementById('id_plaintext');
// console.log(variable.value)
console.log("Inside validate button function")
var serializedData = $('form').serialize();
console.log(serializeData);
$.ajax( {
url: "/exampleCaesar",
type : "GET",
data: { CSRF: 'csrf_token',
serializedData
},
success : function(exampleData) {
console.log(exampleData)
}
}); //END OF Ajax
} //END OF FUNCTION
}); //END OF validateButton
Thing is that when I click any of the validate buttons, nothing is submitted. I know this because I got a console.log in the javascript to know when it goes in. If that doesnt print out then it didn't actually go in.
Any tips? Been breaking my head all day for this. Thanks
you have multiple IDs validateButton. This might be source of your problems. As far as I know, or would guess, jquery will only trigger on the first button of the first form in this case.
Also, I'm not sure if jquery will serialize proper form when you use this code
var serializedData = $('form').serialize();
as again, you have multiple form in your html
Also, the managment_form should be inside of <form>, otherwise it won't get sent to Django. Check out the docs https://docs.djangoproject.com/en/1.9/topics/forms/formsets/#using-a-formset-in-views-and-templates
I have a submmit button like Following:
Save & Continue
And My function in js is:
function checkCreditDebit(buttonValues) {
//Some validation here
//Disable Button if once clicked to prevent twice form submission
document.getElementById('saveandcontinue').disabled = 'disabled';
document.getElementById('onlysave').disabled = 'disabled';
}
But when i submit form in firefox it disabled the "save & continue", button and submit form. But in chrome it disable the button but not submit the form. What is the wrong with this please suggest. Thanks in Advance
Instead of just disabling your submit button(forms can also be submitted if you press enter on text-boxes), attach a handler to your form that will leave a 'class name' to your form as a mark that the form was already submitted, if the user submit the form again, the handler should check if the form has already the class name, then prevent duplicate submission via event.preventDefault().
try this:
<form onsubmit="prevent_duplicate(event,this);" action="">
<input type="text" />
<input type="submit" />
</form>
<script>
function prevent_duplicate(event,form)
{
if((" "+form.className+" ").indexOf(" submitted ") > -1)
{
alert("can't submit more than once!!!");
event.preventDefault();
}
else
{
form.classList.add("submitted");
}
}
</script>
Demo here
instead of disabling pervent multiple submit by setting a javascript flag example :
<form method="post" id="ecomFormBean" name="ecomFormBean" onsubmit="return checkSubmit(this);" >
<input type="text" />
<input type="submit" />
</form>
<script>
var formSubmitted = false;
function checkSubmit(f){
if (formSubmitted) {
alert('Please be patient. Your order may take 10 - 15 seconds to process. Thank you!');
return false;
}
else return formSubmitted = true;
}
</script>
Chrome runs javascript very fast. So it might be possible your checkCreditDebit(buttonValues) function which is to disable submit button executes before your php script submits the form.
I suggest you to call setTimeOut function before calling the javascript function so that the form can get submitted.
Give it a try.
I need to upload user's image to server for django(1.8) to process it.
I'm sure the client only submits the form only once. Howerver, the backend executed the related view function many times and return 504 when I submitted a little large image(about 2M).
Here is my html:
<form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
{% csrf_token %}
<a href="javascript:void(0);" class="addPic">
<input id="choose_btn" class="btn" name="user_image" type="file"></a>
</form>
<button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>
Here is my js(insure there is only one submit , inspired from https://stackoverflow.com/a/4473801/1902843):
$('#upload_btn').click( function () {
var $btn = $(this).button('loading');
$('#upload_form').submit(function(e){
console.log("start submit");
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
console.log("has submitted!");
e.preventDefault();
} else {
console.log("first submitted");
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
$('#upload_form').submit();
});
and my back-end view function is:
model
class UserImage(models.Model):
image = models.ImageField(upload_to='./user_image/%Y%m/%d', storage=ImageStorage(), blank=False)
detect_result = models.TextField(max_length=1000, blank=True)
view
#csrf_exempt
def test(request):
# if use form's is_valid() function, it always return false.
# very weird, thus i annotate it
# if request.method == 'POST':
# form = UploadFileForm(request.POST, request.FILES)
# if form.is_valid():
user_image = request.FILES['user_image']
im = UserImage(image=user_image)
im.save() #after looking for log, it saved many times depending on image size?
img_path = settings.MEDIA_URL + str(im.image)
...
processing image
...
return render_to_response('open.html', result_data)
I would personally start by placing your submit button within the form.
<form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
{% csrf_token %}
<a href="javascript:void(0);" class="addPic">
<input id="choose_btn" class="btn" name="user_image" type="file"></a>
<button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>
</form>
And then use an event listener on the #upload_btn instead of triggering a click. Also, only call $('#upload_form').submit() once
$('#upload_btn').on('click', function (e) { // Attach a click event listener
// Check the form, display loading icon, etc
// and when ready to submit the form ...
$('#upload_form').submit();
});
I know that, using Javascript, I can tell a form to submit using something like this:
document.forms[0].submit()
However, if there are a number of forms on a page, which could be in any order, how would I target the submit link in this form:
<form action="/services/auth/" method="post">
<div id="auth-allow-container" class="button-container">
<a class="Butt" id="auth-allow" type="submit" href="#"><span>SUBMIT</span></a>
<a class="Butt CancelButt" id="auth-disallow" href="#home"><span>CANCEL</span></a>
</div>
</form>
..so that it is as if the user has clicked SUBMIT?
You could make a function:
function submitFormById(id) {
var el = document.getElementById(id);
while ( el && el.tagName.toLowerCase() != 'form') {
el = el.parentNode;
}
el && el.submit();
}
Then you use this function like so:
submitFormById('auth-allow');
submitFormById('auth-disallow');
Both will submit the form.
Give the form a name attribute. Then you can do document.name.submit(). i.e.
<form name="MyForm" ....>
<input ... />
</form>
You would then be able to do document.MyForm.submit()
EDIT:
As you have said you can't change the html, solutions adding an ID are also no help. You will have to identify which numerical form element on the page this specific one is and do docuemnt.forms[x].submit() where x is the index of this form.
put in the link:
onclick="this.parentNode.parentNode.submit();"
this is a bit fragile if you change the dom structure but it is a generic link for this kind of form
update:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("auth-allow").addEventListener("click", submithAuthForm, false);
}, false);
function submithAuthForm(){
document.getElementById('auth-allow').parentNode.parentNode.submit();
}