1

I am using jquery for the first time today and need help with this problem. For the all the pros out there, this issue might sound dumb but I am struggling.

I have a form field in a HTML page, and want to get value from the form field and concatenate with a url.

<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>

This is tag where I am want to add the values of street and city.

<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=White House, Washington DC&key=API_KEY">
</body>

Basically the location field in this src will come from the form field. so something like this: 

<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + "," + $('#city').val()&key=API_KEY">
    </body>

But unfortunately this is not working and need some pointers to resolve this.

UPDATE : I am trying this method to achieve this but not working 

$body.append('<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + " " + $('#city').val() + "&key=ABC">'
python
  • 4,403
  • 13
  • 56
  • 103
  • looks like you're missing quotes – T J Oct 30 '15 at 10:49
  • Can I add javascript variables inside html tags? Seems like I need to define it in a separate jquery files. With quotes also it is not working :/ – python Oct 30 '15 at 10:55
  • You can, in certain places like inline click event handlers, or if you're using a templating engine or framework like angular.js, usually with special syntax. I'll try posting an answer. – T J Oct 30 '15 at 11:11
  • I am trying by this `$body.append(' – python Oct 30 '15 at 11:14
  • 1
    Please have a look at the below link: http://stackoverflow.com/questions/10792207/changing-img-src-based-on-value-entered-in-a-textfield – Raju Chauhan Oct 30 '15 at 11:16
  • @RajuChauhan What's wrong with this approach `$body.append(' – python Oct 30 '15 at 11:26

3 Answers3

1

You should modify the src of your image on form submit. Possible duplicate of this thread (you will find a detailed answer there): Changing the image source using jQuery

So something like: 

function setSrc(){
$('.bgimg').prop('src','https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY');
}

<form id="form-container" class="form-container" onSubmit="setSrc();">
Community
  • 1
  • 1
LeCoco
  • 61
  • 1
  • 1
  • 5
1

If You need to do it using jQuery then set the value of 'src' property of img tag like this:

$('.bgimg').prop('src', '"https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY')
EekTheCat
  • 127
  • 11
1

You can do something like this:

var url = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location={street},{city}&key=API_KEY";

$("#submit-btn").on('click', function() {
  var street = $('#street').val();
  var city = $('#city').val();
  var finalURL = url.replace('{street}', street).replace('{city}', city);
  $('.bgimg').attr('src',finalURL);
});

Note that you shouldn't have src attribute set in the HTML, else browser will fire a request to invalid source.

Also make sure to validate the user inputs and that you've jQuery.

T J
  • 42,762
  • 13
  • 83
  • 138
  • @python can't tell that from the looks of it... `$body.append`.. I don't know whether `$body` is a jQuery object (if not it should be `$('body')` ... or how you're executing this line... whether it's in an event handler etc – T J Nov 02 '15 at 09:11