Page refreshes/crashes when Function is executed

Question

Good evening!

I am making a simple search engine for a cinema-website. I have an input type text form which allows the user to enter the title of the movie they are looking for:

<input class="search_button" type="submit" value="Zoek" id="search_button" onclick="ValidateInput();"/>

And I have a couple of JS functions. This one checks if the user has actually entered anything:

var user_Input = document.getElementById("input_box");


function ValidateInput()
{
    var x = document.getElementById("input_box").value;

if (x == "" || x == null)
{
    alert("You haven't entered anything");
}
else
{
    Search();
}
}

If the user has entered anything, I use these functions to check if the Input they entered matches any of the title elements on the page, and if it does that titles' background color is changed and the browser scrolls to that title.

function Search()
{

    var flag = false;
    movieName = document.getElementById("input_box").value;
    movies = document.getElementsByTagName("h3");

    for (var i = 0; i < movies.length; i++) {
        if (movieName === movies[i].innerHTML) {
            movies[i].style.backgroundColor = "#d9e9e9";
            movies[i].scrollTo();
            flag = true;
            // hoe gaan we het resultaat aan de gebruiker geven verder?
        } 
    }

    if (flag == false)
    {
        alert("no such movie was found");
    }
}

Now, everytime I run this code and enter a valid movie title, I can see the backgroundcolor change and the browser scroll to the indicated movie for like a millisecond, but then the page is automatically refreshed! I don't want this to happen of course, but I can't figure out what I'm doing wrong. Can any of you guys/gals help?

Thanks in advance,

-Robert

Did you try onclick="ValidateInput(); return false;" ?? If you have a form - it will just be submitted if you don't prevent it. — Cheery, Sep 24 '14 at 18:01

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

Change the type of the input to button. If you don't intend to submit/post the page, why use a submit input?

<input type="button" />

Or, use a button:

<button type="button"></button>

Also, see this: How to prevent buttons from submitting forms

edited May 23 '17 at 10:33

Community

1
1

answered Sep 24 '14 at 18:12

matthewpavkov

2,918
4
21
37

That did the trick. I will store it in my mind for future reference ;) Thanks a lot! – Robert Kraaijeveld Sep 24 '14 at 18:15

Page refreshes/crashes when Function is executed

1 Answers1