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
– Tim, Commented Nov 20, 2017 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
– Theopap, Commented Nov 20, 2017 at 16:12

Mosh Feu · Accepted Answer · 2017-11-20 16:10:38Z

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, 2017 at 16:10

answered Nov 20, 2017 at 16:04

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Theopap Over a year ago

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!

Mosh Feu Over a year ago

Do you have a form that the input inside it?

Mosh Feu Over a year ago

If I'm not wrong, the form and the input have the same id search right?

Mosh Feu Over a year ago

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 answer.

Theopap Over a year ago

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

|

Collectives™ on Stack Overflow

Javascript submit when selected issue

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related