i'm using Crispy-Form and Bootstrap within Django. It works very well.
Now, i would like to have a field showing only when another field has input.
Basically i've a multpile select list called A visible, and a text field, B, hidden.
once the the user focus/select one or more value in A, B should become visible. And if none are selected it should become invisible.
Does cripsy form have this feature or the possibility to write the JS?
Or do i've to write the JS in the html page where the form is rendered?
ciao
I've done something similar once. I assigned a class 'hidden' to the inputs that you want to be initially hidden. This can be done by nesting the fields in a Div, and assigning a css_class. See http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html#universal-layout-objects
Then use javascript to remove the 'hidden' class when a certain action occurs.
If you decide to use jQuery, you can use the following function:
$("input[name='a_hidden_field']").removeClass('hidden')
Related
Objective:
From a Django Form, modelchoice field i am making the widget display multiple checkboxes. But for each checkbox I would like to display exactly one textbox and then submit. I need to know if the checkbox is not selected, it's id still and the possible textbox value. How do I acheive this, if it is Ajax. please elaborate. as I am fairly new to django and haven't worked much with ajax.
So you have to possible approaches here,
Simpler(but a very tardy approach):
Submit the form after user's checkbox input, process the input in views.py and accordingly serve the other part of the form on a different template. This will lead you to reloading the page and changing URL's for the same form. This approach is fine if you are doing it only to learn Django at first.
The better approach. You can use on page JavaScript/JQuery to determine whether the checkbox is ticked or no and the accordingly show the checkbox. You can do something like
if(document.getElementById('yourCheckBoxID').checked)
{
$("#FormFieldID").show();
}
else
{
$("#FormFieldID").hide();
}
If you are doing the latter, do remember to NOT set the input field as "required", as it may throw up errors when not showing the text field. Use some sort of JS form validation if you have to.
Hope this helps!
Can anyone give me an idea about how to do this? My goal is to build a multi step claim submission form where user need to provide information for different sections. I am using VS2015 and Umbraco 7. Thanks.
In my opinion if you want to do it all from one template, it would be best to use a javascript/jquery solution that hides and shows different sections/divs as needed. These divs can be rendered from the partial views. I'm not sure if this works but maybe if you have one Form and all of these divs underneath it, you only need one form button and just submit at the end (I'm pretty positive this would work as the partial view elements would just be rendered as elements inside the form). But if not the values can be stored either in Jquery Data, or just using hidden variables, etc.
I've (very) recently dived into Angular, but I'm struggling a bit with how to design my layout.
For my site I've created a menu containing an input field and some buttons. The idea is that the input field combined with either of the buttons should service a function. So say for viewA, the input field should only act as a search bar. If the user however clicks one of the buttons the input field value should be used to as a basis to create a new item in another viewB.
The search function works great for viewA, but I'm unable to make the buttons switch views. I'm suspecting (or know, but don't know how to address it) this is because the mentioned buttons are outside the view (ng-view) and thus don't have a controller.
I've searched around for "multiple controllers / views", where suggestions vary from using the include function or create a service. Problem is I have no idea what would best practise or if it's even necessary for my case.
The menu + input field is another view. It should have its own controller. Based on the route – $on($routeChangeSuccess, ...) – you can use ng-switch to switch between the appropriate HTML/template in that view. If your templates are large, you can use ng-include inside the ng-switch directives. Otherwise don't bother, and just in-line the HTML inside each ng-switch-when.
For an example of how so use $routeChangeSuccess (but not ng-switch), see https://stackoverflow.com/a/11910904/215945
I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/
I have a few complex GUI elements (like a custom calendar with many days that can be highlighted) that appear along with standard django form input fields. I want to process the data I/O from these complex forms along with the Django forms.
Previously I would use AJAX requests to process these custom GUI elements on my HTML form after the Django form was saved or rendered, but this leads to a host of problem and customized AJAX coding. What is a good way to handle complex interactions widgets in a Django form?
Not sure if I understand completely, but you could have the value of your UI saved into a hidden element on the form via javascript. This can either be done as they select the values in the UI or when they submit the form. Pseudo-code assuming JQuery using submit() to save before the submit data is sent:
$('#myForm').submit(function(){
// get the value of your UI
var calendarValue = calendarWidget.getValue()
// #calendarData is the hidden field
$('#calendarData').val(calendarValue)
})
This obviously requires JS, but so does using your UI element.
Your question is very vague so I suggest you read the Django documentation on writing a custom field and hopefully that will help you get started. You might also want to investigate writing a custom widget. Unfortunately the documentation is bit lacking on that, but a Google search brings up several useful blog posts, including this one.
You have three options depending on how you output your Django Form subclass to the HTML page.
The first doesn't involve Form at all. Any html form inputs will end up in request.POST, so you can access them there. True, they won't be bound to your Form subclass, so you would have to manually inject the value either using a custom form constructor, or by setting some property on your Form object after instantiating it with request.POST. This is probably the least desirable option, but I mention it in case your use-case really doesn't support anything else.
The second is an option if you manually output the form fields in your HTML (ie: using {{ myform.field }} rather than just {{ myform }}. In this case, make a hidden variable to contain the value of your calendar GUI tool (chances are, your GUI tools already offer/require one). Add this hidden field, with the right name and ID, to the Form subclass itself, making sure it has a hidden django form widget. If necessary, use javascript as Rob suggests to populate the hidden field. When the form is posted, it will get bound to your form subclass as normal because, this time, you have a field on your Form subclass with that name. The machinery for clean() will work as normal.
The third, and best option, is to write a custom django field; Andrew's post has the link. Django fields have the ability to specify js and css requirements, so you can automatically encapsulate these dependencies for any page that uses your calendar widget.