Question

I’m trying to use the jQuery Autocomplete function to submit a form when an item has been selected or an enter has been pressed upon selection. using PHP, Javascript and HTML.

I’m trying to figure out what I’m doing wrong as I am not that experienced in javascript or jQuery. I’ve searched this site and others for solutions and they all do not seem to work on my code. I’m probably doing something wrong and can’t seem to figure out what.

This is the script

<script>
    $(function() {
        var availableproducts = [ <?php echo $tag_list; ?> ];
        $( "#products" ).autocomplete({
            source: availableproducts,
            select: function(event, ui) { 
                $("#products").val(ui.item.value);
                $("#partno_item_form").submit(); }
        });

    });

</script>

This is the form and the input field related to #products

echo '<form method="POST" name="partno_item_form">
        <tr>
            <td>
                <input id="products" name="item_select" class="autocomp">
            </td>
      </form>

Your assistance in troubleshooting this issue is greatly appreciated!

Thanks in advance

Answer 1

This selector:

$("#partno_item_form")

selects elements by id. Your form does not have an id of partno_item_form, so submit() is never being called for it.

Change your selector in the select event handler to:

$("form[name='partno_item_form']").submit();

Using the attribute equals value selector will allow you to select the form by its name attribute.