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();
});
Related
I want to generate autocomplete suggestion list with html formatted text like we while typing in google maps
and when i select one of the items in list i want my JavaScript to run with the text value so far i am only able to create a suggestion list but i get an arrow
which i don't want and have no clue how to add onclick action on each of text field.
Here is the code snippet of my somewhat working code
javascript
var suggestlist = "datalist1";
var list = document.getElementById(suggestlist);
// As long as datalist has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
for(var i=0; i<n; i++) {
var node = document.createElement("option");
var textNode = document.createTextNode(response.results[i].title);
node.appendChild(textNode);
document.getElementById(suggestlist).appendChild(node);
}
html
<form>
<div class="input-field" style="width: 30%">
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<input id="getlocation_pickup" placeholder="pickup location" type="search" list="datalist1" required
onkeypress="placesSearch(platform, 'pickup')">
<datalist id="datalist1"></datalist>
</div>
Here is the link to jsfiiddle for the implemented code
if anyone can suggest me how to implement the google map like dynamic list, it will be really appreciated.
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 :-)
I am trying to store the inputs of the html form in a simple array.
I found some simple tutorials but my code is still not working, maybe I just can't see the fault.
This is how I made an array:
var person = [];
person[0] = $('#email').val();
person[1] = $('#password').val();
And this is my html, I have the span #demo, where I checked if there's a value in the array:
<input id="email" type="email" name="email" required="required"/><span id="errorfld"></span>
<input id="password" name="password1" type="password" required="required"/><span id="result"></span><span id="demo">text</span>
Then I have a function, which is called on focusout:
function demo(){
$('#demo').text(person[0]);
}
Do I have to search my fault somewhere else?
One way is to use $.serializeArray() to get all the values from the form.
Example
$('#form').on('submit', function(event) {
event.preventDefault();
var data = $(this).serializeArray();
$('#demo').text(data[0].value);
});
DEMO http://jsfiddle.net/7ysbd962/1/
If you just get the value when the page loads document.ready the input fields are still blank. You need to retrieve the values when you want to use them like this...
$(function(){
function updateDemo(){
var person = [];
person[0] = $('#email').val();
person[1] = $('#password').val();
$('#demo').text(JSON.stringify(person));
}
$('#email').on('blur',updateDemo);
$('#password').on('blur',updateDemo);
});
Here is an example
You could also use a different listener like keyup to update the value every time the key is pressed.
Another example
I need to create a drop down list combo box using dhtmlx and populate it from a database with information instead of adding it in the code itself.
I can get as far as creating the dhtmlXCombo but it does not show up any information even if I put dummy text in to see and if the it does it crashes the program the moment you click on it.
I have tried several different variations of creating the selection process and then tried to create a new combo section in the DHTMLx but still it shows nothing.
//tDetailsGrid.cellById(0, 2).setValue('<select onchange="tbAddTrRegion "><option value="selTr" selected="selected">Cape Town</option></select>')//(this.option[this.selectedIndex].value);
//tDetailsGrid.cellById(0, 2).setValue('<select id = "tbAddTrRegion" onfocus="return checkTrEntryEditing();" style="width:100%"/><option></option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
// tDetailsGrid.cellById(0, 2).setValue('<selection id = "tbAddTrRegion" type="Text" value="" onfocus="return checkTrEntryEditing();" style="width:100%"/><option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
// tDetailsGrid.cellById(0, 2).setValue('<select onchange= "tbAddTrRegion" onfocus="return checkTrEntryEditing();" style="width:100%"/><option></option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
I have currently commented them out at the moment but I only use one at time to find the suitable working one.
i then add:
TrRegion = new dhtmlXCombo('tbAddTrRegion', "Region", "100px");
TrRegion.attachEvent("onselect", function () { this.select(); });
$("#tbAddTrRegion").change(function () { region = $("#tbAddTrRegion option:selected").val(); });
I have created a somewhat a page method as I think that is the right way to go about doing it to get the info from the database per say but am not 100% sure.
PageMethods.GetTrRegionList(onGetTrRegionList);
this then goes to a function:
function onGetTrRegionList(result)
{
var $tbAddTrRegion = $("#tbAddTrRegion");
}
but at the moment the function is not connected to it at the moment because if the dummy values is not working then the function wont work either. The function would then send information to get the data back into the list so the user can select which ever one they would like.
pls use the below code to add options to the combo
var combo2=tDetailsGrid.getColumnCombo(2);
combo2.readonly(true,true);
combo2.addOption("selTr","Cape Town");
combo2.addOption("selTr1","Cape Town1");
combo2.setComboText("Cape Town");// for selected option
combo2.setComboValue("selTr");
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);
}