CODEWITHSUNDEEP
jqueryhtml
rstreet
rstreet

Reputation: 157

JQuery doesn't append

I am new to JQuery. I have the following form which takes an address from user and displays a greeting message; also appends a google api photo of location to the body. But nothing happens when I enter input. What am I doing wrong? Thanks for your help.

partial HTML:

<form id="form-container" class="form-container">
    <label for="street">Street: </label><input type="text" id="street" value="">
    <label for="city">City: </label><input type="text" id="city" value="">
    <button id="submit-btn">Submit</button>
</form>
<hr>

<h2 id="greeting" class="greeting">Where do you want to live?</h2>

and JQuery Code:

function loadData() {

var $body = $('body');
var $wikiElem = $('#wikipedia-links');
var $nytHeaderElem = $('#nytimes-header');
var $nytElem = $('#nytimes-articles');
var $greeting = $('#greeting');

// clear out old data before new request
$wikiElem.text("");
$nytElem.text("");

// load streetview
var streetStr = $("#street").val();
var cityStr = $("#city").val();
var address = streetStr + ", " + cityStr;

$greeting.text('So, you want to live at ' + address + '?');

var streetViewUrl = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + '';

$body.append('<img class="bgimg" src="' + streetViewUrl + '" >');
};

$('#form-container').submit(loadData);

Upvotes: 0

Views: 65

Answers (1)

Damien
Damien

Reputation: 1600

You should use event.preventDefault(); to prevent the page from refreshing/reloading when the submit button is clicked.

$('#submit-btn').on("click", function (event) {
event.preventDefault();
var $body = $('body');
var $wikiElem = $('#wikipedia-links');
var $nytHeaderElem = $('#nytimes-header');
var $nytElem = $('#nytimes-articles');
var $greeting = $('#greeting');

// clear out old data before new request
$wikiElem.text("");
$nytElem.text("");

// load streetview
var streetStr = $("#street").val();
var cityStr = $("#city").val();
var address = streetStr + ", " + cityStr;

$greeting.text('So, you want to live at ' + address + '?');

var streetViewUrl = 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + '';

$('#img').append('<img class="bgimg" src="' + streetViewUrl + '" >');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-container" class="form-container">
    <label for="street">Street: </label><input type="text" id="street" value="">
    <label for="city">City: </label><input type="text" id="city" value="">
    <button id="submit-btn">Submit</button>
</form>
<hr>

<h2 id="greeting" class="greeting">Where do you want to live?</h2>
<div id="img"></div>

Upvotes: 2

Related Questions