Rails Ajax form submission not working

I recently set up a basic Google form on my website and used this website to extract the HTML code for display. However, upon hitting submit, nothing happens - the page seems to be frozen. I'm attempting to redirect the form submission to another page. Here is the code snippet:

<div class="row">
    <form action="https://docs.google.com/forms/d/e/1FAIpQLSfJQ9EkDN8aggSL9AEB2PK4BGiZgBzLDbS1IPppfSkU1zy-oA/formResponse" target="_self" id="bootstrapForm" method="POST">
        <div class="col-sm-6 col-md-3">
            <input id="679075295" type="text" name="entry.679075295" class="form-control" >  
        </div>
        <div class="col-sm-6 col-md-3">  
            <input id="897968244" type="text" name="entry.897968244" class="form-control" >
        </div>
        <div class="col-sm-6 col-md-3"> 
            <input id="685661947" type="text" name="entry.685661947" class="form-control" > 
        </div>
        <input id="503500083" type="hidden" name="entry.503500083" value="<%= @investment.id %>" >
        <div class="col-sm-6 col-md-3">  
            <button type="submit" value"submit" class="btn btn--primary type--uppercase" >Get Started</button> 
        </div>
    </form>    

Below is the AJAX script being used:

<script>
    $('#bootstrapForm').submit(function(event) {
        event.preventDefault()
        var extraData = {}
        $('#bootstrapForm').ajaxSubmit({
            data: extraData,
            dataType: 'jsonp',
            error: function() {
                alert('Form Submitted. Thanks.')
                window.location = 'http://reif.com.au/thankyou'
            }
        })
    }) 
</script>

Answer №1

Feeling a bit embarrassed about this one. I forgot to transfer all of the scripts over. Too much haste always leads to error number 1!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha256-2Pjr1OlpZMY6qesJM68t2v39t+lMLvxwpa8QlRjJroA=" crossorigin="anonymous"></script>

After adding these scripts, everything now submits successfully and redirects as intended!

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

Preventing Broken URLs in Jquery each

What is the best way to prevent taking images with broken URLs? jQuery.each(jQuery('img'), function(index, obj) { imageStack.add(jQuery(obj)); }); ...

The notification panel pop-up box keeps moving away from the right side

I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behav ...

Obtaining the data from the React material-UI Autocomplete box

I have been exploring the React Material-UI documentation (https://material-ui.com/components/autocomplete/) and came across a query. Within the demo code snippet, I noticed the following: <Autocomplete options={top100Films} getOptionL ...

Guide to dividing a URL in reactjs/nextjs

Here is the complete URL: /search-results?query=home+floor&categories=All+Categories. I am looking to separate it into two sections - /search-results and query=home+floor&categories=All+Categories. My objective is to extract the second part of t ...

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

For my project, I am exploring the use of .json files to mock GET requests in a backbone collection. Here is an example of my sample file: [ { "id": '11111', "name": "Abdominal Discomfort", "favori ...

In a jQuery application, the action of adding text from an input field to a div is triggered by clicking a

It's possible this is a duplicate question, but none of the answers I found solved my issue. I'm attempting to create a jQuery script where text entered into a text box is appended to a div when a button is clicked. This is part of a game I' ...

Challenges faced with react-bootstrap-autosuggest

After spending the entire day attempting to integrate the package from here into my create-react-app project upon ejection, I encountered the following error: Failed to compile. Error in ./~/react-bootstrap-autosuggest/lib/Autosuggest.js Module not found ...

issue with splice function

I have a JavaScript function that is supposed to collect all input values from text boxes and store them in an array. However, I want to remove any input value with the type "button" from the array before proceeding. Here is the code snippet: <!-- lang ...

how can I include an AngularJS variable as a parameter in an onclick function?

I attempted to utilize an AngularJS variable as an argument value inside onclick() in order to invoke a JavaScript function. Can someone provide me with instructions on how to achieve this? Here is my code: <div onclick="deleteArrival({{filterList.id} ...

Troubleshooting sequential image loading in KineticJS and resolving issues with opacity tween when setting fillPatternImg

In my latest project using KineticJS, I am developing a small app that generates multiple nodes in the form of RegularPolygons. Once the stage has loaded (activated with play();), I proceed to sequentially fill each node with an image pattern using loadIma ...

Error: The CommentsSection function did not return any values after rendering

I've been working on a project to create a simple web page that features multiple Material UI card components and integrates Redux to simulate a basic social media platform. The main issue I'm encountering is that when I try to expand a card, an ...

Embed the json data within the modal box

I received a JSON response from a php function, and it looks like this: [{"id":"15","activity_type":"call","activity_title":"Call to check "}] Below is the script that triggers the request (actvitiy.js) (Edited) $(document).on("click", ".view_contact_ac ...

Dealing with network issues when submitting a form

Is there a smooth way to handle network errors that may arise during the submission of an HTML form? It is important for me not to have the browser cache any information related to the form, but I also want to ensure that the user's data is not lost i ...

What is the best way to showcase a collection of items using a table layout in JavaScript?

I am relatively new to React/JS programming and I'm struggling to understand why my code isn't working correctly. My goal is to create a column with rows based on the items in my Array, but only the header of the table is displaying. After looki ...

How to retrieve HTML attribute using D3 techniques

Looking to iterate through all rect nodes in the code snippet below: d3.selectAll("svg g rect") .on('mouseover', function (d) { console.log(this); }); When Console.log is executed, the following is printed: <rect class="cls" na ...

Using Javascript, load a URL by making a JQuery ajax GET request and specifying custom headers

I currently have a small single-page application (SPA) using JQuery/Ajax for the frontend and Node/Express for the backend. The user authentication and authorization are handled with JSON-Webtoken, but I encountered an issue. If someone tries to access the ...

Is it possible to utilize a conditional statement in my EJS document to determine a directory path within my Node.js and Express application?

Just starting out with EJS and I'm trying to create a conditional statement. Basically, what I want is if I am on a specific directory path, then replace a link in my navigation bar. <% let url = window.document.URL; if(!url.includes(&a ...

Activating and deactivating event capturing in Vue.js

Incorporating Vue.js into my project has been a game-changer. One interesting aspect is the event listener's third option, known as capture. For instance: element.addEventListener("click", function(){}, true); I'm curious if it's ...

refreshing the bxSlider instance

After experimenting with different carousel options, I decided to use bxSlider instead of jCarousel for an image gallery project I am working on at However, I encountered an issue where the slider does not reset when I change filters or select a new one. ...

Encountering a FeathersJS Twitch OAuth 401 Unauthorized error

I'm a newcomer to FeathersJS and I've been trying to set up OAuth login with Twitch. Following the steps outlined in the Feathers documentation for setting up GitHub login OAuth, I created a Twitch OAuth application. However, when attempting to s ...