I am looking to use Django to create a form with a password field that can be toggled to be hidden or shown. This functionality can be seen on MailChimp at https://login.mailchimp.com/signup. Does anyone know how such a field could be created?
it's just purely javascript :
<script type="text/javascript">
function reveal()
{
if(document.getElementById('box').checked)
{document.getElementById("pw").type='text';}
else
document.getElementById("pw").type='password';
}
</script>
<input type="checkbox" id="box" onclick ="reveal()">
<input type="password" id="pw">
Related
Lets say I have a model with 2 fields. With one field being a choice field of radio button Choice1, Choice2 and Other, the next being Other which is a textfield I want the "other" textbox to appar / enabled only when "Other" is selected in the radio button.
This question is not from the django-forms category. This applies more to the front-end category. Everything that is sent from the django server is static. Sure, you can write a form class and override the template for it. Also, you can connect the js script directly to the form class. It is convenient, but not canonical. Just, write the JS script or using JQuery, which will activate the field when you select a particular option.
I wrote for you a small example of how this can be do it.
I hope this helps you.
$('input[type=radio][name=choices]').change(function() {
$('input[type=text][name=other]').prop(
'disabled',
function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input name="choices" type="radio" value="choice1">Choice 1</p>
<p><input name="choices" type="radio" value="choice2">Choice 2</p>
<p><input name="other" type="text" disabled></p>
</form>
I'm stuck using django-markdownx to automatically update page and to submit changes.
I followed this question and answer and managed to get django-markdownx working in admin, and within my view. However in my view editing the textarea does not automatically update the page.
The admin page with django-markdownx is exactly what I want, updating the textarea updates the page, but not the underlying database field until you hit save.
So I then tried to rip out the admin code into my own view.
In my view/template I have a form, textarea similar to admin one. I also included "/static/markdownx/js/markdownx.js" and set my form to mostly be similar to the admin page:
<form method="POST" action="">{% csrf_token %}
<div class="markdownx">
<textarea name="myfield" rows="10" cols="40" required="" data-markdownx-upload-urls-path="/markdownx/upload/" data-markdownx-editor-resizable="" class="markdownx-editor" id="id_myfield" data-markdownx-urls-path="/markdownx/markdownify/" data-markdownx-latency="500" data-markdownx-init="" style="transition: opacity 1s ease;">
{{ note.myfield }}
</textarea>
</div>
<div class="markdownx-preview">
{{ note.formatted_markdown|safe }}
</div>
</form>
This didn't work.
I see periodically there is requests to /markdownx/markdownify/ when you edit in admin, but not mine. I'm not sure if I should aim to do the same or just do some timed javascript page refresh and pass all the data from within my form back to my view to then re-render the page again.
I can't quite get my head around the django-markdownx documentation.
UPDATE:
The Documentation seems to suggest that a call to MarkdownX() should do the initialisation.
<script src="/static/markdownx/js/markdownx.js"></script>
...
<script type="text/javascript">
let parent = document.getElementsByClassName('markdownx');
let md = new MarkdownX( element, element.querySelector('.markdownx-editor'), element.querySelector('.markdownx-preview'));
</script>
But when I try this I get.
Uncaught ReferenceError: MarkdownX is not defined
Also I don't see any initialisation like this within the admin page.
Is there an example of using the django-markdownx in your own views similar to the usage within admin?
Thanks
LB
The following is a broken solution.
The correct method would be to use the MarkdownX's built-in Javascript, but I just can't get it to work, yet. So, I wrote my own. It may be of use to others.
In template html, include js.cookie.min.js in order to get the django csrftoken. Then a callback function which will be called when a change is made to the textarea. We then update the preview div with HTML code we received back from MarkdownX's markdownify call.
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
...
<script type="text/javascript">
function myMDFunc( elem ) {
input = elem.value;
var csrftoken = Cookies.get('csrftoken');
$.ajax(
{
type: "POST",
url: "/markdownx/markdownify/",
data: { CSRF: csrftoken, csrfmiddlewaretoken: csrftoken, content: input}
})
.done(function(data, status){
document.getElementById("markdownx-preview").innerHTML = data;
});
}
</script>
Still in the template html, in the form, call this function both for onchange and onkeyup.
<form method="POST" action=""> {% csrf_token %}
{{ note.title }}
<div class="markdownx">
<textarea onchange="myMDFunc(this)" onkeyup="myMDFunc(this)" cols="60" rows="5" name="text" >
{{ note.myfield }}
</textarea>
</div>
<div class="markdownx-preview" id="markdownx-preview">
{{ note.formatted_markdown|safe }}
</div>
<input type="submit" id="submit" name="submit">
</form>
In summary, a change to the textarea means we invoke the 'onchange' or 'onkeyup', which calls myMDFunc. Then myMDFunc does an ajax call with data which is the raw MarkDown code, the response to this call is the pretty HTML data. The callback within myMDFunc updates the preview with that pretty HTML.
It kinda works. I'm sure the real MarkdownX code will handle drag'n'drop of images and pacing the ajax calls to be nice to the server.
I am using Zurb's Foundation data-abide in a form and would like to disable the submit button until the form is valid (e.g. valid email address).
What's the best way to do this?
Thanks,
John
You can use javascript on your submit button to prevent the default behavior. Then you can listen for 'formvalid.zf.abide' and 'forminvalid.zf.abide' to submit or add custom error handling
<form data-abide novalidate id="testform">
<label>
Amount
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" id="exampleNumberInput" type="number" required pattern="number"/>
<span class="form-error" data-form-error-for="exampleNumberInput">Amount is required.</span>
</div>
</label>
</form>
.
//add event handler to your submit button to prevent the form submit
//and call abide validation
$('#submit').on('click', function(e){
e.preventDefault()
console.log('submit clicked')
$('#testform').foundation('validateForm')
})
//listen for the abide validation event and submit form
$(document).on('formvalid.zf.abide', function(event, form){
console.log('form is valid')
form.submit()
})
I don't know anything about cookies or how to set them and I need some advice. I have two radio buttons. For example if an option is changed from one to another, that option will remain even if the page is refreshed or changed on other pages where this radio buttons exist, and I need to make the cookie setting for this code. Can someone can give me some advice regarding what code should I add to my php?
This is js code:
$(document).ready(function() {
$('radio[name=radio]').each(function() {
$(this).click(function() {
my_function();
});
});
});
my_function()
{
var value_checked = $("input[name='radio']:checked").val();
$.ajax({
type: 'POST',
url: 'page.php',
data: {'value_checked':value_checked},
});
}
html code
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" /><label for="radio2">Choice 2</label>
</div>
</form>
It is important to remember that cookies can only be set before any output is sent to the client on a webpage, because cookies are set as headers, and headers can only be sent prior to any part of the webpage output. Therefore, you need to refresh the page to set a cookie to the value of your radio button.
At the very top of the php, BEFORE the <!DOCTYPE> html or <html> tag, you need to add something like this:
<?php
if(isset($_POST['radio1'])) {
setcookie('radio1', true, 600, '/');
setcookie('radio2', false, 600, '/');
} else if(isset($_POST['radio2'])) {
setcookie('radio2', true, 600, '/');
setcookie('radio1', false, 600, '/');
}
?>
The above code will make sure that only one of the cookies is set to true and the other is set to false. The cookies will expire after ten minutes.
This is after you properly set up the html form so that you can detect that your user has selected a button:
<form method="POST" action="index.php">
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" />
<label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Choice 2</label>
</div>
</form>
The PHP Manual page has more information: http://php.net/manual/en/function.setcookie.php
EDIT: Semantic code changes and fixed the html tags described.
See setcookie examples how to set cookies in PHP. But you can do it also with javascript js_cookies.
Does anyone know how to integrate this wordcount plugin with the existing django-ckeditor apps? Either https://github.com/dwaiter/django-ckeditor or https://github.com/shaunsephton/django-ckeditor/.
Specifically, I'm stuck at Step 4
For your CKEditor instance, use the following HTML markup (content can be any element name you wish, so long as the hidden field has its element name in the format elementWordCount)
<label for="content">Content</label>
<textarea class="ckeditor" name="content"></textarea>
<input name="contentWordCount" type="hidden" value="250" />
Where do I insert that Input element?
I'm using the widget btw.
Alternative solutions to having a wordcount plugin are welcome.
I'm the author of https://github.com/shaunsephton/django-ckeditor/.
I've just updated the repo to support widget template customization.
You should now be able to integrate the wordcount plugin by specifying it as part of the CKEDITOR_CONFIGS setting:
CKEDITOR_CONFIGS = {
'default': {
'extraPlugins': 'wordcount',
}
}
and then overriding the ckeditor/widget.html template to look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<input name="contentWordCount" type="hidden" value="250" />
<textarea{{ final_attrs|safe }}>{{ value }}</textarea>
<script type="text/javascript">
CKEDITOR.replace("{{ id }}", {{ config|safe }});
</script>
I've loaded jQuery here through Google APIs just as an example.