I posted a similar question about this a month or so ago and I was still in early stages of researching the problem thus not to many results came from it .After some time and effort I have come close to having my desired results. The goal is to have a search box that queries the table on my cartodb account and then results get sent back to the API. The code below works as described however that is because I have the value of the form hard coded. I did this to show that the function is correct and that the value does get passed on the the query.My problem thought is once i delete the hard coded value and try to type the text in, the query results on my Console are blank. So some where the value is getting dropped and I am not quite sure where. (I posted the whole code so that you can copy and paste to see the results...If desired)
<!DOCTYPE html>
<html>
<head>
<title>Bounds example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 95%;
padding: 0;
margin: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet"
href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet"
href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<form action="#" method="post" id="form">
<input type="Text" name="userInput" id="test" value="ARNOLD RD">
<input type="submit" value="Submit" onclick="processFormData();" />
</form>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var layer;
function main() {
var map = L.map('map', {
zoomControl: false,
center: [39.104181025785,-76.77140813181],
zoom: 8
});
L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-\
yp548gxo/{z}/{x}/{y}.png', {
attribution: '<a href="http://mapbox.com/about/maps/" target="_blank">w/
Mapbox</a>'
}).addTo(map);
var layerUrl = 'http://johnmann111.cartodb.com/api/v2/viz/fe164544-1c6a-
11e3-af5f-5404a6a69006/viz.json';
var layerOptions = {
query: "SELECT * FROM {{table_name}} order by st_ymax(the_geom) desc",
}
function processFormData() {
var input = document.getElementById('test').value;
return input;
}
var myVar = processFormData();
cartodb.createLayer(map, layerUrl, layerOptions)
.on('done', function(layer) {
map.addLayer(layer);
setTimeout(function() {
var sql = new cartodb.SQL({ user: 'johnmann111' });
sql.getBounds("select * From aps_intersection where sec_rte Like '" + myVar +
"'").done(function(bounds) {
map.fitBounds(bounds)
});
}, 2000);
}).on('error', function() {
cartodb.log.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
