Go to page based on input entry jquery

I want this form to redirect me to a page based on what is in the input fields. The problem is that i see the console.log but the page simply refreshes instead of taking me to the page i want to go

input has id="inputLink"

submit has onsubmit="submitPage()"

The function

var inputVal = $('#inputLink');

function submitPage(){
    $(inputVal).on('keypress', function(event) {
        if (event.keyCode == 13) {
            if($(inputVal).val() == 'home'){

                window.location.href = 'index.php';
                console.log('1');

            }else if($(inputVal).val() == 'services'){

                window.location.href = 'services.php';
                console.log('2');

            }else if($(inputVal).val() == 'portfolio'){

                window.location.href = 'portfolio.php';
                console.log('3');

            }else if($(inputVal).val() == 'about'){

                window.location.href = 'about.php';
                console.log('4');

            }else if($(inputVal).val() == 'contact'){

                window.location.href ='contact.php' ;
                console.log('5');

            }else{
                alert('undefined');
                console.log('6');
            }
        }
    });
}

Answer

Change onsubmit to onsubmit="submitPage(); return false;". Also your logic can be greatly simplified by changing the home value to index and implementing the following.

    $('#inputLink').on('keypress', function(event) {
        if (event.keyCode == 13) {
           var where = $('#inputLink').val();
           window.location.href = where + '.php'
        }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *