I've come across a little problem with autocomplete. I use a base.jsp page which has the following in a init function:
var input = document.getElementById('addressField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
I got two pages, one.jsp and two.jsp.
ons.jsp contains the following input type, which is tied to the autocomplete. This one works.
<input type="text" class="form-control" name="address" aria-label="..." id="addressField" value="">
two.jsp as the exacty same. But this one does not work?
<input type="text" class="form-control" name="address" aria-label="..." id="addressField" value="">
I do not understand how two identical input fields can have one working and one not. Both share the same base, and the autocomplete initialization.
What can possible cause this? I've got no idea where to look-
Here's where I'd start:
var input = document.getElementById('addressField');
console.log(input);
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
console.log(autocomplete);
console.log(map);
autocomplete.bindTo('bounds', map);
console.log('--------------- Done -----------');
console.log(input);
Then look at the output of the browser log and see what's different. Computers only do what we tell them :-)
Related
I am making an e-shop that has to be connected to an excel or CSV file.
More specifically I need to connect excel rows to input boxes (prices,bottles,etc). All those inputs will be connected to an input slider(type=range)just like the JS below.
I have researched this matter very much and someone told me I need to use XML. I can't use pure JS/Python because it needs to be updated constantly and I am completely clueless as to how I should proceed.
Let me know if anything is not clear.
Thanks in advance.
<script>
var city = document.getElementById('city')
var cityrepeat = document.getElementById('cityrepeat')
var state = document.getElementById('state')
var staterepeat = document.getElementById('staterepeat')
function setCity() {
cityrepeat.value = city.value
}
function setd() {
city.value = cityrepeat.value
}
function setState() {
staterepeat.value = state.value
}
</script>
City
<input id="city" type="text" onChange="setCity()" size=5/></br>
State
<input id="state" type="text" onChange="setState()" size=5/></br>
City repeat
<input id="cityrepeat" type="range" min="1" max="100" onChange="setd()"/>
<br>
State repeat
<input id="staterepeat" type="range"/>
You can send the form data to the backend and from there write it to an xls/csv file. Since you are using python, you can look for a package here
I am trying to load google autocomplete on two places in my page. One in the nav bar for searching the site and the second for the user to create an event by entering the address. I can get either one or the other working. And once I got both working but then it wouldn't fill in the info. I'd love to know what I am doing wrong, I have been banging my head against this for a hours now.
My inputs are
<input class="form-control" id="autocomplete" type="text" placeholder="Search..." name="term">
and
<input id="autocomplete2" placeholder="Enter address to store" type="text" autocomplete="off"></input>
and my js file
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
autocomplete.addListener('place_changed', addlatlong);
autocomplete2 = new google.maps.places.Autocomplete(
document.getElementById('autocomplete2'), {
types: [ 'geocode' ]
});
autocomplete.addListener('place_changed', fillInAddress);
}
function addlatlong() {
var place = autocomplete.getPlace();
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
document.getElementById("latbox").value = latitude;
document.getElementById("lngbox").value = longitude;
console.log(`${latitude}`)
console.log(`${longitude}`)
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
Well first off, let's make sure those inputs are identical other than their ID's.
Here's a .slim example from an old project of mine:
form style="width:300px;margin: 0 auto;" action="/instructions" method="POST"
strong
p.input-label I'm currently at...
input style="width:300px;" id="autocomplete" placeholder="Enter your current address" onFocus="geolocate()" type="text" name="current_address" required="required"
strong
p.input-label And I need to get to...
input style="width:300px;" id="autocomplete2" placeholder="Enter your destination address" onFocus="geolocate()" type="text" name="destination_address" required="required"
input.button style="width:300px;" type="submit" value="What's the plan?"
Your inputs that you shared have different fields, some missing from the other, etc. Your first step should be making them identical in every way possible, and then slowly shifting one of them to your desired state.
I see you're using an older version of javascript, too. If possible you may want to consider refactoring to es5+
At the top you declare placeSearch and autocomplete, but not autocomplete2. This is another example of what I was suggesting earlier, about stepping through your code and ensuring that both inputs are being treated/created the exact same.
I see initAutocomplete is declared but never run. Is this intentional? Does the google module automatically call that function?
It seems to me like addlatlong() and fillInAddress() are the two functions you intend to use, one for autocomplete and the other for autocomplete2, but you reference autocomplete in both of them.
All in all, I think you've been messing with the code so much to try and make it work that you've lost sight of how it should be written in the end.
Perhaps starting a new file, fresh, and taking it one small step at a time might be the best way to figure out how to solve this.
Get one input working fully, as expected, and then add the next one in, step-by-step, the same way you implemented the first.
Good luck!
How to fill data automatically in a textfield using the info provided in the tab using javascript. And also the filled data cannot be edited.
The textfield may fill data based on calculation on the option selected in tab.
Please help.
I don't so much understand your question but try this:
HTML
<input type="text" id="t" disabled />
JS
var text = document.getElementById('t');
text.value = 658.57; // your calc result
If you use jQuery, you can do something like this:
$(document).ready(function() {
var VALUE_OF_SELECTED_TAB = this.value;
// HERE DO YOUR CALCULATIONS
$(YOUR_SELECT_ELEMENT).on('change', function() {
$(YOUR_TEXTFIELD_ELEMENT).html(
'<input type="text" value="'+ YOUR_CALCULATION_RESULT
+'" class="field left" readonly="readonly" >');
});
});
I'm following this tutorial to implement Google Places Autocomplete. However, this only works well with existing statically defined text field. In my test app, I have dynamically added text field whereby user clicks on a button to add more text field.
<input maxlength="40" name="Point[location][]" id="Point_location" type="text" placeholder="Enter a location" autocomplete="off">
<input maxlength="40" name="Point[location][]" id="Point_location2" type="text" placeholder="Enter a location" autocomplete="off">
Here is my javascript
<script>
var location = $("input[id^=Point_location]")[0];
var autocompleteLocation = new google.maps.places.Autocomplete(location, options);
google.maps.event.addListener(autocompleteLocation, 'place_changed', function () {
var placeLocation = autocompleteLocation.getPlace();
});
</script>
I can't seem to get the autocomplete to work any existing input with the id Point_location or input that has just been added.
Appreciate any help on this.
Would be easier to answer when you had posted the code that creates the clone too.
I guess you are simply cloning the input, that will no work. You must create a new Autocomplete-instance for each input:
//create the clone
var clone=$(location).clone(false).val('').appendTo('body');
//apply Autocomplete
var ac = new google.maps.places.Autocomplete(clone[0]);
//apply listener
google.maps.event.addListener(ac, 'place_changed', function () {
var placeLocation = this.getPlace();
});
I have a form:
<form>
<input type="text" name="email" >
<input type="text" name="phone" >
<input type="button" value="ok" />
</form>
When clicking the button, I'd like to copy the form values to a corresponding model.
I've found Backbone.ModelBinder which will automatically copy values to model whenever the values are changed, but that's not what I want, I just want to copy the values when the button is clicked.
write a custom function into the view where the form is located and bind it to the ok click event:
events: {
...
'click input[name="ok"]': 'copyFormToModel'
...
},
...
copyFormToModel: function() {
var email = $('input[name="email"]').val();
var phone = $('input[name="phone"]').val();
// Perform some sort of validation
this.model.email = email;
this.model.phone = phone;
}
This isn't the prettiest answer, but if you have just one small form in your page, then using some library or plugin might be a bit overkill. If you want to use a plugin or library, then for your case I think backbone-forms could do the trick. It features updating the model bound to the form with a method call rather than every time fields are updated.
This code may be you need：
events: {
...
'click input[value="ok"]': 'collectData2Model'
...
},
...
//suppose employee is your model
collectData2Model: function(e) {
var employee = new Employee();
var attr = {};
$('input').each(function(){
var input = $(this);
attr[input.attr('name')] = input.val();
});
employee.bind('error',function(model,error){
alert(error);
});
// set method will automatically call the model's validate method
employee.set(attr);
}