Conflict between input form and select form when key enter is pressed

Question

I have a search box with some inputs forms and a select form with some options. One of the inputs forms is a place autocomplete from google maps, and it works fine if no exist any select form. If in my search box I have a select form with some options, when I use the input form with place autocomplete and when the key enter is pressed, my page is reload and on the final of url shows an ?, like this http://www.lasige.di.fc.ul.pt/webtools/ondequemvaiver/agora/? You can test this problem here: my app In form Onde type Lisboa and then press key enter.

HTML:

<div class="row">
        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pesquisar">Pesquise</label>
                    <input type="text" class="form-control" id="pesquisar" placeholder="Pesquisar...">
                </div>
                <div class="form-group">
                    <label for="quando">Quando</label>
                    <input type="text" class="form-control" id="quando" placeholder="Quando">
                </div>
            </form>
        </div>

        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pac-input">Onde</label>
                    <input type="text" class="form-control" id="pac-input" placeholder="Onde">
                </div>
                <div class="form-group">
                    <label for="genero">Género</label>
                    <select class="form-control" id="genero">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </form>
        </div>

My code:

ev.views.Home = Backbone.View.extend({
    // construtor
    initialize: function(map, p, firstEntry){
        var that = this;
        that.template = _.template(ev.templateLoader.get('home'));
        // evento que e disparado quando o router atual muda
        ev.router.on("route", function(route, params) {
            that.deleteMarkers();
        });
        that.map = map; // variavel com o mapa
        that.firstEntry = firstEntry; // valor do firstEntry quando entra no router pagesearch
        that.p = p; // valor da pagina
        that.icons = [];
        that.render(that.map, that.p, that.firstEntry);
    },

    // funcao que representa a funcionaliade de pesquisar por localidade
    local: function(map){
        var that = this;
        that.map = map;
        var input = (that.$el.find('#pac-input')[0]);

        var options = {
            types: ['geocode'],
            componentRestrictions: {country: "pt"}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);
        autocomplete.bindTo('bounds', that.map);

        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              that.map.fitBounds(place.geometry.viewport);
              that.map.setZoom(12);
              that.map.setCenter(place.geometry.location);
            } else {
              that.map.setCenter(place.geometry.location);
              that.map.setZoom(12);  // Why 17? Because it looks good.
            }


        }); 
    },

    events: {
        'click #search' : 'searchKey',
        'click #maisFiltros' : 'maisFiltros',
        'mouseover .back' : 'overImagem'    
    },



    // funcao que renderiza o template e a collection que contém a lista de eventos
    render: function(map, p, firstEntry){
        var that = this;
        that.map = map;
        that.firstEntry = firstEntry;
        that.p = p;
        that.$el.html(that.template());
        setTimeout(function() {
            that.local(that.map);
            // entra so o utilizador nao fizer pesquisa ou se fizer e entrar no route pagesearch
            if(that.firstEntry != 0){
                that.marcadores = new ev.views.Markers(that.map,p);
                $("#lista").html(new ev.views.ListaEventos(that.p).el);
            }else{
                // obtem os valores dos campos de pesquisa que estao guardados na chave key
                // que deopis passa esses valores para a pesquisa
                that.keyword = ev.keyword.get('key');
                that.secondSearch = new ev.views.Pesquisa(that.keyword, that.p, that.map);
                $("#lista").html(that.secondSearch.el);
            }
        }, 0);
        return that;
    }

});

Answer 1

$("input[type='text']").keydown(function(e){if (e.keyCode == 13){e.preventDefault();return false;}})

This sets a key handler to all inputs of the type text disabling the default action on enter. This will do that for every input on your page, you can change that of course for the inputs you want without the default behavior.