I have a form with a dropdown showing 1 through 10.
If user chooses 1-9, then a specific secondary paragraph field should show.
And if the user chooses 10, then a different paragraph field should show.
I figured out some javascript for showing the second form fields (likely isn't the most elegant way to do it so suggestions welcome).
Then I used livevalidation code so that if the user doesn't make any selection (dropdown choice stays on Choose One instead of 1-10), then a error will appear under the dropdown field instead of the form submitting.
Now I'd like to take it a step further and require the secondary field that shows but make the field that gets hidden not be required.
So if 1 -9 is chosen, the second field shows AND will be the only field required.
But if 10 is chosen, then its specific second field will show and be the only required field.
I tried a couple of things, but couldn't get the form to submit b/c I think the hidden field was still being required.
Here's my JS for determining the dropdown and showing the second field:
<script type="text/javascript">
function selectionChanged()
{
if(document.getElementById("field0").value == "blank")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="none";
}
else if(document.getElementById("field0").value == "10")
{
document.getElementById("formElement1").style.display="none";
document.getElementById("formElement2").style.display="inline";
}
else
{
document.getElementById("formElement1").style.display="inline";
document.getElementById("formElement2").style.display="none";
}
return true;
}
</script>
And here's the code for the livevalidation to show error if dropdown choice is not made and is left on Choose One:
<script type="text/javascript" >var field0 = new LiveValidation('field0', {onlyOnSubmit: true });
field0.add( Validate.Exclusion, { within: [ 'blank' ], failureMessage: 'Please make a selection' } );</script>
Hope that makes sense and someone can help.
Thanks!
Related
In a .net MVC app, trying to learn semantic UI. (2.2.13) I've been beating my head against the wall on this one.
I have a remote populated dropdown, that I'm trying to create a default value for at initial page load.
The API is working, returning expected data.
My problem is that when a user 'tabs' into the element, the forceSelection default of the apiSettings forces the selection of the first item in the dropdown, which in this case is not what my default value is. (In this case, say that CAT is the first option in the list)
The desired behavior is keeping 'DOG' as the selected value when tabbed through, and i would like to keep the functionality of 'forceSelection' to prevent a user from leaving the dropdown with something typed that isn't included in the dropdown options.
I'm THINKING that i need a way of passing the current (default) value, and making that the selected value when the dropdown is initialized?
Here's the .js, in a doc ready.
$('.quom').dropdown({
apiSettings: {
url: 'ActualUrlRemoved',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function (val) {
///set active based on val here??
// $(this).val('DOG');
}
});
And the HTML setting the default 'DOG' (and using the "" value as the label) :
<select id="animalTest" name="ANIMAL" class="ui fluid search selection dropdown quom">
<option value="">Animal*</option>
<option value="DOG" selected>DOG</option>
</select>
Figured it out. This works for me.
$('.quom').dropdown({
apiSettings: {
url: 'URLHERE',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function () {
current = $(this).val();
$(this).dropdown('set selected', current);
}
});
I am giving the 3.5 -> 4.0 upgrade another go and 'almost' have this use case working like it was. What I am stuck on now is how to ALWAYS add a certain option to the ajax results list.
Here is what I have right now :
html:
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="default" selected="">default</option>
</select>
js:
$("#vedit-filter").select2({
placeholder: "Select or enter application...",
allowClear: true,
multiple: false,
tags: true,
ajax: {
dataType: 'json',
delay: 1000,
type: 'post',
url: '/process/get_application_list.php',
data: function (term, page) {
return {
term: term, // search term
page_limit: 25, // page size
page: page // page number
};
},
results: function (data, page) {
var more = (page * 25) < data.total; // whether or not there are more results available
return {
results: data.results,
more: more
};
}
}
});
That will load 'default' as the initial selected option. If the user changes this then it is gone. I want a way for them to revert back to that initial selection if need be. Is the only way to include it in my returned results from ajax as an option? Or is there a way to do this on the js side?
UPDATE:
The default selection will always be dynamic, but in this example we are using a value/name of 'default'.
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="default" selected="">default</option>
</select>
then in the js:
var default_filter = $("#vedit-filter").val(); //get the default loaded from the html
placeholder: {
id: default_filter, // or whatever the placeholder value is
text: default_filter // the text to display as the placeholder
},
I recently explained this on GitHub but didn't realize how much of a breaking change it was.
I want a way for them to revert back to that initial selection if need be.
Select2 provides the placeholder option, which can allow you to specify a placeholder like "Select an item" to the user if a selection is not already made. In order to support a <select>, which will select the first option by default (that's done by the browser), Select2 requires that a "placeholder" <option> exists. This also doubles as the option which Select2 uses to determine if the placeholder needs to be displayed.
In addition to the placeholder option, Select2 also allows the user to remove their selected option, which will revert the selection back to the placeholder option. This can be enabled through the allowClear option.
Is the only way to include it in my returned results from ajax as an option? Or is there a way to do this on the js side?
In your example, you are using a placeholder option with a value set on it. Because Select2 expects that the value is blank/empty by default, you need to tell Select2 what to look for when detecting the placeholder. This can be done by passing a data object into placeholder which Select2 will use when checking.
placeholder: {
id: 'default', // or whatever the placeholder value is
text: 'Select or enter application...' // the text to display as the placeholder
}
This will tell Select2 to display the placeholder when the value is set to default, which in your example appears to be the placeholder/default option.
What I am stuck on now is how to ALWAYS add a certain option to the ajax results list.
While I think we might have solved the XY problem here, I did want to note that adding a new option to the AJAX results list is as simple as overriding processResults. This is because processResults passes the list of data objects directly to Select2, which gives you a safe place to inject new options into the list.
You just need to .push the extra data object into the results and then pass them back to Select2.
I have a contact form with standard input fields, in which all fields working well but when i try to put something in message box (textarea input tag ) it is not taking space between two words..
In the file mb.bgndGallery.js, there is the following function:
keyboard:function(el){
$(document).on("keydown.bgndGallery",function(e){
switch(e.keyCode){
case 32:
if(el.opt.paused){
$.mbBgndGallery.play(el);
el.opt.paused=false;
}else{
el.opt.paused=true;
$.mbBgndGallery.pause(el);
}
e.preventDefault();
break;
}
});
}
Keystroke '32' is representing the 'spacebar' and this one is causing troubles. You either remove this case or disable the keyboard functionality of this plugin (at the top of the file).
$.mbBgndGallery ={
name:"mb.bgndGallery",
author:"Matteo Bicocchi",
version:"1.8.0",
defaults:{
activateKeyboard:false
}
I have 3 typeahead fields:
They are as follows:
Country: |___________|
State: |___________|
City: |___________|
Here is the code for the second typeahead field (the rest are similar):
<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead" data-items="4"
data-source="["Alabama","Alaska",
<many more US states>
,"Wyoming"]">
Now ... I need both typeahead fields to look like dropdowns which can be achieved by following instructions here.. no problem.
https://github.com/danielfarrell/bootstrap-combobox
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html
The question I'm asking pertains to the "Last Option" below:
Note: I am building this in Rails, so ruby code would be nice...
Placeholder Case:
I need each of the drop down lists to have a default placeholder text which is grayed out.
eg:
Country: |_USA_______|
State: |_IOWA______|
City: |_DES MOINES____|
Missing Value Case:
If the user types in a City value that does not exist in the autocomplete, I want to show them a dropdown with a link..
eg: User types in "yahoo" in City field. This should result in the output "That city does not exist, click here to search for it"
Clicking on the above text should redirect me to Google.com
Error Case:
If nothing is selected in the first field (country).. the second field should have a default value in the dropdown: "Please select a Country to begin"
Last Option:
upon successful selection of a City, eg: San Francisco ... I want to make a redirect to a new html file like "mysite.com/datastore/calsan.html" (first three letters from each selection in lowercase appended together)
this final html file will be pre-generated and will have relevant statistics and fun facts about the city "San Francisco"... I'll also have fun facts for other cities pregenerated in the datastore folder.
See my snippets below
Placeholder case
<script type="text/javascript">
$(document).ready(function(){
$('.combobox').combobox({placeholder: "Type Something.."});
});
</script>
Last Option
<script type="text/javascript">
$('.combobox').change(function(){
if($(this).val().length > 0){
var fileName = $(this).val().substr(0,3); // this is for getting the first 3 characters, apply the same logic wherever necessary
window.location("/datastrore/" + fileName + ".html");
}
})
</script>
Last Option
There seems to be a simple way to do this with inline javascript and option value. I think I will be using this simpler way..
http://webdesign.about.com/od/javascript/f/blfaqddredirect.htm
Placeholder Case and All other Cases
http://harvesthq.github.com/chosen/
The above library solves all my issues and is very powerful! Its not for bootstrap but I don't mind until bootstrap has a comparable option.
I have two g:textfields
in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.
The first one is named 'shipper' and the other 'shipperName'
Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.
Thanks in advance!
Examples:
If I write the number 12 it should return USPS
http://i53.tinypic.com/2i90mc.jpg
And every number should have a different 'shipperName'
Thanks again!
That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).
For example:
$("#shipper").blur(function() {
$("#shipperName").load(
"${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
$("#shipper").val()
);
});
The $(this).val() at the end is the value of the input field the user just left.
And the "ShipperController.resolveShipper" action would look something like this:
def resolveShipper = {
render text: Shipper.get(params.id).name, contentType: "text/plain"
}
There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)
To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;
$('#input1').bind('keyup',function() {
var map = {
"1":"One",
"2":"Fish",
"3":"Bar"
};
$('#input2').val(map[$(this).val()]);
});
You can see this in action here: http://www.jsfiddle.net/dCy6f/
If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".