Search form: submit when a name is clicked

Question

In my search box, when a user presses three letters, a list of potential hits is shown.

But when a user selects a name from this list, he still has to press enter. How can I avoid this When he selects his name, his name should be automatically be submitted.

UPDATE: And is it possible to only submit when a user selects a name from the list, and not when he presses enter?

This is the HTML code:

    <form action="10_miles.php" method="post">
        <p><label>Please enter your LAST name and find your name in the list: </label><br><br>
        <input type='text' name='full_name' value='' class='auto'></p>
    </form>

I am making use of this javascript:

<script type="text/javascript">
            $(function() {
            $(".auto").autocomplete({
                source: "search_develop.php",
                minLength: 3
            }); 
        });
    </script>

score 2 · Accepted Answer · answered May 17 '14 at 18:51

2

You do this like;

<script type="text/javascript">
            $(function() {
            $(".auto").autocomplete({
                source: "search_develop.php",
                minLength: 3, 
                change: function (event, ui) { 
                     $('form').submit(); 
                },
                close: function (event, ui) { 
                     $('form').submit(); 
                }
            }); 
        });
    </script>

answered May 17 '14 at 18:51

umut

1,016
1
12
25

Is it possible to make it that the form is only submitted if a name is selected, not when the user pressed enter? – Kasper Van Lombeek May 17 '14 at 19:09
1

Yes it is possible. You can handle which key is pressed. Then check it is enter or not. If it is enter you call events' preventDefault function. You can find detail in http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter – umut May 17 '14 at 19:16

score 1 · Answer 2 · answered May 17 '14 at 18:46

1

$('#selector').click(function(){   
       $('form').submit(); 
});

answered May 17 '14 at 18:46

Vahid Taghizadeh

997
8
9

This doesn't work, now if I even click in the search box he submits. He can only submit if a a name is clicked – Kasper Van Lombeek May 17 '14 at 18:48
You should replace your name selector with name. your autocompelte list should have a tag or selector. – Vahid Taghizadeh May 17 '14 at 18:50

score 0 · Answer 3 · answered May 17 '14 at 19:07

Even though you've already accepted an answer, I thought it would be nice to put a pure JavaScript related answer.

setInterval(function(){
    if (document.getElementById("name").value.toLowerCase() == "marzonie") {
      document.getElementById("status").innerHTML='Does equal.';
    } else {
      document.getElementById("status").innerHTML='Doesn\'t equal.';
    }
}, 100);

document.getElementById("submit_form").onsubmit=function( event ){ event.preventDefault(); }

It loops every 100ms and validates input's value if it is equal to "marzonie" or not, and it changes status' innerHTML accordingly.

JSFiddle

Search form: submit when a name is clicked

3 Answers3