Transferring a variable from JavaScript to a Ruby session

Here is a basic input text field:

<input type="text" id="master_password" size="20" placeholder="Master Password" />
<a class="btn btn-default" id="master_submit" href="#">Submit</a>

Additionally, there is some JavaScript code in place:

$(document).ready(function() {
  $('#master_submit').click(function() {
    alert("sometext");
  });
});

The current setup triggers an alert when the submit button is clicked. The objective now is to save the content of the text field (#master_password) into session[:master_pass], as it will be utilized for decrypting passwords stored in the database. To achieve this, AJAX is likely necessary, but familiarity with it is limited. What modifications should be made to replace the alert with relevant code in the JavaScript file (or view, or controller) to store the data as a Ruby variable?

Answer №1

If you are using Ruby on Rails, one approach is to utilize JavaScript for an AJAX call to your Rails application. Then, within your Rails controller, you can manipulate the session data accordingly.

Here's an example using JavaScript (specifically jQuery):

var data = "user_input=" + encodeURIComponent($('#user_input_field').val());

$.ajax({
  url: '/my_controller/custom_action',
  data: data,
  type: 'post'
})
.done(function(response) {
  // Handle the response here
})
.fail(function(error) {
  // Handle any errors that occur
});

Within your Rails application, create a controller with the appropriate route and define the action like so:

class MyController < ApplicationController
  ...
  def custom_action
    session[:input_data] = params[:user_input]
  end
  ...
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

Add a library to a server with npm installation

When needing to incorporate a library like Croppie, the installation process involves using npm or Bower: npm install croppie bower install croppie Given that I am working on a server, I'm uncertain where to install it. Should it be on the server it ...

Exploring the best practices for handling Ajax requests in React flux architecture

I have developed a react js application where users can register by creating an account, and then I send an HTTP post request to the backend server. My action function for creating a user looks like this: export function createUser(name, username, passwo ...

Handling Errors Globally in Angular 4

https://i.sstatic.net/ffKEs.png Attached is my code implementing a global handler. I am trying to extract the 'dashboard' from the 500 Error on zone.js. How can I achieve this within the global Handler? Is there a method to obtain the desired ou ...

Guide on rendering a component in React jsx using innerHTML

In my current project, I am developing a feature that allows users to toggle between graph and list views. The view's container is assigned the class name "two". toggleGraphView() { const two = document.getElementsByClassName('two') ...

The jquery datetimepicker function cannot be located or is not functioning as intended

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <script src="Js/bootstrap-datetimepicker.min.js"></script> <script src="Js/bootstrap-datetimepicker.he.js"></script> ...

Is there a way to isolate nested forEach loops from each other?

Lately, I've been working hard to streamline my code and eliminate nested for-loops / forEach methods in order to optimize the process. However, I've hit a roadblock with a specific task. I have an array of objects that includes another array of ...

Is there a way to utilize redux to trigger the opening of my modal when a button is clicked?

I'm facing a challenge with opening my modal using redux when clicking <CheckoutButton/>. Despite my efforts, the modal keeps appearing every time I reload the browser. I've reviewed my code but can't pinpoint the issue. What am I doin ...

JavaScript object value not accessible due to SyntaxError: Unexpected token, expected ,

While working on aliases.js, I encountered an issue when attempting to retrieve the value of the 'SELECT_HOST' property from the imported actionTypes object. This led to a "SyntaxError: Unexpected token, expected ," error according to Webpack. I& ...

A redirect will not lead to a different page

I created a sign-in page that utilizes Ajax to send the username and password to a PHP file for verification. If the verification fails, a message is displayed below the create account button on the sign-in page, which is functioning correctly. However, wh ...

Using Vue.js to bind data in two directions by using an object with v-for

I can't seem to get input data properly bound to object properties. When I try to iterate through an object to create input fields based on its attributes, the v-model data binding doesn't seem to be working as expected. Even with the code below, ...

Retrieve the current element's 'this' object even after binding an external 'this' object

Is the title of this question confusing? Let's dive in. Imagine you have something like this: var Test = function(){ this.foo = a; } Test.prototype.init = function() { $(document).on('change', '.form-control', this.myFun ...

ES6 scoping confusion: unraveling the mystery

I stumbled upon these two syntax methods for exporting functions. Let's say we have files named actions.js and app.js. The first method looks like this: in actions.js export function addTodo() {} export function deleteTodo() {} and in app.js I have ...

iOS device experiencing issue with resolving promise after attempting to signInWithEmailAndPassword using Ionic, Vue, and Firebase

I've been struggling with this issue for a while now and have reached a point where I am unable to find a solution on my own. Therefore, I have decided to reach out and ask for help by posting my own question. In my Ionic 7 Vue application, I am usin ...

Custom validation in Laravel along with Ajax

I used to validate my Laravel 4.2 project with the Ardent package, but now that I've upgraded to Laravel 5.5, I've switched to using Laravel's native validation with form requests instead. Previously, the Ajax call was validated like this: ...

Click on the marker to adjust the map's central position

I've successfully created a leaflet map featuring an array of 3 different locations, each marked with a popup window. Now, I'm looking to implement the functionality that will allow the center of the map to change dynamically when a user clicks o ...

Exploring the possibilities of socket.io and utilizing the potential of express js

I'm a beginner in Node.js and I recently learned about socket.io and express.js. I want to understand the difference or connection between them as I have some small code snippets for a chat application. In nodeClient.js var socket = io.connect(&apos ...

The submission of an Angular form results in errors such as being unavailable or

After building a registration page component in Angular and following tutorials, I encountered a frustrating bug. When pressing the submit button on the form, the console would display "undefined" when attempting to access the NgForm's value. However, ...

JavaScript form unable to submit data to web server

I have created a Python server with a custom do_GET method to handle form values. My objective is to design a push button for a table that will inform the server when clicked and send a unique key for parsing. The button just needs to transmit the predefi ...

Preloading Vue dynamic routes for optimal performance

Currently dealing with a challenge on my Vue project and could use some help. I'm looking to prerender specific dynamic routes when I navigate to a particular route within the application. On the /works route, there's a list of items displa ...

Finding the Modular Reciprocal with JavaScript

I am attempting to find the value of d by solving the equation ed ≡ 1 mod((p-1)(q-1)), similar to the RSA algorithm. Given e = 5 and (p-1)*(q-1) = 249996 I have experimented with various Javascript code snippets, such as: function calculateModInverse( ...