Question

i have a text field on my page that has an autocomplete featuring items from a database. When selected this scrolls the page using jquery to where that result is on the page. I want the form to scroll to the result on submit button instead of having to click the text field again. How would i edit my code so that it happens on submit, rather than on text field click

form code –

<form autocomplete="off">
<form name="search-highlight" id="search-highlight" method="post" action="#">
<p>
Film Name <label>:</label>
<input type="text" name="scroll" id="scroll" class="scroll"/>
                       <!--input type="button" value="Get Value" /-->
 </p>
<input type="submit" value="find" />
</form>

and the javascript

$("#scroll").autocomplete("get_film_list.php", {
    width: 260,
    matchContains: true,
    //mustMatch: true,
    //minChars: 0,
    //multiple: true,
    //highlight: false,
    //multipleSeparator: ",",
    selectFirst: false
});


$("#scroll").click(function(){  

    // start variables as empty  
    var scroll = "";  
    var n = "0";  

    // hide the results at first  
    $("p.results").hide().empty();  
    // grab the input value and store in variable  
    scroll = $('#scroll').attr('value');  
    console.log("The value of film is: "+scroll);  

    $('span.highlight').each(function(){  
        $(this).after($(this).html()).remove();  
    });  

    if($('#scroll').val() == ""){  
        $("p.results").fadeIn().append("Enter film in field above");  
        $('#scroll').fadeIn().addClass("error");  
        return false;  
    }else{  
       $('div.timeline :contains("'+scroll+'")').each(function(){ 
           $(this).html($(this).html().replace(new RegExp(scroll,'g'), '<span class="highlight">'+scroll+'</span>'));  
           $(this).find('span.highlight').fadeIn("slow"); 
           var offset = $(this).offset().top
           $('html,body').animate({scrollTop: offset}, 2000);
           return false;

        });  

        // how many did it find?  
        n = $("span.highlight").length;  
        console.log("There is a total of: "+n);  

        if(n == 0){  
            $("p.results").fadeIn().append("No results were returned");  
        }else{  
            $("p.results").fadeIn().append("<strong>Returned:</strong> "+n+" result(s) for: <em><strong>"+scroll+"</strong></em>.");  
        }  
        return false;  
    }  
});  
});

I hope you understand my problem – if not heres a demo (not optimized) http://www.ignitethatdesign.com/CheckFilm/index.php

DIMENSION

Answer 1

If you change the $("#scroll").click( to target the submit button (something like $("#search-highlight input[type='submit'].click) should get you the behavior.

You should probably expand the signature of your click callback to include an event argument, as in

.click(function(event)){ so later on you can call event.stopPropagation(), to indicate to the browser the click event on your input has been handled (and it doesn’t try to post the form back).