I want to pull from the form the city name. and place it in the var at top where it say dallas so that when some one enters the city name it will auto update the var with right city name. I apologize for the early long winded remark. Stack overflow wanted more.
Turn HTML Form Input into JavaScript Variable
and
Obtain form input fields using jQuery?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"></style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// $("#submit").click(function(){
// alert("The paragraph was clicked.");
// }); // Submit button click
var city = "dallas" <==== code to pull from form
console.log(city);
$.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da" //api call with imperial units
,function(data){
console.log(data);
$("#weather").append(data.name); // City name
$("#temp").append(data.main.temp) //temp pull
});
});
</script>
</head>
<body>
<div id='wrapper'>
<div id = "formdiv">
<form id= "forminfo">
<input type="text" name="city" value="cityname" > <---this
<input id = "submit" type="submit" ></input>
</form>
</div>
<div id = 'weather'> </div>
<div id='temp'> <p></p> </div>
</body>
</html>
If you're talking about grabbing the value of this field form:
<input type="text" name="city" value="cityname" >
You can do it this way:
var city = $("input[name='city']").val();
Here's an example of the whole implementation:
$(document).ready(function() {
$("#forminfo").on("submit", function(e) {
e.preventDefault();
var city = $("input[name='city']").val();
console.log(city);
$.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da" //api call with imperial units
,function(data){
console.log(data);
$("#weather").append(data.name); // City name
$("#temp").append(data.main.temp) //temp pull
});
});
});
var city = "";
$("input[name='city']").blur( function() {
city = $("input[name='city']").val();
} )
Related
I am testing API calls from HTML textbox going to JS. How can you get input HTML going to JS and insert it to the URL?
(change var city to textbox from HTML) I need to add the textbox input to the JS query API URL + textbox.textbox1 + API URL
HTML code:
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
crossorigin="anonymous"></script>
<script src = "script.js">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="weather-container">
<img class ="icon">
<p class="weather"> </p>
<p class="temp"></p>
</div>
<form action="/url" method="GET">
<p>Insert City:</p>
<input type ="text" name="city" id="citytext" placeholder="City">
<button type = "submit" id="btn1" name = "submit">Submit</button>
</form>
</body>
Here is the JS
var city = "New York"
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
console.log(data)
var icon ="https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp);
var weather = data.weather[0].main;
$('.icon').attr('src', icon);
$('.weather').append(weather);
$('.temp').append(temp);
});
You need to add click event listener on the submit button, also you need to turn its type to button to not reload the page, and then instead of use hardcoded city name, you get it from the input value.
const cityInput = document.getElementById('citytext');
const submitButton = document.getElementById('btn1');
submitButton.addEventListener('click', () => {
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + cityInput.value + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
var icon ="https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp);
var weather = data.weather[0].main;
console.log(weather)
$('.icon').attr('src', icon);
$('.weather').append(weather);
$('.temp').append(temp);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="weather-container">
<img class ="icon">
<p class="weather"> </p>
<p class="temp"></p>
</div>
<form>
<p>Insert City:</p>
<input type ="text" name="city" id="citytext" placeholder="City">
<button type = "button" id="btn1" name = "submit">Submit</button>
</form>
</body>
Iam appending a form from desktop view and adding it to mobile view (including scripts) using append() . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using document.getElementsByClassName('txtbox').value.
As per my requirement., I need to give index to identify each form while appending. like document.getElementsByClassName('txtbox')[0].value. I have done an approach for same. But not getting how to increment index value on appneding. I have created plunker for same. Please let me know what I have missed.
Here is the sample code
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You may use $(this).find() to select .txtbox inside the form.
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
Also, please note that id should be unique in the documnt.
I have passed form object inside function call and used that param to identify current form.
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
});
function submitForm(form){
var txtValue = $(form).find('.txtbox').val();
console.log(txtValue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You can iterate through you class list like so:
var txtboxes = document.getElementsByClassName("txtbox");
for(var i = 0; i < txtboxes.length; i++){
// ... process each element here
$(txtboxes[i]).append(data);
}
I am using a $.getJSON method to retrieve weather data from open weather. When i use an explicit URL string for the document ready function, I am able to retrieve the values from the response JSON and write them to the page.
This works fine.
I am attempting to create a basic user input to query the data by zip code. I've created a nested function with the API URL as a concatenated string. I am unable to determine why the code in the nested function submitZip is not writing the response to the page in the same way that the document ready function did.
I have tried debugging and it appears that the string is concatenating correctly and making the API call successfully, but for some reason I am unable retrieve data from the response. Any ideas on I may have incorrect here?
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip() {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
Your page gets reloaded as soon as you press the submit button.
Change the type of the button to button or
prevent the default behaviour using event.prevenDefault()
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
e.preventDefault();
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
Two issues:
The form is submitted (and reloads) when you click the button. Avoid this by calling e.preventDefault() on the event object.
You have a spelling mistake in weather.innertText. Remove the extra t in the middle
Working code:
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innerText = data.main.temp;
});
e.preventDefault();
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>