How can a form be submitted in Extjs without using ajax?

Hello there! I'm attempting to submit an extjs form without using ajax and display the result on the next page. Below is my code:

Ext.define('test.from', {
    extend: 'Ext.form.Panel',
    alias: 'widget.test.form',
    initComponent: function () {

        var me = this;

        Ext.apply(this, {
            frame: true,
            bodyPadding: 7,
            border: 0,
            items: [{
                xtype: 'textfield',
                fieldLabel: 'First Name',
                name: 'contact_attr'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Last Name',
                name: 'contact_attr'
            }],
            buttons: [{
                text: 'Send',
                handler: function () {
                    me.getForm().submit({
                        url: '/salary/public/auth/',
                        standardSubmit: true,
                        method: 'POST'
                    });
                }
            }]
        });

Unfortunately, when I try to redirect to another page, it doesn't happen and I receive the error message: 

You're trying to decode an invalid JSON String
. Can anyone provide some guidance? Thank you!

javascriptajaxextjsextjs4form-submit

Answer №1

Alright, it seems like there are two errors that you need to address.

  1. Firstly, why are you not redirecting with the standard submit? And
  2. Secondly, why are you encountering an "error decode"?

It appears that you may be using extjs4:

1 . According to the API documentation, the submit() method serves as a Shortcut to do a submit action, with parameters being 

The options to pass to the action (see doAction for details)
. Therefore, adding standardSubmit to the submit method is incorrect as there is no standardSubmit option available. You have two alternate solutions:
Firstly, utilize the following initialization:

Ext.apply(this,{
    standardSubmit:true,  // not working...
    frame: true,
    bodyPadding: 7,
    .......

Edits:

.......
me.getForm().standardSubmit=true; //just like OP comment
me.getForm().submit({
   url: '/salary/public/auth/',
   standardSubmit: true,
   method: 'POST'
});
.......

Alternatively, use the doAction method:

...
me.getForm().doAction('standardsubmit',{
   url: '/salary/public/auth/',
   standardSubmit: true,
   method: 'POST'
});
...

2 . As for the "error decode," without seeing your salary/public/auth structure, it's hard to pinpoint the issue... Give my first solution a try, and if the error persists, then it might be elsewhere in your code.

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

Exploring the Debate: AJAX versus JSON for Cross Domain Built-in Security

I've noticed an interesting disparity in my ability to make cross-domain calls using AJAX. While I can successfully call the Twitter API with JSON in jQuery, I seem to be restricted from making similar calls outside of the current domain with regular ...

jqueryajaxsecurityjson

The radio button fails to trigger the setState function in React

In my React program, I have implemented a method to update the state and modify a specific value for a Radio button: The state : class App extends Component { constructor(props) { super(props); this.state = { checked: [], expanded: [], ...

javascriptreactjs

How to implement form modal binding using Laravel and Vue.js

There are two models named Tour.php public function Itinerary() { return $this->hasMany('App\Itinerary', 'tour_id'); } and Itinerary.php public function tour() { return $this->belongsTo('App\Tour', ...

javascriptlaravelvue.jsvuejs2laravel-5.4

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...

javascripthtmlcss

What is the best way to securely transfer data from a Node/Express server to the client using JavaScript, ensuring sanitized HTML and preventing cross-site scripting (X

What is the best method to securely pass data from an Express backend to a client-side JavaScript in order to render it in the DOM using client-side rendering, while also allowing sanitized whitelist HTML and preventing XSS attacks? For example, if the No ...

javascripthtmlexpressxsshtml-sanitizing

Wait for NodeJS to finish executing the mySQL query

I am attempting to send an object from the controller to the view. To keep my queries separate from the controller, I am loading a JS object (model). My model structure is as follows: function MyDatabase(req) { this._request = req; this._connection = ...

javascriptmysqlnode.jsexpressasynchronous

Assistance required with an Ajax request to display multiple dropdown menus

I must confess that my knowledge of Ajax and XML is more limited than my understanding of jQuery. My current project involves creating a user-friendly search form where the OPTION tags for each state and city SELECT are pulled from the same XML file using ...

jqueryxmlajaxformswebforms

What is the best way to assign a unique ID to every <td> element within a table using React Js?

Hello everyone. I am currently working on assigning unique ids to each td in a table based on data received through an API. This is what my code looks like so far. CodeSandbox const assignIdsToTableData = (data) => { var items = Object.values(data)[0 ...

javascriptreactjshtml-tablenormalization

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...

javascriptphpjqueryajaxserialization

Accessing live content in JQuery without causing the browser to freeze

Apologies if this question seems repetitive, but I haven't been able to find a satisfactory explanation and solution in any of the other questions. I'm working on a python application that streams HTML data while processing a request. On the cli ...

jqueryajax

Is it possible to utilize X-Y coordinates as repositories for values beyond just X-Y coordinates themselves?

I am in the process of creating a tile-based grid and I need to expand the X-Y coordinates to include additional values for determining characteristics of each tile, such as resources (for example, food, water, stone, lumber) within a game context. Conside ...

javascripthtmlhtml5-canvas

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementB ...

javascriptjqueryhtmlcssdrag-and-drop

"Upon submitting a form in React JS, the components will automatically trigger a

Within my application, there is a Mobx storage in conjunction with a modal window component. The form within the modal window allows me to collect all the properties and push them into an array named 'cart' within the storage as an object. Take a ...

javascriptreactjstypescript

Ways to include multiple pieces of data in a JQuery Mobile List view

Obtaining JSON data (list of available Hotels within a certain distance) and extracting the following information in JSON format: Name of Hotels, Distance of Hotel from our current location, number of rooms. There might be multiple Hotels within the specif ...

javascriptandroidjqueryjsoncordova

retrieving data from a different controller in AngularJS

Having an issue with passing data from rootScope.reslogin2 to scope.user. It's not displaying as expected, here is my JavaScript file: app.controller("logincont", ['$scope','$http','md5','$window','$rootS ...

javascriptangularjsrootscope

Using JavaScript, what is the process for getting the value of a child node within Firebase

var ref = firebase.database().ref("games/" + gameId + "/patterns"); ref.on("child_changed", function(snapshot){ var pattern = snapshot.key; console.log(pattern); }); Currently, the code snippet above only logs the key. But how can I extract the player ...

javascriptfirebase-realtime-database

Issue with setting up asp.net ajax control toolkit version 3.5

I've successfully installed the control toolkit (with the dll in the bin folder of my application and the ability to add controls to the toolbox in Visual Studio). However, I'm facing an issue where none of the controls seem to work for me, indi ...

asp.netajaxajaxcontroltoolkit

Dealing with database errors while making AJAX requests in CodeIgniter

Intentionally making an error by using a wrong column name to learn how to handle errors with ajax calls in CodeIgniter. Last comment in the controller function is posing my question or problem My AJAX Code: I am utilizing the ajaxform plugin. It displa ...

ajaxcodeignitererror-handlingajaxform

Auto-fill Textbox from a different Textbox in MVC 4

I am attempting to automatically fill in a textbox based on the value of another textbox, but I am struggling with getting the other textbox to populate. Below is my code - any advice on the best solution would be greatly appreciated. Action Method: [Htt ...

jqueryajaxasp.net-mvcjsonasp.net-mvc-4

Update the color of navigation items to reflect their active status

Here is the snippet of HTML code: <header> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#"">Home</a></li> <li><a href="#">About</a></li> & ...

javascripthtmlcss