I need help figuring out how to submit a form with GET, but also call preventDefault(). Currently I have the following but the page is still being reloaded or redirected:
[code]
<div class=”row”>
<div class=”col-md-3″>
<form method=”GET” action=”/search”>
<div class=”form-group”>
<input type=”text” class=”form-control” id=”term” name=”term” placeholder=”Find”>
<br>
<input type=”text” class=”form-control” id=”location” name=”location” placeholder=”Near”>
</div>
<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
</div>
</div>
<script>
$(function() {
$(‘form’).submit(function(event) {
event.preventDefault();
var $this = $(this);
$.get($this.attr(‘action’), function(data) {
$(‘pre’).text(data);
});
});
});
</script>
Now in my express code, I have this:
[code]
app.get(‘/search’, function(req, res) {
var apiUrl = getApiUrl(req.query);
var apiData = getApiData(apiUrl, function(statusCode, data) {
// console.log(data);
// res.render(‘api-guide’, data);
res.send(data);
});
});
I’m also using a templating engine (handlebars), so the form is in its own file, while the jquery stuff is in the main template. Is that why it’s not able to prevent the page from reloading?