Update URL parameter with user input

Question

I have a URL which is passed as a function parameter like:

requestCrossDomain('https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&[email protected]&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16', function(results){

$('#loadedContent').css("display","").html(results);});

function requestCrossDomain( site, callback ) {


    if ( !site ) {
    alert('No site was passed.');
    return false;
    }


var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';


    $.getJSON( yql, cbFunc );

    function cbFunc(data) {

    if ( data.results[0] ) {

    data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');


    if ( typeof callback === 'function') {
        callback(data);
    }
    }

    else throw new Error('Nothing returned from getJSON.');
    }
}

I am in need of changing the parameters in the URL corresponding to lat=23 and lon=16 to a user input.

I have tried doing it with string.replace but I am new to JavaScript. I cant get it working, how do I do this?

Need a lot more information about how you are trying to do this and more code context — charlietfl
– charlietfl, Commented Sep 29, 2015 at 14:22

miglio · Accepted Answer · 2015-09-29 14:34:28Z

2

try a simple regex like this http://jsfiddle.net/mig1098/zzaerydw/:

var url= 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&[email protected]&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16';
var lat = 2222;//test
var lon = 1111;//test
//[0-9.] -> for integer or decimal
var result = url.replace(/lat=[0-9.]*/,'lat='+lat).replace(/lon=[0-9.]*/,'lon='+lon);

edited Sep 29, 2015 at 14:34

answered Sep 29, 2015 at 14:28

miglio

2,05811 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex K. · Accepted Answer · 2015-09-29 14:35:20Z

2

Create a template URL with __placeholder__ text, replace it as needed.

E.g.

function requestCrossDomain(params) {
    var template = "https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?lat=__lat__&lon=__lon__&num=197110&submit=Submit&hgt=100&veg=17&sitelev=&[email protected]&p=grid_id&p=T10M&p=DLYRANGE&step=2";

    for (var k in params)
        template = template.replace("__" + k + "__", encodeURIComponent(params[k]));

    console.log(template)
}

requestCrossDomain( {lat: 123, lon: 456} );

edited Sep 29, 2015 at 14:35

answered Sep 29, 2015 at 14:29

Alex K.

177k32 gold badges276 silver badges299 bronze badges

Comments

Wesley Smith · Accepted Answer · 2015-09-29 15:05:58Z

1

You can use regex for this. Here is a full example per your comment:

$(function(){
	  function requestCrossDomain(site, callback) {
		  if (!site) {
			  alert('No site was passed.');
			  return false;
		  }
		  var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';
		  $.getJSON(yql, cbFunc);
		  function cbFunc(data) {
			  if (data.results[0]) {
				  data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
					  window[callback](data);
			  } else throw new Error('Nothing returned from getJSON.');
		  }
	  }
	  $('#test').click(function(){
		  var url = 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&[email protected]&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16';
		  var newLat='lat='+ encodeURIComponent($('#lat').val());
		  var newLon='lon='+ encodeURIComponent($('#lon').val());
		  url = url.replace(/lat=[\d.]+/,newLat).replace(/lon=[\d.]+/,newLon);
		  requestCrossDomain(url, 'someFunction');
	  });
});

function someFunction(results){
    console.log(results);
    $('#loadedContent').css("display","").html(results);   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="lat" value="45"><br>
<input type="text" id="lon" value="31"><br>
<button id="test">Make URL</button>    
<br><br>
<div id="loadedContent"></div>

edited Sep 29, 2015 at 15:05

answered Sep 29, 2015 at 14:27

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

2 Comments

Sandy.Arv Over a year ago

I guess this would work.. But could you please explain me how do i use the same in the codes I have mentioned above? Sorry, but I am very new to javascript programming. Big help. thank u

Sandy.Arv Over a year ago

Thank u.. dat was exactly what i wanted... :)

BlueCollar · Accepted Answer · 2015-09-29 19:55:06Z

1

Without more information it sounds like you are trying to do basic substring manipulation, with minor modifications something like this should work:

let url = 'https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&[email protected]&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16'

// assuming you have two input elements 'lat' and 'lon'
let lat = document.getElementById("lat").value;
let lon = document.getElementById("lon").value;

url = url.replace(/\&lat=[0-9.]*/, '&lat='+lat); 
url = url.replace(/\&lon=[0-9.]*/, '&lon='+lat);

edited Sep 29, 2015 at 19:55

answered Sep 29, 2015 at 14:25

BlueCollar

1517 bronze badges

1 Comment

Wesley Smith Over a year ago

You need to account for periods :)

Collectives™ on Stack Overflow

Update URL parameter with user input

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related