tml:
<div id="report-liveonly">
<form action="." id="status" method="POST">{% csrf_token %}
<p>{{SearchKeywordForm.status}}Only show LIVE reports</p>
</form>
</div>
I am trying to submit the searchform on checkbox click.It is not working. Onclick also not happening,i checked with alert message.
The total function is to show the live report,if Only show LIVE reports checkbox is checked.
Need help
I found the solution,
class SearchKeyword(Form):
search_keyword = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Keyword Search','class':'keyword-search'}))
status = forms.BooleanField(widget=forms.CheckboxInput(attrs={'onclick':'this.form.submit();'}),required=False, label="Status")
Related
I need help in order to validate our form to be submitted via google recaptcha, I have successfully implemented the code however the form still allows submission without the recaptcha, how do I make it required field? not very good with java script here, any assistance is greatly appreciated
also if an error message would pop up so that asking people to complete recaptcha that would be great, thanks a lot
CSS
<script src='https://www.google.com/recaptcha/api.js'></script>
Html
<div class="form">
%form_errors%
<div align="right"><p><strong>* Denotes mandatory field</strong></p></div>
<fieldset>
<legend>Your enquiry details</legend>
<div class="form-row">
%question_label_746942_q7%
%question_field_746942_q7%
</div>
</fieldset>
<div class="g-recaptcha" data-sitekey="google site key"></div>
<div class="form-row-submit" align="right">
%submit_button%
</div>
</div>
You can by default set the submit button to disabled and only enable it on the callback function from reCAPTCHA.
Check this: https://developers.google.com/recaptcha/docs/display
Make sure to validate the form on the server side too.
UPDATE
Add this in your :
<script>
function enableBtn(){
document.getElementById("submit_details").disabled = false;
}
</script>
And then call the above function in the reCAPTCHA div in your form as follows:
<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="enableBtn"></div>
<button type="submit" id="submit_details" disabled>Send</button>
This will have the submit button disabled when the page loads so the user won't be able to submit the form. The button is enabled only after the user passes the "I'm not a robot" test.
Again, remember to validate the form data on the server side.
<form action="" method="post" onsubmit="return validateRecaptcha();">
</form>
<script>
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("You need to fill the captcha");
return false;
} else {
alert("validated");
return true;
}
}
It should be <button type="submit" id="submit_details" disabled>Send</button>
Not if="submit_details"
The function is using getElementById("submit_details"), so it is looking for an ID of "submit_details" in order to remove the disabled condition of the button by setting disabled = false instead of disabled = true which is the default condition that is set inline in the <button> tag.
I have different forms on single template and when user clicks on a button of 1st form(for eg. Continue button) it has to go to the next form and so on. Can we store all this different forms data in to a single collection?
If yes how can we achieve that? can anyone help me .Thanks in advance.
Sample code.
<template name="forms">
<div class="step1">
<form class="form1">
----//Code goes here//
</form>
</div>
<div class="step2">
<form class="form2">
-----//code goes here//
</form>
</div>
</template>
Try setting an id to your form and handling it in events:
<form id="form1" class="form1">
// Form1 code
</form>
<form id="form2" class="form2">
// Form2 code
</form>
and then
Template.foo.events({
'submit #form1': function(event, template){
//Handle submit
},
'submit #form2': function(event, template){
//Handle submit
}
});
It could technically work with the class by calling submit .form1 and submit .form2.
Also, as mentioned in the comments, aldeed:autoform is a very good package for that.
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.
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/
I'm very new to JS/jquery (I'm a backend developer) and am having trouble implementing something. I am working with Django and have a template that has a text area that needs to have a submit event when the enter button is pushed. Here is how I've implemented that.
<div class="search multi-search">
{% if search_str %}
<textarea name="search_str" id="search_str">{{ search_str }}</textarea>
{% else %}
<textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
{% endif %}
<button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>
<script>
// overriding the default enter action to submit the
// search string on enter instead
$('#search_str').keydown(function(e){
// checks to see if the key pressed is the enter key and submit.
// (13 is the code for the enter key)
if (e.which == 13) {
e.preventDefault();
$('#leads_form').submit();
}
})
</script>
This submit populates a list where the user can select (via checkbox) a series of items. There is an action button for them to modify details of the selected items. When they press the action button a modal window pops up asking them to provide details regarding the changes requested. Here is my code for that piece.
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form>
<input type="text" id="reason">
<button type='button' id='reason-submit'>Submit your reason</button>
</form>
</div>
$('#reason-submit').submit(function(){
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
e.preventDefault();
});
This works wonderfully if I use .click() for the '#reason-submit' and the user clicks the submit button. If I use .submit() it does not work at all. First, if they click the submit button no action occurs (not surprising). Second, if they push enter the page refreshes - and all the data being displayed disappears.
Any suggestions on how I can solve this problem?
EDIT 1:
I should mention that I've tried to use $(':focus') and can't seem to get that to work. I could be using it incorrectly (wouldn't be surprising).
EDIT 2:
Thanks to asifrc and niiru I was able to get this working correctly with the following.
<div class="search multi-search">
{% if search_str %}
<textarea name="search_str" id="search_str">{{ search_str }}</textarea>
{% else %}
<textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
{% endif %}
<button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form id='reason-submit'>
<input type="text" id="reason">
<button type='submit'>Submit your reason</button>
</form>
</div>
<script>
// overriding the default enter action to submit the
// search string on enter instead
$('#search_str').keydown(function(e){
// checks to see if the key pressed is the enter key and submit.
// (13 is the code for the enter key)
if (e.which == 13) {
e.preventDefault();
$('#leads_form').submit();
}
})
$('#reason-submit').submit(function(e){
e.preventDefault();
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
});
</script>
The submit event can be binded to only certain type of elements.
From the jQuery api docs http://api.jquery.com/submit/ :
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to <form> elements. Forms can
be submitted either by clicking an explicit ,
<input type="image">, or <button type="submit">, or by pressing Enter
when certain form elements have focus.
So try changing the type attribute of your button to "submit" and see if that works.
Better yet, just give your form tag an id and try attaching to the submit event for that..
Let me know if that helps :)
.click() works for obvious reasons. But, pressing enter will trigger the submit action, which will post the form. Instead, change your button type to submit, and prevent the default action of the submit event. This will handle you for any action that could trigger submitting the form.
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form>
<input type="text" id="reason">
<button type='submit' id='reason-submit'>Submit your reason</button>
</form>
</div>
$('#reason-submit').submit(function(event){
event.preventDefault();
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
e.preventDefault();
});