Polymer form failing to submit via AJAX in Firefox

My Form:

<form is="iron-form" action="{{url('/user/store')}}" id="registerForm" method="POST">
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <paper-input name="email" label="E-mail" type="email"></paper-input>
    <paper-input name="password" label="password" type="password"></paper-input>
    <paper-button raised onclick="submitLRForm(event);">Submit form</paper-button>
</form>

In Google Chrome, the form data is sent via AJAX, while in Firefox, it redirects to /user/store.

I would appreciate any assistance.

Thank you, G3

Answer №1

Encountered a similar issue while using Firefox 44 on a Linux system. The problem was resolved by replacing webcomponents-lite with webcomponents. Update your script like so:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

LATEST UPDATE:

According to the documentation found at this link, the lite version offers:

Support for Custom Elements and HTML Imports only, making it suitable if Shadow DOM is not needed in your application.

As of Firefox 44, Shadow DOM is not natively supported (check here), though it can be activated in about:config by setting dom.webcomponents.enabled.

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

Is there a way to access an Excel file with JavaScript without relying on the ActiveX control?

Is there a way to access an Excel document using JavaScript code without relying on an ActiveX control object such as shown below: var myApp = new ActiveXObject("Excel.Application"); myApp.workbooks.open("test.xls"); ...

Troubleshooting the Compatibility of Scripts in ASP.NET AJAX ToolkitScriptManager

In my ASP.NET 3.5 web application, I am utilizing the ToolkitScriptManager in the following manner: <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" ScriptMode="Release" LoadScriptsBeforeUI="false" runat="server ...

Detecting the directional scrolling on a page with the rubber band effect disabled

html { height: 100%; width: 100%; overflow: hidden; } body{ margin: 0; min-width: 980px; padding: 0; height: 100%; width: 100%; overflow: auto; } In order to prevent macOS rubber band scrolling and detect the scroll directi ...

Issue with res.redirect not functioning as expected

I am having some difficulty with the use of res.redirect() in my express application. After searching through other questions, I haven't found a solution that directly addresses my specific issue or is detailed enough to be useful. app.get(/\d& ...

Jquery click on image causing mouse position issue (scrolling wrong element)

As a newbie to Jquery, I have encountered an issue with the click handler on an image. Every time the page is scrolled, the position seems to shift depending on how much the page has been scrolled. Is this normal? How can I obtain the relative position of ...

Using regular JavaScript with code inside ng-view in AngularJS involves incorporating event listeners and manipulations that can interact

Just delving into the world of angularJS for the first time. I've set up the routing service, which involves having a div with routing that calls in a template containing HTML code. I also have a range of regular JavaScript functions necessary for the ...

Make sure to execute a function prior to the ajax beforeSend

Before I upload a file using 'fileuploader', I attempted to check the file first in my beforeSend function: beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) { var file = item.file; let readfile = functio ...

How to remove a specific item from an array in MongoDB using JavaScript

So, I've retrieved a nested array from a database query. The query brings back the following data: { _id: new ObjectId("623rf3f22275f399f88bb"), first_name: 'Are', last_name: 'You', email: '<a href="/cdn-cgi/l/email ...

Adding an exception for ClickAwayListener in React-MUI

Hey there! I'm currently exploring MUI and trying to incorporate the ClickAwayListener API into my project, but I'm facing some difficulties. You can take a look at my project on codesandbox here: https://codesandbox.io/s/react-leaflet-icon-ma ...

Checking phone numbers in JavaScript utilizing regular expressions while retaining the same keypress functionality

Using regular expression in JavaScript, validate a phone number with functionality similar to keypress. $('#phone').keypress(function(e) { var numbers = []; var keyPressed = e.which; for (var i = ...

What is the best way to create two MUI accordions stacked on top of each other to each occupy 50% of the parent container, with only their contents scrolling

I am looking to create a layout with two React MUI Accordions stacked vertically in a div. Each accordion should expand independently, taking up the available space while leaving the other's label untouched. When both are expanded, they should collect ...

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

Guide to implementing Jest global Setup and Teardown in a Node.js application

I have integrated Jest tests into my Node.js project, with each test suite containing a beforeAll method that sets up a new test server and connects to a MongoDB database, and an afterAll method that shuts down the server and disconnects from the database. ...

What is the best way to identify a modification in a select element within React?

My HTML form has a dropdown menu for users to select colors, and I'm attempting to determine when a new color is chosen. Despite adding the `onchange` attribute with a `console.log()` function, nothing appears in the console when I pick a different co ...

What is the best method to implement CSS Animation using Angular when a button is clicked?

I am struggling to figure out how to use an Angular function to activate a CSS animation in my project. Specifically, I want the div "slide1" to slide horizontally to the right when either button "B1" or "B2" is clicked. Despite searching for solutions, I ...

How can React Native efficiently retrieve data from multiple APIs simultaneously?

In my current project, I am incorporating multiple APIs that are interlinked with each other by sharing the same data structure... Below is the code snippet: export default class App extends React.Component { constructor(props) { super(props); } ...

get the data from a database table by specifying the ID and retrieve the corresponding column value

I am struggling to retrieve the value of a database column based on its ID. My goal is to show it in a <span> with the ID "#name_page" I pass the ID via POST using "$(this).attr("id")" This is my AJAX request $(document).on('click', &apo ...

Want to achieve success with your AJAX calls in JavaScript? Consider using $.get

As I clean up my JavaScript code, I am looking to switch from using $.ajax to $.get with a success function. function getresults(){ var reqid = getUrlVars()["id"]; console.log(reqid); $.ajax({ type: "POST", url: "/api/ser/id/", ...

The option to clear searches is missing from the iOS interface

My application is designed to perform searches using post codes, and for the most part, it functions properly. However, I have encountered an issue where the clear icon on the right-hand side of the field does not display in certain browsers. To investiga ...

Veracode Scan finds vulnerability in jQuery html method with Improper Neutralization of Script-Related HTML Tags in a Web Page error

Veracode has flagged the issue Improper Neutralization of Script-Related HTML Tags in a Web Page (Basic XSS) within the following line of code. $('#SummaryDiv').html(data); $.ajax({ url: 'Target_URL', type: &a ...