I am using the below code to get the city suggestion but it's giving me the city + state + country, but I need only city name
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: ['(cities)'], componentRestrictions : { country: 'in' }});
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
Any suggestion?
You can't remove these informations, however, you can mask them using CSS.
Please refer to this link.
To quote the official documentation, here are the classes used by the components of the Autocomplete.
So I suggest you to use CSS to hide the part(s) you don't want to display.
In your case, you can use :
.pac-item-query + span
{
display: none
}
This will hide the next adjacent <span> to the <span> whose class is pac-item-query (which contains the suggested name of the city only), and so, only let the city displayed.
Thus, the state / country is masked, as you required.
Be careful, the + pseudo-selector is not supported by all browsers, including IE6. Please check your browser requirements before using it.
Related
I got this weird problem:
I get content that is dynamically built. In this special case I also get the element "input" as content, which is then displayed directly by the browser as an element.
What I get:
<div class="search_result_content"> this is just text, but the code <input variable="" name=""> displays as an element
What i need:
You may want to add 'type="text"', so total would be like
<input type="text" name="" value=""/>
Else if the input needs to be added to a (like) 'span' or 'div', i would suggest JS or jQuery
$(document).ready(function() {
$(".search_result_content").append('<input variable="" name="">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_result_content"> this is just text, but the code </div>
u insert the input tag dynamically in this scenario, after inserting convert it into html format
I have a form which has an input field which is a mandatory field for mobile devices but not for desktop or tablets. If I add a required attribute and hide it using CSS media queries in desktop still the form.$valid is false. Is there a way in angular to ensure the required attribute is checked only in mobile devices like putting a ng-required = "mobileOnly".
Thanks in Advance.
Try setting a variable in angular scope to check if it's mobile and then put it into ng-required:
angular.module('app', [])
.controller('Controller', function($scope) {
$scope.is_mobile = false;
if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$scope.is_mobile = true;
}
})
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<form name="myForm" id="myForm">
<label>Required Field</label>
<input type="text" ng-model="first" ng-required="true" /><br>
<label>Required Field for mobile only</label>
<input type="text" ng-model="second" ng-required="is_mobile" />
</form><br>
<b>Form Valid : </b> {{myForm.$valid}}
</div>
</body>
</html>
Using an ng-if statement on your input element will keep angular from checking for validity when it isn't displayed.
<input ng-if="!isMobile" type="text" ng-model="model" required />
Well, not directly, because media queries and CSS in general are not represented in any way in Model-ViewModel two way binding of Angular. You'd need to bridge your media queries to your ViewModel somehow.
Probably the easiest route is exactly what you've proposed. With ng-required="isMobile" you can have the field mandatory only when isMobile scope variable is true.
To actually fill $scope.isMobile you'd need to read the viewport dimensions, something like this:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
$scope.isMobile = width < 767;
// or whatever your mobile breakpoint value in px is
If you care, you should also listen to window.onresize event to handle resizes and update the $scope.isMobile variable accordingly.
I am building a user interface where visitors to a web site are asked questions and must choose answers. The answers are sometimes complex enough that we have decided to use sets of radio buttons, with nested check boxes: each set of check boxes controlled by its radio button. (Much effort has gone into reducing the complexity, etc. and we've also considered other options like drop-downs with long, wordy answers. That's not what this question is about.)
With some JavaScript, we can fairly easily ensure that the relationship between the controls is visually clear. (Note that the following screen captures are mock-ups, and the graphical design is yet to come. The question and answers are also fictional.)
We need to ensure that we also offer the correct experience to people who are using assistive technologies such as a screen reader. I have looked at the various WAI-ARIA attributes which can be used to enhance HTML to allow this. Below is the HTML I used to generate the screen captures.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
fieldset {width: 300px;}
.pseudoDisabled {
background-color: #f4f2f2;
}
</style>
<script>
$(function(){
$("fieldset.question").each(function(){
// if a radio is followed by a fieldset with the right owning-radio, the
// fieldset should join in with the radio-button logic
$(this).children("input").change(function(){
if (this.checked){
if($(this).nextAll("fieldset:first").attr("data-owning-radio") === this.id){
$(this).siblings("fieldset").prop("readonly", false).removeClass("pseudoDisabled");
} else {
$(this).siblings("fieldset").prop("readonly", true).addClass("pseudoDisabled");
}
}
});
});
// Ensure that clicking on a nested checkbox activates the matching radio
$("[data-owning-radio]").each(function(){
var jThis = $(this);
var owningRadio = jThis.attr("data-owning-radio");
jThis.children("input").change(function(){
$("#" + owningRadio).prop( "readonly", false ).removeClass("pseudoDisabled").prop("checked", true);
});
jThis.click(function(){
$(this).prop("readonly", false).removeClass("pseudoDisabled");
});
});
// We'd have liked to use 'disabled', but then you don't get click events, so
// instead we use readonly for the controls that we don't want to be successful
// and switch to disabled as we submit.
$("form").submit(function(e) {
$("fieldset", this).filter(function(){
return $(this).prop("readonly") == true
}).prop("disabled", true);
});
});
</script>
</head>
<body>
<form>
<div>
<fieldset name="question1" class="question">
<legend>Do you pay tax?</legend>
<input type="radio" name="oq1" id="oq1a1" value="no" />
<label for="oq1a1">No</label><br />
<input type="radio" name="oq1" id="oq1a2" value="yes" aria-controls="q1a2checkboxes"/>
<label for="oq1a2">Yes</label><br />
<fieldset id="q1a2checkboxes" name="q1a2checkboxes" data-owning-radio="oq1a2">
<input type="checkbox" name="questiona2" id="oq2a2a" value="incomeTax" />
<label for="oq2a2a">I pay income tax</label><Br />
<input type="checkbox" name="questiona2" id="oq2a2b" value="vat" />
<label for="oq2a2b">I pay Value Added tax</label><Br />
<input type="checkbox" name="questiona2" id="oq2a2c" value="local" />
<label for="oq2a2c">I pay local tax</label>
</fieldset>
</fieldset>
</div>
<input type=submit>
</form>
</body>
</html>
As you can see, I have used the aria-controls attribute to indicate the relationship between the radio and the fieldset it controls. Is this the correct approach? Is it sufficient, or do I need also to use various other attributes to describe more detailed relationships?
So far my web searches have yielded mostly very abstract standards documents, and not much in the way of clear advice, so any good references would also be very welcome.
Was a bit unsure how else to word this, JavaScript is the main thing I NEED to learn but after putting hours and hours in i still can't write javascript code off the top of my head. I understand the syntax of just about everything but when it comes to integrating it with css or html I am clueless!
Heres the code:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>
JavaScript:
document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";
bare in mind i've had little experience with forms and inputs in html too.
Any reply would be much appriciated! Thanks!
The value for style.backgroundColor should be a string representing a color value used in CSS, which can be one of:
Color name such as red, green, pink, ...
Color hex code such as #ff0000 (or #f00), #00ff00, #ff00ff ...
rgb() or rgba() function such as rgb(255,0,0), rgb(0,255,0), ...
You also have to set up the click event handler for the button submit. Here are details:
HTML:
<div id="mydiv">
<input type="text" name="colorpicker"/>
<input type="submit" value="Submit"/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
div.style.backgroundColor = div.children[0].value;
};
Note that you can assign an id for each input field to get access to it in JS code, in the above code I use the children collection to access to them instead. The first input field is the first child of div, the second input field is the second child of div.
Demo
Also note that, since HTML5 (which has been supported by all the major browsers) you can use the color input field which can popup a real color picker dialog for the user to select and then you just need to handle the event onchange to get the selected color (via the value property) like this:
HTML:
<div id="mydiv">
<input type="color" name='colorpicker'/>
</div>
JS:
var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
div.style.backgroundColor = div.children[0].value;
};
Updated Demo.
Use the form tag onsubmit method to call your JavaScript function.
I am currently using the validate plugin to validate a form (using ASP.Net controls). I have stripped out the rules from the standard setup within the form.validate method ie:
$("form").validate({
rules: {
ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required"
}
});
I now have these in various functions which add the ruless depending on what button is clicked. This works fine for text boxes, but for a RadiobuttonList when the plugin tries to add the rule there is an error saying the element is undefined.
function addRuleSet() {
$("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true });
}
I think the problem is that I am using the name attribute (asp puts $ in )to define the group that the radio buttons belong to rather than an id (, but in the static settings all the elements are definied using the name attribute. Anyway I am not sure how to get around adding a rule for a group of associated radio buttons, any advice would be appreciated.
PS I really need to call the RadioButtonList rather than the individual radio buttons.
You can also apply a rule by setting classes on the element. For example, if you give the class "required" to an input, then the required rule applies to that element. To do this, you'd use the CssClass property on the control. You may need to experiment with compound controls, like RadioButtonList, to make sure that the class is being applied to the input elements generated, not the container. If you have trouble with this, one way to do it would be to add the class using jQuery after the page loads based on a selector.
<asp:RadioButtonList id="RadList" runat="server" CssClass="required">
...
</asp:RadioButtonList>
or
<script type="text/javascript">
$(function() {
$(':radio').addClass('required');
$('form').validate();
});
</script>
For a complex, class-based rule you can add new rules using addClassRules.
<script type="text/javascript">
$(function() {
$.validator.addClassRules({
range0to10: {
range: [0, 10]
},
name: {
minlength: 2,
required: true
}
});
$('form').validate();
});
</script>
<form ... >
<input type="text" name="rating" id="rating" class="range0to10" />
<input type="text" name="firstName" id="firstName" class="name" />
<input type="text" name="lastName" id="lastName" class="name" />
</form>
After days of this driving me mad, asking the question got me thinking how to get the element returning properly, and I came across this method of referencing staright away which allows me to do it:
$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true });