Tips for simultaneously submitting two forms or merging them into a single form

Trying to merge two different forms into one has proven to be quite challenging for me.

The recommendation I received was to move the create method from ChargesController to OrderController, but it's not as simple as that. The Charges Form requires javascript in order for the token to be sent via API with the "id="payment_form". So now I'm exploring options to combine both forms using either Ruby syntax or potentially Javascript.

My ideal scenario would involve the following logic...

If the Charges form submission is successful, then proceed to submit the Orders Form.

 <form id="form-element" action="/charges" method="post" id="payment_form">


    <%= form_for([@listing, @order]) do |form| %>
      
      ...

I've been unsuccessful in merging the top two lines together thus far. Any tips or suggestions?

I'm tagging stripe and javascript for anyone wondering because I believe that javascript might hold the key to solving this issue, especially for those who have experience working with Stripe.

Javascript for the Stripe elements Form:

  <script>
  
    // Code snippet for initializing Stripe
    
  </script>

Update:

Implemented the following changes:

<%= form_for([@listing, @order], html: {id: "Orders"}) do |form| %>

Integrated this piece of code into the JavaScript section:

$('#Orders').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "/charges",
        data: $('#payment_form').serialize()
    }).then(this.submit.bind(this));
});

Answer №1

Although I'm not a Rails expert, @Charlietfl has highlighted that you might be looking to generate fields from listing and order objects without the need for enclosing tags like <form>.

Instead of using form_for0 or select_tag1, I turned to my trusty google-fu.

This approach allows for just one form with Stripe's credit card Elements incorporated.

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

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

Leveraging AngularJS to send a post request to the server through the $http

Can't seem to find a solution to my Angular issue, despite searching for it extensively? After starting to learn Angular recently, I've put together the following code based on various online resources. Here's the HTML: <div data-ng-ap ...

Establishing a small boutique utilizing Vue.observable for property getters

I am currently importing the createStore function into a store.js file and passing an object with state properties and mutation functions as an argument, which is working well. createStore.js import Vue from 'vue' function createStore({ state, ...

Check if the page has been loaded using Jquery

Can anyone share a helpful strategy for initiating a function in JavaScript that only begins once the entire page has finished loading? ...

In order to activate the input switch in Next.Js, it is necessary to initiate a

Currently, I am working on implementing an on-off switch in Next.Js. To seek assistance, I referred to this helpful video tutorial: https://www.youtube.com/watch?v=1W3mAtAT7os&t=740s However, a recurring issue I face is that whenever the page reloads, ...

When navigating to '/blogs/', the index.js file in Next.js will automatically open

I'm working on a project using next.js and I want to ensure that when I visit 'localhost:3000/blogs/', it opens the index.js page. The index.js file is located in the 'blogs' folder of my project. Currently, it does open properly ...

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

Navigating PopUpWindows using SeleniumIn this guide, learn the best

I have attempted to manage a particular PopUp / new Window in Java using SeleniumServer, but unfortunately, it is not functioning as expected. Here is what I have tried: selenium.click("css=a[title=\"Some irrelevant title\"] > div.text"); Thr ...

Having Trouble with QR Code Generator Functionality

UPDATE: The initial code has been updated to implement the recommendations provided. I am currently working on a QR Code generator that updates every minute. Although I have developed the code below, I am encountering some errors and could use some assist ...

Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code: <!DOCTYPE html> <html> < ...

Numerous pop-up windows displaying a variety of distinct content in each one

While working on a website, I came across a helpful jQuery pop-up function that I found on Stack Overflow. The original post can be found here. I am trying to customize each pop-up box so they contain different content from the .pop1 and .pop2 divs (parag ...

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

What triggers the onmouseout event to occur?

Is the event triggered continuously whenever the mouse is not hovering over the element? Or is it a one-time action when the mouse exits the element? This distinction is crucial for me to determine when the mouse pointer leaves the element, while only wa ...

Verify the security of form authentication on the client-side

For my ASP.NET website, I am utilizing Form Authentication and need to verify the user's authentication status before initiating a callback on the client-side. What is the best way to accomplish this using JavaScript/jQuery? ...

Having trouble getting Vue JS 2.0 to display content?

When working with Vue (^2.0.0-rc.6) and Browserify, the entry point is index.js: import Vue from 'vue' import App from './containers/App.vue' new Vue({ // eslint-disable-line no-new el: '#root', render: (h) => h(App) ...

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

Displaying sorted objects from Angular serviceIn Angular 8, let's retrieve an object

In my Angular8 application, I am running a query that fetches a data object. My goal is to sort this data object based on the order value and then display each product item on the browser. For example, here is an example of how the output should look like ...

My Javascript code is being modified by Wordpress to include '<p>' tags

Using the philantrophy theme, I incorporated sliders into a page using shortcodes and encountered an issue where p tags were automatically inserted into my javascript code. The following code snippet highlights the unwanted p tag added in my javascript: ...

What is the best way to incorporate client and server components in nextJS when params and query parameters are required?

I'm having difficulty understanding the client/server component concept in nextJS 14 (using app router). Below is an example page illustrating how I typically structure it and what components are required: I need to extract the id value from params ...

Rails converts the database variable names and values

In my project, I am facing a challenge where I need to modify the name/value of a property in a class that is sourced from a database. This issue arises because there are two versions of an application accessing the same database, with the newer version ha ...