I'm using Bootstrap 3 and HTML5 to create a web form. There's a section of the form where the user can select his "Method of delivery" via a drop-down box. The values are: Shop Pick-Up, FedEx, and Null. If the user selects FedEx, he shall then enter in his mailing address in the textarea titled "Shipping Address". However, since we do not need his mailing address if he selects "Shop Pick-Up" or "Null", is there a way to mute or grey-out the text box and only have it be writable if he selects "FedEx"?
Looking for ideas on how to approach this scenario.
My HTML:
<div class="col-xs-3">
<div class="form-group">
<label for="delivery">Method of delivery</label>
<select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
<option value="options" selected disabled>-Select-</option>
<option value="Shop Pick-Up">Shop Pick-Up</option>
<option value="FedEx">FedEx</option>
<option value="null">Null</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="shippingAddress">Shipping Address</label>
<textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>
You have a few options for dealing with non-required fields. The simplest option would be to add the attribute disabled to the textarea if they choose fedEx.
http://jsfiddle.net/dy4r3/
Your other option is to hide the non-required fields using $.fn.hide() and $.fn.show()
http://jsfiddle.net/ANKXA/
You can obviously expand on these solutions to make them a bit more elegant, but this should get you in the right direction.
You can use the change event and update the text box based on the selected value.
$('#delivery').on('change', function(e){
if($(this).val() == 'FedEx')
$('#shippingAddress').prop('disabled', false);
else
$('#shippingAddress').prop('disabled', true);
});
Give the shippingAddress element an id (it should have one for the label for)
Then you can set the disabled attribute when the select box changes
$('#delivery').change(function(){
$('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});
The disabled property of textarea can help you here.
Fiddle Demo
But showing and hiding would be better.
But there showing and hiding will make your form shake so apply some animation to avoid that or go with this approch but this approch also has some flaws as the user is nt directly clear when he will be allowed to enter the address.
I prefer going by show and hide as it is easy and informative.
Here is demo with show and hide
Related
I want to add a message, whenever the user does not select any value in the select tag.
Until now I have approached as below:
<form name="jdForm">
<div class="form-group col-sm-6 require">
<label class="form-control-label">Jd Name</label>
<select class="form-control" name="jdname" ng-model="oData.jdDetails.jdName" required>
<option>select</option>
<option ng-repeat="jd in jdNames">{{jd}}</option>
</select>
<span ng-show="jdForm.jdname.$untouched ">Please select jd name</span>
</div>
<button ng-click="fnSave()">Publish</button>
</form>
Here the message is shown what I have given in span but the thing is onload event. It is showing but I need to show it after clicking on publish button. The ng-click function call should not happen until the form is validated.
you need to kept submit button instead simple ng-click and on every error message tag apply condition of is form submitted or if you want to show error even on focus out add one more condition of is touched.
bellow is example i prefer for validating form
<span ng-messages="signupForm.password.$error" ng-if='signupForm.$submitted || signupForm.password.$touched'>
<span ng-message="required" class="help-block">Please Enter password</span>
</span>
I would use something like:
savePressed && (jdForm.jdname.$untouched ||jdForm.jdname.$invalid)
Where savePressed is just a variable which turns to true after pressing the publish button.
See the plunker for a working copy
I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq
I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});
I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>
I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/
I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">