I am trying to have 3 boxes to use the javascript of google API to provide suggestion when filling addresses.But unfortunately it works for only 1 text box Base city.Other two dont respond to javascript
Javascript
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</script>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc" name="City" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Location" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location" class="form-control" >
</div>
</div>
The problem is that you have three div's with the same id="loc"; however, the id should be unique. So when you run your code, once compiler sees the first id it uses it and it doesn't go further to search for the next one.
To fix that you need to give different id to each div, and create autocomplete variable for each div. You might as well create separate listeners, but I leave it up to you.
var autocomplete1 = new google.maps.places.Autocomplete($("#loc1")[0], {});
var autocomplete2 = new google.maps.places.Autocomplete($("#loc2")[0], {});
var autocomplete3 = new google.maps.places.Autocomplete($("#loc3")[0], {});
google.maps.event.addListener(autocomplete1, 'place_changed', function () {
var place = autocomplete1.getPlace();
console.log(place.address_components);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<body>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc1" name="City" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc2" name="Location" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc3" name="Work_Location" class="form-control">
</div>
</div>
</body>
function initialize() {
//debugger;
// Create the autocomplete object, restricting the search
// to geographical location types.
var clsname = document.getElementsByClassName('autocomplet');
for (var i = 0; i < clsname.length; i++) {
var id = clsname[i].id;
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(id)), {
types: ['geocode']
});
}
}
Related
I am new to javascript, I want to get two fees in text boxes and show sum of those two fees in another text box (which is disabled, so can't edit it, just for showing purpose) below is my html form.. result should show when entering in fee1 or fee2 not in submit button. How to do it?
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>
use input event on fee1 and fee2 and then sum their values and put as value of total_fee.
e.g.
const fee1 = document.getElementById("fee1");
const fee2 = document.getElementById("fee2");
const total_fee = document.getElementById("total_fee");
fee1.addEventListener("input", sum);
fee2.addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value)+Number(fee2.value);
}
see in action
https://jsbin.com/lizunojadi/edit?html,js,output
Basically you listen to input event on both of the controls, summing the values into the other input.
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
elem.addEventListener("input", do_sum)
})
function do_sum() {
var total = 0
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
total += +elem.value;
})
document.querySelector("#total_fee").value = total
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id="total_fee" name="total_fee">
</div>
</div>
</div>
</div>
Here is the simple solution for your code,
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>
Here in the HTML code default value="0",
Now in Javascript,
const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');
function doSum() {
const fee1Value = parseInt(fee1.value);
const fee2Value = parseInt(fee2.value);
const totalFeeValue = fee1Value + fee2Value;
totalFee.value = totalFeeValue;
}
fee1.addEventListener('input', doSum);
fee2.addEventListener('input', doSum);
doSum() function is executing oninput
hi every one I am working on angular js project. But here is a little problem i am using dynamic form for multiple fields and using select2 function for search but first time it is working then after making new field it is not working for search can you please help me??
here is my controller code for making dynamic field
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
};
here is code of view
<div data-ng-repeat="choice in choices">
<div class="row">
<div class="col-md-3">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> خریدار کھاتہ</label>
<select ng-model="choice.purchaser_account" name="account{{choice.id}}" class="form-control select2" required>
<option ng-repeat="x in purchaserAccount" value="{{x.id}}">{{x.name}}</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable" > وزن</label>
<input type="text" id="weight" ng-model="choice.weight" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ریٹ</label>
<input type="text" id="price" ng-model="choice.price" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ٹوٹل</label>
<div>{{((choice.price*(choice.weight/40))+((choice.price*(choice.weight/40))*.016)).toFixed(2)}}
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group label-floating">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>
</div>
</div>
</div>
<button class="btn btn-info" ng-click="addNewChoice()">Add fields</button>
can you please help me to solve out this problem
Initialize select on your angular add function.
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
$(".select2").select2();
};
same initialize it where your are add first option in choice array.
I am creating input on the click of button and I want to add autocomplete functionality to it
Please note that it is working for a static element
my html code
<div class="pharmaSec">
<div class="form-group" id="medicineTable">
<div class="col-sm-8 selectContainer">
<input name="OTCtext[]" id="OTCtexts" class="form-control medicinefind"/>
</div>
<div class="col-sm-4 selectContainer">
<input type="text" class="form-control" placeholder="Qts" value="1"/>
</div>
</div>
<div class="form-group" id="medicineTableTemp">
<div class="col-sm-8 selectContainer">
<input name="OTCtext[]" id="OTCtext" class="form-control medicinefind">
<input type="hidden" id="hiddenValue" value="0">
</div>
<div class="col-sm-4 selectContainer">
<input type="text" class="form-control" placeholder="Qts" value="1"/>
</div>
</div>
my js code
$(document).ready(function () {
$('#btn_add_new').click(function () {
$('#medicineTable').append($('#medicineTableTemp').html());
$("input.medicinefind:last").focus();
});
});
$("input.medicinefind").live("keydown.autocomplete", function() {
$(this).autocomplete({source: '/medicineSearch', minLength: 1});
});
appreciate all the assistance needed.
I found my answer just in case if anyboody is stuck with the same issue
var counter = 0;
$('#btn_add_new').click(function () {
counter = counter+1;
var id = "OTCtext"+counter;
var template = ' <div class="col-sm-8 selectContainer"><input name="OTCtext[]" id="'+id+'" class="form-control medicinefind"><input type="hidden" id="hiddenValue" value="0"></div><div class="col-sm-4 selectContainer"><input type="text" name="medicine_qts[]" class="form-control" placeholder="Qts" value="1"/></div>';
$('#medicineTable').append(template);
$('#OTCtext' + counter).autocomplete({source: '/medicineSearch', minLength: 1});
});
I currently have a dropdown field that onchange will input the value.
function CurrentStatusChanged() {
var currentS1 = document.getElementById("currentStatus1").value;
var currentS2 = document.getElementById("currentStatus2").value;
document.getElementById("currentStatusView1").innerHTML = "You selected: " + currentS1;
document.getElementById("currentStatusView2").innerHTML = "You selected: " + currentS2;
}
I have many fieldsets created and then correct fieldset needs to show dependent on the what selected in the dropdown box.
My question is:
What is the best approach? As I don't feel innerHTML then all of the code is good practise.
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
I am trying to add a field set like the one above to a container, however i have at least 12 that change dependent on the drop-down. kindisch answer doesn't allow mt use the complete field set but is on the right track i believe.
Use templates for that. For example:
var storage = [],
select = document.getElementById("selection"),
container = document.getElementById("container");
select.addEventListener("change", function() {
var _id = select.value,
_tpl = document.getElementById(_id);
save();
container.innerHTML = _tpl.innerHTML;
update();
}, false);
// Save current state
function save() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
storage[_fields[i].name] = _fields[i].value;
}
}
// Fill input fields of element
function update() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
if (_fields[i].name in storage) {
_fields[i].value = storage[_fields[i].name];
}
}
}
<select id="selection">
<option value="status-one">One</option>
<option value="status-two">Two</option>
<option value="status-three">Three</option>
</select>
<div id="container"></div>
<script type="text/html" id="status-one">
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
</script>
<script type="text/html" id="status-two">
<p>This is status two.</p>
</script>
<script type="text/html" id="status-three">
<p>This is status three.</p>
</script>
could you use html5 data attributes? https://jsfiddle.net/hj6bbgbd/
<select id="mySelect" onchange="myFunction()">
<option value="1" data-text = "text for choice one">One</option>
<option value="2" data-text = "text for choice two">Two</option>
<option value="3" data-text = "text for choice three">Three</option>
</select>
<fieldset>
<fieldset>
<legend>My Legend:</legend>
<p id="demo"> text for choice one </p>
</fieldset>
<script>
function myFunction() {
var sel = document.getElementById('mySelect');
var opt = sel.options[sel.selectedIndex];
document.getElementById("demo").innerHTML = opt.dataset.text;
}
</script>
This seems like a weird one to me. I have a form for adding vets to a dog walkers' database. I've used ng-model on each field in the form.
<div class="container-fluid" ng-show="nav.page == 'new'" ng-controller="dataController as data">
<div class="row" ng-show="nav.tab == 'vet'">
<div class="col-md-2">
</div>
<div class="col-md-8">
<h1>Add a Vet</h1>
<hr />
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name..." ng-model="data.creator.vet.Name"/>
</div>
<div class="form-group">
<input type="Text" class="form-control" placeholder="Address..." ng-model="data.creator.vet.Address"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone Number..." ng-model="data.creator.vet.Phone"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="data.newVet()">Submit</button>
</div>
</form>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Yesterday it was working fine, today it won't update data.creator.vet when I input data. For the life of me, I can't see any problems with it.
The js:
app.controller('dataController', function($http) {
dataCon = this;
this.creator = {};
this.creator.client = {};
this.creator.vet = {};
this.creator.client.Dogs = [];
this.allData = {};
this.newVet = function(){
console.log("New Vet Creating....")
console.log(dataCon.creator)
vet = JSON.stringify(dataCon.creator.vet);
console.log(vet);
$http.get(SERVICE_URL + "?fn=vetCreate&vet=" + vet).then(function(response) {
dataCon.init();
});
}
});