Develop Reference

How to extend a Django forms ChoiceField to also accept text and search for close matches to avoid having to find something in a long list

I'd like to improve the usability of a form that I have that allows the user to select an area which can be highlighted on a map.
I want to retain the drop-down list for the user to browse but also for them to be able to type in the field as free-text and have a part-match on their input and filter the list to items that resemble their input.
Some of the entry's are quite long and a few words, eg. ideally "Middlesbrough South and East Cleveland" would appear in the list as the user inputs "Cleve" along with any other close matches.
The page looks like this at the moment
I have a simple Django form:-
class ConstituencyForm(forms.Form):
description = "Use the dropdown to select an area:-"
lstRandom = [(0, 'Random')]
lstChoices = lstRandom + list(constituency.objects.values_list('id', 'name'))
ConstituencySelection = forms.ChoiceField(choices=lstChoices, widget=forms.Select(),required=False, label="")
The form is instantiated and passed in this extract from the view:-
frmCons=ConstituencyForm()
if not request.GET.get("ConstituencySelection") or int(request.GET.get("ConstituencySelection"))==0:
intConsId = random_cons_view()
strConsType = "random"
else:
intConsId = int(request.GET.get("ConstituencySelection"))
strConsType = "selected"
objCons=get_constituency_view(intConsId)
context={
"consform" : frmCons,
"consgeom" : json.loads(objCons[1]),
It appears here in the template:-
<form method='get' action=''>
Select an area:-<br>
{{ context.consform }}<br><br>
Select a maptile:-<br>
{{ context.tileform }}<br><br>
<input type="submit" value="Update" >
</form>
I'm researching as best as I can, but struggling to piece together how to make this change.
Something like:-
-Change the Form field type to a type that accepts choices and free-text (like a combo field in MS
Access)
-Use a filter with "title__contains" in the view? Can I still keep all the choices in the form object?
-Use JavaScript to recognise a key-up event in the field and refresh the list? I'm not at all skilled in JS but would like to give it a go.
What are the steps I need to take and how would it be coded?
Please could you help me to achieve this? Many thanks to a great community,
Phil

I have managed to get something working in the end having taken a course in JS.
Ultimately, html alone won't get close to combining a select input with a text input in a single control.
A combination of a text input right above a select input with appropriate java script events to synchronise the select with what the user types in the text input is close enough in my opinion.
The event listener responds as follows:-
On text input keyup (the user is typing looking for a part match) - go through the select options array and set hidden to true or false as the input string develops to increasingly filter the list using a non case-sensitive includes method on each option label. The size property of the select input is also dynamic showing between 1 to a maximum of 5 options based on the options remaining.
On select input change or click (the user selects an option), a separate read-only text input is set with the value of the selected option and the user can click on a corresponding button to find the data for that option.
On clicking a clear button: the options in the array have their hidden property reset to false.
There are a few other bits I added to improve functionality - eg use a regular expression to break a input with punctuation into multiple part matches and look for both but this is contextual for the use-case.
The code is quite lengthy and bitty so I've attempted to explain this solution contextually assuming appropriate JS knowledge. I'd be happy to provide more detail if anyone has a specific use case they'd like support with.

checkbox value within submit button

So this is tough to describe but I cannot figure it out, I feel like i am close however!
Basically I have a list of things, that need to be organised.
lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.
I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.
Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???
so far I have gotten this close:
<div class="wells">
<input type="image" value="comedy" src="img/pieces/comedy.png"
alt="comedy" onclick="myFunction()" checked>
</div>
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
the long way is like this:
<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">
then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.

You can give image which behaves as checkbox, when you click on submit it gives values like true.or false for that check box.

One possible solution, depending on what your actual requirements are...
You can use a <button> instead of a checkbox; the contents of a button are fully customizable with essentially any HTML...
<button type="submit" class="roundedOne" name="comedy" value="comedy">
<img class="imgcomedy" src="img/pieces/comedy.png">
</button>
You may want this as a submit button, and/or attach a javascript click-handler.
If you need several categories chosen together, such as "list things in either category drama or comedy" which you can do with checkboxes, you have several options.
You could also include a checkbox but keep it hidden, and then check/uncheck it by using your click-handler attached to the button.
You could keep an <input type="hidden" value=""> field and set the value in your click-handler, adding and removing categories; for example
initial: value=""
after clicking the comedy button: value="comedy"
after clicking the dramay button: value="comedy,drama"
after clicking the comedy button again: value="drama"

Saving form values dependant upon onclick/onchange functions

I have a form that saves user entered values on submit with php.
Some of the fields are in div's that are display:hidden until an onclick or onchange function changes that div to show.
How can I show only the divs containing fields with saved values after the form has been submitted? I have saved the values in the always visible fields but cannot trigger their functions.
I am using very little jquery because I am new to the syntax and would prefer to implement solutions I can understand and adapt. Simple jquery is acceptable if it is a better/quicker/easier solution.
Thanks
Code Example:
<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
<select id="customer" name="customer" onchange="createJobsList(this.value)">
*various options*
</select>
<span id="jobslist"><br></span>
</span>
The first span (id=customerjobs) is initially hidden. Upon selection from the radio's, all but the corresponding span is set to display:none and the selected is set to display:block. On submit, the selected radio is saved, but the onclick isn't called to show the span.
The second span (id=jobslist) content is populated by innerHTML using the results of an ajax call to PHP when a selection is made. On submit, the selected option is saved, but the onchange isn't called to fill the span.
So I need to trigger the onclick of a saved radio value to show my content and trigger the onchange of a saved select to populate additional content.
Note: I used onblur with javascript to set the focus initially so any action would trigger the content but it caused an unnecessary pause in filling the form that I didn't want.
Page loads with only a radio selection.
User clicks radio button.
Onclick function changes style of span id=customerjobs to display:block.
The select input inside the span is now visible. The user selects an option.
Onchange function makes an ajax call to request information from the server which is placed in span id=jobslist.
User submits form to same page.
Form saves entered values so they are still selected when page reloads.
Onclick and onchange functions are not triggered by PHP saved values so steps 3 and 5 never occur. Page is left with only the radio buttons unless it is clicked again.
Well, I have a jsfiddle to illustrate my problem using default selections because I cannot use PHP to save entered values.
Imagine the form has just been submitted and the values saved are the checked radio button(customer) and the selection from the drop down(1) which adds the word "customer".
Ideally, the entire form would still be visible (The selected radio, the selected option and the content added to the last span "customer").
Instead, only the selected radio is visible unless it is clicked again to unhide the select drop down. The drop down retains its' value as well, but the content in the last span will only appear onchange.
http://jsfiddle.net/L5H2u/31/
Try it out and advance thanks for any suggestions.

Can you hook a function to onload that checks the radio buttons and simulates the click by calling getJobtype()? That will get the initial case where the radio button is already the way the user wants it. Further clicks will work as you planned.
Edited to add: If I understand you right, all is well the first time the page is loaded because the user has to click something and that runs your getJobType() function. However, when the page is reloaded, the correct radio button is already checked, the user doesn't change anything, and your function doesn't run. If that's correct, running getJobType() from onload should fix it.
You may need something like <input type="hidden" id="firstrun" value="true"> The PHP would set that to false on subsequent loads of the page, and the onload function would only make things happen if "firstrun" was false. Edit: You don't need this because getJobType() has no default action; keep reading.
Edited still more: You have checked="checked' on the Customer radio button, so if the user is a customer, even the initial run doesn't reveal the hidden material.
Remove checked="checked" when the page is initially loaded so that on the initial presentation, neither button is checked.* Then add window.onload=getJobType; to the end of your JavaScript.
On the initial load, getJobType() will do nothing since it checks both buttons and has no default action. When a button is clicked, getJobType() will run and act based on the button that was clicked.
When the page is loaded a subsequent time, one of the buttons will be checked and when onload runs getJobType() it will perform the corresponding action.
The radio buttons, SELECT values, and any other form elements that are preserved and "reflected" by the server-side PHP will be correct when the form is loaded the second (and subsequent) times. Where you need an onload JavaScript function is when one of those values also changes something else, such as making a hidden DIV visible. If there are functions other than getJobType() that manipulate the DOM, it will likely be cleaner to write an init function that sets up the DOM based on the values of the form elements as preserved by the PHP process.
* I normally advocate having some button checked by default so that the user can always get back to the initial state. This case seems to be an exception.

How to create login field properties depending on which radio button is checked

I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.

I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
​​​​​​​​​​​​​​JS
// if someone clicks on one radio button
$('.formSwitcher')​​​​.change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
​// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();​

Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.

mvc 3 razor cannot clear form value with validation class

I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.

I was using an html input of type reset rather than the button type. The reset should not have been used in this case.