Javascript submit when selected issue

Question

With the following javascript I'm trying to submit a result once it is selected, but nothing happens! Any ideas why this is happening?

<input name="search" id="search" class="search-query search_size" placeholder="Enter keyword to search" data-autocomplete-label="Sorry, nothing found." data-autocomplete="/items/autocomplete_item_title" type="search">

<script>
$('#search').bind('railsAutocomplete.select', function(event, data){
    $('#search').submit();
    alert(data.item.id);
});
</script>

Update 1

This is the rails form I'm trying to submit:

<%= form_tag items_path, :method => "get", id: "search" do %>
   <%= text_field_tag :search, params[:search], class: "search-query search_size",
                               placeholder: "Enter keyword to search", type: "search",
                               :"data-autocomplete-label" => "Sorry, nothing found.",
                               data: {autocomplete: autocomplete_item_title_items_path } %>
  <%= submit_tag "Search", name: nil, :style => "display: none;" %>
<%end%>

What do you actually want the submit action to do? Post data to an specific page? — Tim, Nov 20 '17 at 16:08
@TIm... it's a basic search form in rails. I would like to select the autocomplete result and once selected automatically submit it! hope this helps! — Theopap, Nov 20 '17 at 16:12

Mosh Feu · Accepted Answer · 2017-11-20T16:10:38.737

4

You can run submit function only on form element or on input[type="submit"]. That's why nothing happen.

It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.

_{https://api.jquery.com/submit/#entry-longdesc}

on form:

function submit(event) {
  alert('form submitted');
  e.preventDefault();
}

$('#form').submit(() => {
  console.log('form submitted');
  return false;
});

$('#form').submit();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <button type="submit">Submit</button>
</form>

on input:

function submit(event) {
  alert('form submitted');
  e.preventDefault();
}

$('#form').submit(() => {
  console.log('form submitted');
  return false;
});

$('button').submit();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <button type="submit">Submit</button>
</form>

edited Nov 20 '17 at 16:10

answered Nov 20 '17 at 16:04

Mosh Feu

28,354
16
88
135

Thanks for the heads up @Mosh Feu! Is there a way around this? I would like to submit for search when a autocomplete result is selected! – Theopap Nov 20 '17 at 16:09
Do you have a `form` that the `input` inside it? – Mosh Feu Nov 20 '17 at 16:11
If I'm not wrong, the `form` and the `input` have the same id `search` right? – Mosh Feu Nov 20 '17 at 16:17
Replace one of them. `id` attribute must be unique. Once you change it, you can call `submit` to the `form` element. Just note that it will refresh the page unless the `form` has handler that prevent the refresh and send the data with ajax, like in [this](https://stackoverflow.com/a/1960245/863110) answer. – Mosh Feu Nov 20 '17 at 16:19
Thanks for the info @Mosh Feu... I have already tried this, the one id was search and the form id was search-form, but nothing happened again! Not sure what wrong here! Kind of a newbie here – Theopap Nov 20 '17 at 16:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159401/discussion-between-mosh-feu-and-theopap). – Mosh Feu Nov 20 '17 at 16:27
Have you succeed? – Mosh Feu Nov 21 '17 at 09:02

Javascript submit when selected issue

1 Answers1