Trigger the submission of Rails form upon a change in the selected value within a dropdown form

I am working on a Rails application that has a table of leads. Within one of the columns, I display the lead's status in a drop-down menu. My goal is to allow users to change the lead's status by simply selecting a different value from the drop-down menu.

Here is my current approach:

The following code snippet is used to display the form within a table cell:

      <% @leads.each do |lead| %>
  <tr>
    <td><%= lead.id %></td>
<td><%= form_for(lead,:url => 'update_lead_status') do |f| %>
              <div class="field">
                <%= f.select :status, ["to_call","called","confirmed","lite"], :selected => lead.status, onchange: "this.form.submit();" %>
              </div>
            <% end %>
        </td>

Within my leads controller, here is the update_lead_status method:

#PUT
  def update_lead_status
    @lead = Lead.find(params[:id])
    respond_to do |format|
      # format.js
      if @lead.update_attributes(params[:lead])
        format.html { redirect_to leads_url, notice: 'Lead was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: "edit" }
        format.json { render json: @lead.errors, status: :unprocessable_entity }
      end
    end
  end

Additionally, I am looking to implement Ajax submission for a smoother user experience without page refreshing.

Answer №1

Specify form ID and then trigger form submission

<%= form_for(lead,:url => 'update_lead_status',:html=>{:id=>'lead_form'}) do |f| %>

 <%= f.select :status, ["pending","in_progress","completed","cancelled"], :selected => lead.status, onchange: "$('#lead_form').submit();" %>
<% end %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting Started with the Basic Example of Redux-Router

Recently, I decided to give redux-router a try and wanted to run the basic example. However, when I tried running the command: npm start I encountered an error message that said: node: bad option: -r Being new to the JavaScript modern ecosystem, I&apos ...

`How can I eliminate all duplicate entries from an array of objects in Angular?`

arr = new Array(); arr.push({place:"1",name:"true"}); arr.push({place:"1",name:"false"}); arr.push({place:"2",name:"false"}); arr.push({place:"2",name:"false"}); arr.push({place:"3",name:"false"}); arr.push({place:"3",name:"true"}); I'm curious about ...

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? ...

What are the steps to execute PhantomJS on a client machine?

I have implemented an HTML to PDF converter that utilizes phantomjs, following this method: npm install -g html-pdf var fs = require('fs'); var pdf = require('html-pdf'); var html = fs.readFileSync('./test/businesscard.html' ...

Implementing Dependency Injection in Ajax Calls in MVC 5

After discovering dependency injection and learning about its advantages and disadvantages, I am contemplating whether it would be beneficial to implement it in my app. So far, I haven't come across an example that matches what I currently have. My a ...

Utilizing bcrypt in an axios request

Currently, I am working on an axios call to a specific json file. My goal is to obtain input from a front-end framework and then pass that data to my server using express. The task at hand involves encrypting the password retrieved from request.body.passw ...

What causes the entire page to refresh when using ValidatorCallOut in the Ajax Control Toolkit?

After downloading the Ajax Control Toolkit, I am trying to integrate its components into my project. I have utilized the ValidatorCallOut Component as an extender for a Textbox, so that when the user switches focus to another Textbox, the ValidatorCallOu ...

Retrieving JSON data from an API

As a beginner with Jquery JSON and API's, I am trying to work on hitting an API that returns city names in JSON format. I need to display these city names dynamically on my webpage in a list format. Can someone guide me through this process? If you w ...

Error: The requested collection# cannot be found in the Node.js Express routing system

Recently, I have started learning nodejs and implemented a simple API that allows users to log in with passport and then redirects them to the /collections route. While this part is functioning correctly, I am encountering issues with POST requests which a ...

Parent's hover element

I am currently working with the following loop: <?php if( have_rows('modules') ): $counter = 0; while ( have_rows('modules') ) : the_row(); ?> <div class="col span_4_of_12 <?php if($counter == 0) { ?>firs ...

What is the best way to update a Vue.js input element using JavaScript?

Looking to use a Vue.js input for automated testing purposes. How can I successfully set a value and submit it without it being automatically changed back to default data? I have tried the following method to set the value, but it keeps getting overridden ...

Using jQuery's AJAX function to redirect upon successful completion to a specific URL stored

After making an ajax call successfully, I want the current page the user is on to refresh. However, despite trying multiple approaches, nothing seems to be working. There are no errors or network activity showing in the Chrome debug. get[1] = "module=tick ...

Incorporate a JavaScript variable within the src attribute of a script tag

Embedding Google's script allows for displaying a trends Map on our website. <script type="text/javascript" src="//www.google.com.pk/trends/embed.js?hl=en-US&q=iphone&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&a ...

Utilizing Mongoose Schema across various endpoints in an Express application

As a newcomer to Node.js, I am using Mongoose and Express for my project. Within the routes/index.js file, I have defined a userDataSchema as follows: var Schema = mongoose.Schema; var userDataSchema = new Schema({ username: String, username_lower: ...

React hooks - Issue with updating state properties within sidebar display

When resizing the window, I have an event that will display either the desktop sidebar or the mobile sidebar. However, there are variables that are not immediately updated to show the sidebar correctly based on the window size. In a desktop window, this ca ...

Activate the places_changed event in Google Maps by clicking the submit button

I would like to activate my placed_changed function when a submit button is clicked. Here's what I have so far: I've set up a searchbox using google.maps.places.SearchBox, and when I press enter while the search box is in focus, it triggers the e ...

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

Struggling to align elements in React/JS/M?

My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...

Can we safely save a value in session storage directly from the main.js file in Vue?

Throughout the user session managed by Vuex, I have a session storage value set to false that needs to be monitored. Setting up this value directly from the main.js file looks like this: import { createApp } from 'vue'; import App from './Ap ...

Using the Trigger Method in a Vue JS Component with Sibling Components

Seeking assistance once again for a VueJS2 project. Currently, I have a setup with a parent component, along with child1 and child2. The scenario is that the form in child1 needs to receive data from child2, which acts as a table. When a checkbox on a row ...