We Keep Coding

how to add multiple search data

so I need help with my code. My boss wanted to search in my dropdown category multiple times for example in ID, more likely a range value, example i want to search SCP ID values: 123 and 169, all significant data will show that matches the record.i attach my UI sample belowsample UI my problem is that in my UI i can only search 1 value only for the same category. someone help me pls with the function and design. thanks alot.
This is my HTML:
<input type="text" id="txtsid" style="width: 70%; margin-left:2px;" value="" ng-model="sid" class="input-group inline form-control" placeholder="SCP ID" ng-required="true" required>
<button id="scpid1" class="btn btn-primary" onclick="addFields()">ADD</button>
This is my function:
$scope.sid=$scope.sidData;
$scope.filterSearch2nd = function(sid) {
if(sid ==""){
sid="scpid";
}
$rootScope.loader = true;
skinCareProdService.filter2ndSearch(sid)
.then(function(data){
$scope.rawSCP = data.data;
$rootScope.loader = false;
$scope.sidData=data.data[0].SCP_id;
}
);
}
i also use append

Google Maps API - transparent pass through address components

I have a web-form with a text area where a user can type in an address. I need the form not only to store the formatted address (which is currently working) but also transparently pass through the address components for storing in a backend database.
The current code below predicts the possible addresses as the user types:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=*******************"></script>
*** snip ***
<script>
function init() {
var options = {
componentRestrictions: {
country: 'NZ'
}
};
var input = document.getElementById('streetAddress');
var autocomplete = new google.maps.places.Autocomplete(input, options); <-- autocomplete is never used?
}
google.maps.event.addDomListener(window, 'load', init);
</script>
*** snip ***
<div class="form-group">
<label for="streetAddress" class="col-sm-2 control-label">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location"/>
</div>
</div>
I am assuming I need to call a second google function - geocoder which after onClick which returns a geocoded address array from the address string in the function above.
I could then store its components in hidden html form input elements unless there is a better way.
Thymeleaf and spring-boot are being used to get the data into the backend.

The way I would do this is to add some elements to your page that are hidden to store and pass through the address.
The example below passes through the street number - you can expand it from there. The HTML & Thymeleaf:
<div class="form-group">
<label for="streetAddress" class="col-sm-2 control-label">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location" th:field="*{formattedAddress}" />
<input type="text" class="form-control hidden" id="streetnumber" th:field="*{streetNumber}" /> <!--hidden-->
</div>
Now the javascript:
var options = { componentRestrictions: { country: 'NZ' } };
var input = document.getElementById('streetAddress');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
console.log(autocomplete.getPlace());
var place = autocomplete.getPlace();
console.log(place.address_components[0].short_name);
var streetNumber = document.getElementById("streetnumber");
streetNumber.value = place.address_components[0].short_name;
});
Error handling needed.

Information not pushing to FireBase Realtime Database correctly

I have a simple form requesting couple questions from the user. I am attempting to connect my FireBase account so the realtime database can get updated when the user presses the submit button. However, the database is not receiving any information. I have attached the code.
The problem is somewhere in the HTML or JavaScript. I have inserted random alerts to see if they would work, and I get them to come up. I removed some of the "dataLink.push" commands, due to my FireBase only containing 2 values (name, value). I am a beginner with FireBase.
var config = {
apiKey: "AIzaSyCdqgGdZH8bWSMiHEM7ZoeWSNfZ04uA3Y8",
authDomain: "errandboi-f1cf5.firebaseapp.com",
databaseURL: "https://errandboi-f1cf5.firebaseio.com",
storageBucket: "errandboi-f1cf5.appspot.com",
};
firebase.initializeApp(config);
// Creates a variable called databaseLink that links to our database.
var databaseLink = new Firebase('https://errandboi-f1cf5.firebaseio.com/');
// Create javascript variables that link our previous HTML IDs. Remember, we can't use regular HTML inside a script tag, so we need to use JQuery to reference any previous HTML. A $ means we are using JQuery
var messageField = $('#task');
var nameField = $('#name');
var contactField = $('#contact');
var locationField = $('#location');
var miscField = $('#misc');
var messageList = $('#example-messages'); // DELETE MAYBE?????
//alert(messageField);
// If the enter key is pressed, push the values in the text boxes to our database.
function push(){
alert("yo");
messageField.keypress(function (e) {
if (e.keyCode == 13) { //13 is the enter key's keycode
alert("yo");
if (messageField.val() == ""){ //Ensure that an activity was entered.
alert("Please let us know how we can help!");
}else{
//push data to firebase and then clear the text box
databaseLink.push({name:nameField.val(), value:messageField.val()});
messageField.val('');
}
}
}
});//end of keypress function
<DOCTYPE! html>
<html>
<head>
<meta charset="UTF-8">
<!--THIS IS NEEDED TO IMPORT FIREBASE LIBRARIES -->
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<!-- THIS IS JUST A NICE LOOKING FONT -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--THIS IS NEEDED TO IMPORT JQUERY LIBRARIES -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<!-- THIS IS TO IMPORT MY JS FILE -->
<script src="index.js"></script>
<link href="style.css" rel="stylesheet" />
<title>ErrandBoi!</title>
</head>
<body>
<div id="container">
<header>
<h1 class="title">ErrandBoi</h1>
</header>
<div id="banner">
<h2>Your Helping Hand in Every Situation</h2>
</div>
<div id="content">
<p class="content">Ever have an emergency while you are in class? Life has got you all tied up but your tasks won't do themselves? Well, you are at the right place for help. Let ErrandBoi take the stress off your shoulders while you can do what really matters. Simply, fill out the form below with any* task that you may need help with and one of our drivers will help you out as soon as possible!</p>
<br><br><br><br><br><br><br><br><br>
<div class="form-style-5">
<form method="POST">
<fieldset>
<legend><span class="number">1</span> Your Information</legend>
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input type="email" name="field2" id="contact"placeholder="Contact Information (Email, Phone Number, etc.) *">
<input type="location" name="field2" id="location" placeholder="Your Location (i.e. McNutt, Hodge Hall, exact address, etc.)*">
<input type="text" name="field3" id="misc" placeholder="Miscellaneous Information That May Be Important"></textarea>
<label for="job">Urgency:</label>
<select id="job" name="field4">
<optgroup label="Urgency level: just for us to prioritize properly">
<option value="Not Urgent">Low (ETA: Up to an hour)</option>
<option value="reading">Normal (ETA: Up to 45 mins)</option>
<option value="boxing">Critical (ETA: ASAP!)</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend><span class="number">2</span>Task that needs completion</legend>
<input type="text" name="field3" id="task" placeholder="Let Us Know How We Can Help!*"></input>
</fieldset>
<input type="submit" value="Apply" onClick = "push()"/>
</form>
</div>
</div>
</div>
</body>
</html>

You are trying to mix Firebase v2 and Firebase v3. In order to make it work you should:
1) Import the right Firebase sdk (and remove the old one from your code)
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
2) Get a reference to the firebase database
var databaseLink = firebase.database().ref();
NOTE: Firebase has been updated recently, the new documentation is at firebase.google.com (not firebase.com)
Hope it helps ;)

Javascript assign value to HTML field

I am trying to save an HTML field (for later use in a form) from a JS script.
This is the code:
Form
<form class="new_client" id="new_client" action="/clients" accept-charset="UTF-8" method="post">
<div class="form-group">
<input class="form-input" type="hidden" name="client[city]" id="client_city">
</div>
<div class="form-group">
<input class="form-input" type="hidden" name="client[address]" id="client_address">
</div>
<div id="locationField">
<input autocomplete="off" class="autocomplete" placeholder="Enter your address" type="text">
</div>
<div class="text-center">
<button class="btn button-general ">Save</button>
</div>
</form>
And the javascript:
function configureGeoAutocomplete(context) {
if( context === undefined ) {
context = $('body');
}
var element = context.find('.autocomplete')
//It doesn't really matter what this line does, it's from Google Places API
var autocomplete = new google.maps.places.Autocomplete(
element[0], {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress)
}
function fillInAddress() {
var client_address = autocomplete.getPlace().formatted_address;
document.getElementById("client_address").value = client_address;
}
The javascript is queried when loading the modal in which the form is
jQuery(function() {
$('div.modal').on('loaded.bs.modal', function(e) {
configureGeoAutocomplete(context);
}
}
I wanna save that client_address to the text field so when the form is submitted I can have that information.

Sounds like an excellent candidate for cookies if you are allowed to use them: http://www.w3schools.com/js/js_cookies.asp. Another idea is to pass it along in a Query String. It isn't PII or anything like that. Try an event code on that input. I do not like to hit "enter"!
onkeypress="if (event.keycode==13) { // do something }"

Handle the form submit event:
$(function() {
$("#new_client").submit(function(e) {
e.preventDefault();
// This is your value stored in the field.
$("#client_address").val();
});
})

Apparently, for some reason, if I searched the element by ID it was not saving the information on the field. If I istead search by class:
function fillInAddress() {
var place = autocomplete.getPlace();
$(".client-address").val(place.formatted_address);
}
It works as intended.

Meteor Google Maps Autocomplete only works once on multiple templates

I am using a Google Places autocomplete package with Meteor and if I have the user select a location in one template, the autocomplete won't work again in a different template.
For instance, if the user picks an autocomplete location for an event they are hosting, and then they try to set their profile location in the profile settings, no autocomplete locations pop up.
In fact, if they even activate the autocomplete dropdown on one page (without even selecting one of the options), it won't work on the other page.
Here's my HTML:
<template name="userUpdate">
<script>
window.onload = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
</script>
<form class="main form" autocomplete="off">
<label class="control-label" for="location">Location</label>
<div class="controls">
<div id="locationField">
<input id="autocomplete" name="userLocation" class="form-control" autocomplete="off" placeholder="Where you live." type="text">
</div>
</div>
<p>
<h4 id="setLocation">{{currentUser.profile.location}}</h4>
<input id="updateUser" type="submit" class="btn btn-primary" value="Update Profile" />
</p>
</form>
</template>
Here is the second template:
<template name="postSubmit">
<form class="main form" autocomplete="off">
<div class="form-group">
<label class="control-label" for="title">Event Name</label>
<div class="controls">
<input name="title" id="title" type="text" value="" placeholder="Event name" class="form-control"/>
</div>
</div>
<div class="form-group">
<!--begin google test-->
<script>
window.onload = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
</script>
<label class="control-label" for="location">Event Location</label>
<div class="controls">
<!--<input name="location" id="url" type="text" value="" placeholder="The location of the vent" class="form-control"/>-->
<div id="locationField">
<input id="autocompleteEventPost" name="location" autocomplete="off" placeholder="Event Location" type="text">
</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
</form>
</template>
I have the mrt:googlemaps package added, and I have set a googlePlaces.js like so:
GoogleMaps.init({
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en', //optional
'libraries': 'places'
});
It is notable to state that although the autocomplete does not function again after a file update (with server restart), it will work again after a page refresh from the client.
Basically, I would like to see a perfect example of how to get this working in multiple templates in meteor.js.

The thing is with Google Maps is once you initialize, it only attaches itself on that current DOM instance. When you switch to another page/template, Gmaps seems to lose touch of those bindings you just created and you will have to reinitialize properly.
And you're using window.onload.. that only runs once..
Take a look at moving the <script> code found inside your templates to the rendered template event(s):
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoComplete;
Make sure you get the timings right though.. GoogleMaps API is async after all and may even mess up with this kind of initialization. One thing you could do to avoid this is to wrap the above code in the GoogleMaps.init callback.

Electric Jesus' answer is the answer that worked, HOWEVER: A variable must be declared for each element that is going to use the Google Places Autocomplete API.
His solution:
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoComplete;
There are two separate input fields, one on each template. So, there must be a variable for each input field you want the Places Autocomplete API to work on. I changed the input element ID's back to "autocomplete". Here's my solution. Note the one-to-one ratio of variables to input fields.
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
var initAutoCompletePost = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoCompletePost;
For others who use this solution, in my working implementation, I have removed the <script> tags from my HTML (there is no more javascript in my templates).

My guess is you should probably change it to class="autocomplete", id shouldn't have duplicate, so document.getElementById('autocomplete') will always return first element it finds. Never worked with google-maps tho, but I think this can be the reason

None of the other answers worked consistently for me so I'm calling initAutoComplete() when the text input is clicked and it works better for me.
Template.myTemplate.events({
'click #autocomplete': function(e,template) {
initAutoComplete();
}
});
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
Edit: Not working so great it turns out though, getting this from time to time:
Uncaught TypeError: Cannot read property 'Autocomplete' of undefined