How to manipulate a API endpoint address based on user input - javascript

I am playing around with some HTML and JavaScript with the end goal of creating a simple website that displays the current weather. I haven't used API's before and I have limited knowledge of JavaScript so this might be a very bad question. Can I change the endpoint address based on a user input?
I have written some front-end which displays a simple form.
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
I was thinking that this could run a JavaScript file that gathers the input of the form HTML file and do something like this:
const location = document.getElementById(location)
http://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=API
I tried programming something to do this but as I have limited knowledge of both javascript and API's I keep failing. Before I was a lot of time on this can someone tell me if this is even possible?
By the way I have set-up an API key but I just haven't shown it.
Thanks,
mrt

So this is just a very lengthy way to do it so that you can understand each step
Step 1: First you want to get access to the input element:
const locationInput = document.getElementById("location");
Step 2: Then you want to grab the value of that input element
const locationValue = locationInput.value;
Step 3: Then you'd want to use that value in the URL
const url = http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API
function fetchAPIData() {
const locationInput = document.getElementById('location');
const locationValue = locationInput.value;
const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API`
// do the URL Request
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('input[type=submit]').addEventListener('click', fetchAPIData);
});
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
A much shorter way would be:
const url = `http://api.openweathermap.org/data/2.5/weather?q=${document.querySelector("#location").value}&APPID=API`;

Related

How do I use elements with sequential but different names into an array?

I'm not sure if the title is accurate. I am still getting familiar with jQuery/JavaScript so please feel free to correct my grammar/terms.
Problem: I have a form page that I need to read and validate the user supplied data when the user clicks send. The data I am having trouble with is contact data. The form by default lists two contacts. There is a button which allows the user to add one new contact at a time dynamically to the page. So, my code might need to validate tens or hundreds of contacts on this page. I cannot change the code/format of the form. I can only add Javascript/jQuery to validate the data.
Each contact is set up within a repeat wrapper like this:
<div class="ff-sec-repeat-wrapper">
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">LABELS&STUFF</div>
<div class="ff-col-2 ff-field-col">
<input type="textbox"
id="Membership_Application__c.Contact.A_1_.FirstName"
placeholder=""
name="Membership_Application__c.Contact.A_1_.FirstName"
vatt="STRING"
class="ff-input-type ff-type-text"
data-maxlengthmessage="Maximum 40 characters"
maxlength="40"
value=""
data-requiredmessage="required"
data-isupsert="false"
data-ishidden="false"
data-vatt="STRING">
</div>
</div>
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">LAST_NAME_STUFF_SAME_FORMAT_AS ABOVE</div>
<div class="ff-col-2 ff-label-col">...</div>
</div>
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">EMAIL_STUFF_SAME_FORMAT_AS_ABOVE</div>
<div class="ff-col-2 ff-field-col">
<input type="textbox"
id="Membership_Application__c.Contact.A_1_.Email"
placeholder=""
name="Membership_Application__c.Contact.A_1_.Email"
vatt="EMAIL"
class="ff-input-type ff-type-text"
data-maxlengthmessage="Maximum 80 characters"
maxlength="80"
value=""
data-requiredmessage="required"
data-isupsert="false"
data-ishidden="false"
data-vatt="EMAIL">
</div>
</div>
</div>
<div class="ff-sec-repeat-wrapper">
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">LABELS&STUFF</div>
<div class="ff-col-2 ff-field-col">
<input type="textbox"
id="Membership_Application__c.Contact.A_2_.FirstName"
placeholder=""
name="Membership_Application__c.Contact.A_2_.FirstName"
vatt="STRING"
class="ff-input-type ff-type-text"
data-maxlengthmessage="Maximum 40 characters"
maxlength="40"
value=""
data-requiredmessage="required"
data-isupsert="false"
data-ishidden="false"
data-vatt="STRING">
</div>
</div>
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">LAST_NAME_STUFF_SAME_FORMAT_AS ABOVE</div>
<div class="ff-col-2 ff-label-col">...</div>
</div>
<div class="ff-item-row">
<div class="ff-col-1 ff-label-col">EMAIL_STUFF_SAME_FORMAT_AS_ABOVE</div>
<div class="ff-col-2 ff-field-col">
<input type="textbox"
id="Membership_Application__c.Contact.A_2_.Email"
placeholder=""
name="Membership_Application__c.Contact.A_2_.Email"
vatt="EMAIL"
class="ff-input-type ff-type-text"
data-maxlengthmessage="Maximum 80 characters"
maxlength="80"
value=""
data-requiredmessage="required"
data-isupsert="false"
data-ishidden="false"
data-vatt="EMAIL">
</div>
</div>
</div>
Above is the basic setup. Each repeat wrapper contains multiple rows with different contact's data. There are many fields for each contact, such as LastName, EmailAddress, ContactRole, etc. But I suspect that once I understand how to access one, the others will essentially be accessed the same way.
Importantly (I believe): Each new contact id is sequentially iterated with a Alpha_Number_ combination. So, above, the first contact's FirstName id is Application__c.Contact.A_1_.FirstName, while the eigth contact's would be Application__c.Contact.A_8_.FirstName. This number changes for all other contact fields like LastName and EmailAddress.
At a minimum, how can I retrieve all of the contacts' email addresses into an array? This will allow me to do things like check for duplicate email address and match the supplied email addresses to other data I can already retrieve.
So, you're trying to figure out how to validate something like the following, without manually writing validation for "contact 1, contact 2, ..., contact 8", etc?
Using querySelectorAll will be your friend here. We can use it to grab all of your repeat wrappers and add them to an array, and then you can loop through that array to validate.
Here's a simple example. For demonstration purposes, it will kick out the phony name and add the two valid names to an object. Of course, you'll replace this with your own validation and whatever you do from there. I think effectively what you're looking is a way to loop through an indeterminate amount of fields; which
querySelectorAll
and a simple loop:
for( i = START; i <= NUM_OF_ITEMS; i++ ){
Will make simple work of. Check out the following snippet:
// Run this code when #myform is submitted
document.querySelector('#myform').addEventListener("submit", function(e){
e.preventDefault(); // Prevent page load for demo purposes
var object = {},
valid = 0;
// Grab an array of all the repeat-wrapper fields
var fields = document.querySelectorAll('.ff-sec-repeat-wrapper');
// Loop through that array, it will stop when total # of `repeat-wrappers` has been reached
for( i = 1; i <= fields.length; i++ ){
// The "magic" here is the '+ i +', which is replaced with the current iteration number
// Since i will never be greater than fields.length, it will only run as much as long as needed
FirstName = document.getElementById('Membership_Application__c.Contact.A_'+ i +'_.FirstName').value;
LastName = document.getElementById('Membership_Application__c.Contact.A_'+ i +'_.LastName').value;
//Example Fields:
//Email = document.getElementById('Membership_Application__c.Contact.A_'+ i +'_.Email').value;
//SomeField = document.getElementById('Membership_Application__c.Contact.A_'+ i +'_.SomeField').value;
contact = []; // For demo purposes we're making an associative array of valid contacts
// Put your validation here
// Demo validation will only kick out the fake name "Foo Bar"
if( FirstName != 'Foo' ) contact.push( FirstName );
if( LastName != 'Bar' ) contact.push( LastName );
// If contact is valid, add it to our object
if( contact.length > 0 ) object[valid++] = contact;
}
console.log( object ); // Will contain 0:John, 1:Jane - having skipped `Foo` for not meeting out validation
});
<form id="myform">
<div class="ff-sec-repeat-wrapper">
<div class="ff-item-row">
<div class="ff-col-2 ff-field-col">First
<input type="text" id="Membership_Application__c.Contact.A_1_.FirstName" value="John"/>
</div>
<div class="ff-col-2 ff-field-col">Last
<input type="text" id="Membership_Application__c.Contact.A_1_.LastName" value="Doe" />
</div>
</div>
</div>
<div class="ff-sec-repeat-wrapper">
<div class="ff-item-row">
<div class="ff-col-2 ff-field-col">First
<input type="text" id="Membership_Application__c.Contact.A_2_.FirstName" value="Foo" />
</div>
<div class="ff-col-2 ff-field-col">Last
<input type="text" id="Membership_Application__c.Contact.A_2_.LastName" value="Bar" />
</div>
</div>
</div>
<div class="ff-sec-repeat-wrapper">
<div class="ff-item-row">
<div class="ff-col-2 ff-field-col">First
<input type="text" id="Membership_Application__c.Contact.A_3_.FirstName" value="Jane" />
</div>
<div class="ff-col-2 ff-field-col">Last
<input type="text" id="Membership_Application__c.Contact.A_3_.LastName" value="Smith" />
</div>
</div>
</div>
<input type="submit" />
</form>

How To use Query string in java script?

I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.

Using HTML file to Query a Google Spreadsheet using a Textbox for Query, using App Script

I have a spreadsheet which I have more than 1000 lines, each column is a field, one of the columns has the field called Domain, "which will be the value I need to query", my application using HTML will need to query using a Text box the HTML to a function, to search the Spreadsheet and return the values of the same line in the HTML.
Now here is the HTML Code:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<?!= include('WebPage.js'); ?>
<?!= include('Style'); ?>
</head>
<body ng-app="webApp">
<div ng-controller="webAppCtrl">
<div>
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>DeLight App</div>
</div>
</md-toolbar>
<div id="body">
<div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
<div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" />
<label class="mdl-textfield__label" for="sample3">Enter Domain</label>
</div>
</form>
</div>
</div>
<div layout="row" layout-align="center start" layout-margin layout-fill layout-padding>
<div id="leftContainer" class="md-whiteframe-z2" flex="50">
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>Customer Info</div>
</div>
</md-toolbar>
Pull Customer Info here from Sheet
</div>
<div id= "rightContainer" class="md-whiteframe-z2" flex="50">
<md-toolbar class="md-theme-light">
<div class="md-toolbar-tools">
<div>Task List</div>
</div>
</md-toolbar>
<md-list-item>
<p>Verified Domain Owner</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
<md-list-item>
<p>User Creation</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
<md-list-item>
<p>Dual Delivery</p>
<md-checkbox class="md-secondary"></md-checkbox>
</md-list-item>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the Web App Function Scripts page:
function doGet(e) {
return HtmlService.createTemplateFromFile('Index').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Test')
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
function testSheet(){
var ss = SpreadsheetApp.openById("abc123456");
Logger.log(ss.getName());
}
The problem that I have is that I don't know how I can store the information that the user submits to the Textbox so I can later search my spreadsheet using a snippet I found here which is:
function test(){
var sh = SpreadsheetApp.openById("abc123456");
var data = sh.getDataRange().getValues(); // read all data in the sheet
for(n=0;n<data.length;++n){ // iterate row by row and examine data in column A
if(data[n][0].toString().match('searchvariable')=='searchvariable'){ data[n][5] = 'YES'};// if column A contains 'xyz' then set value in index [5] (is column F)
}
Logger.log(data)
sh.getRange(1,1,data.length,data[0].length).setValues(data); // write back to the sheet
}
Any Ideas how can I achieve this?
Thank you
You need to get the data out of the form, then send the form values to a server side .gs script function using google.script.run.myFunctionName().
google.script.run - Client Side API
There are various ways that you can get the values out of the input fields. You can get the form as a whole, and send a modified form object to the server, or you can get the values individually.
If you get the form object, google changes the form object. The only way that a .gs function can get values out of the form object is by using the HTML name attribute. In other words, the only way you can get the form object strategy to work, is by giving every input field a name attribute with a name.
<input name='myNameGoesHere' class="mdl-textfield__input" type="text" id="sample3" />
The Google documentation shows putting the google.script.run code directly into the click attribute of the input button. You can try it that way, or put the code into a separate script tag.
<input type="button" value="Not Clicked"
onclick="google.script.run
.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
HTML code:
<script>
//Put an anonymous function into the browsers window object
window.callServer = function(theFormObject) {
google.script.run
.search(theFormObject);
</script>
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input name='domain' class="mdl-textfield__input" type="text" id="sample3" />
<label class="mdl-textfield__label" for="sample3">Enter Domain</label>
<input type="button" value="Not Clicked" onclick="callServer(this.parent.parent)"/>
</div>
</form>
Code.gs
function search(myForm) {
//Look in VIEW menu, and LOGS menu Item to see if the form was passed in
Logger.log('myForm: ' + myForm);
var domain = myForm.domain;
Logger.log('domain: ' + domain);
}

Troubles transferring data from text box to Firebase and displaying that data

I have created two pages, one with a text box to input data that should be stored in Firebase and another that should display that stored data, but i am having issues with some of the data not being stored, and none of the data being displayed on the second page. The HTML for the text box is as follows:
<form>
<div class="post-title">
<input type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
The HTML for the page that should display the data is:
<div class="result">
<h4 class="postTitle">Paragraph 1</h4>
<p class="postContent">Welcome to my test blog. This is a paragraph.</p>
<div class="postDate">
<p>Date of post: </p>
<p class="postDate2">date</p>
</div>
</div>
The javascript that should transfer data from the text box to my Firebase :
var url = "https://blog-posts.firebaseio.com/";
var firebaseRef = new Firebase(url);
function funct1(event)
{
var title = $("#post-title").text();
var post = $("#post-content").text();
var date = Date();
firebaseRef.push({Title: title, Content: post, Date: date});
event.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
And the javascript that should retrieve data from my Firebase and display it (Note, both javascript extracts are from the same .js file, i seperated them for readability):
firebaseRef.on('child_added', function(snapshot) {
var message = snapshot.val();
});
$("postTitle").replaceWith(title);
$("postContent").replaceWith(post);
$("postDate2").replaceWith(date);
The Date/Time seems to copy to my Firebase, but if i enter something in either text box and click submit, the data is not stored in my Firebase. Also nothing including the Date/Time is being changed on the page that should display the data.
I think your issue may be fairly straight forward here.
Update your form HTML to this -
<form>
<div class="post-title">
<input id="post-title" type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea id="post-content" type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
Where you have the following -
var title = $("#post-title").text();
var post = $("#post-content").text();
change to
var title = $("#post-title").val();
var post = $("#post-content").val();
It looks as though you are new to jquery as well, so you may want to also read this to help you understand how to get values, and work with selectors, etc.
Hope this helps!

How to get the index of an element without 'this'?

I have a form that looks kind of like this:
<div>
<div class="contact">
<h1>Person's name</h1>
<!-- more stuff goes here -->
<form method="post" action="myurl">
<input type="submit" value="go" />
</form>
</div>
<div class="contact">
<h1>Another name</h1>
<!-- more stuff goes here -->
<form method="post" action="myOtherUrl">
<input type="submit" value="go" />
</form>
</div>
</div>
I'm using jQuery to capture the form's submit event and need to get the index of the div containing the button that submitted it. Normally I'd use jQuery's index() function like so:
var i = $(this).parents('.contact').index(this);
Unfortunately, the this operator in this case refers to the form that is being submitted. I think there's probably something simple I'm missing, but my mind's drawing a blank on this one.
Keep it simple:
var parent = $(this).closest('div.contact'); // get containing DIV
var i = $('div.contact').index(parent); // get index relative to the rest
var i = $(this).parents('.contact:first').prevAll('.contract').length

Categories