The functionality of the submit button is not functioning properly when using script in ASP.NET MVC5

I am facing a seemingly simple issue, but I lack experience with scripts:

In my _Layout.cshtml file, I have the following Script:

<script>
    $('button').click(function () {
        $(this).prop('disabled', true);
    });
</script>

One of my views contains the following code:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, null))
{
    @Html.AntiForgeryToken()

    <div class="mt-5 d-flex flex-row">
        <textarea class="form-control" name="TextArea"></textarea>

        <button class="btn btn-secondary btn-block mt-2 post-btn" type="submit" id="PostButton">Post</button>

    </div>
}

This form functions correctly without the script, but for some reason, it does not work with the script active.

I placed the script in the _layout.cshtml file because I want it to apply to all buttons on my asp.net page.

After clicking on the button, it gets disabled as intended, but the "Create" action result in the HomeController is not being called.

I believe I need to modify the script. Can someone provide me with guidance on how to do so?

Thank you all

Answer №1

It seems like the issue you are facing is related to the submit form and the disabling of the button. The form functions properly without any script, where the button is enabled for submission. However, when using a script, upon clicking the button it gets disabled, preventing the form from being posted. You can try using this alternative script instead:

    $('#mainForm').submit(function (e) {
        $('#PostButton').prop('disabled', true);
    });

In addition, consider making a slight modification in your form declaration as follows:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @id = "mainForm"})) { @Html.AntiForgeryToken()

<div class="mt-5 d-flex flex-row">
    <textarea class="form-control" name="TextArea"></textarea>
    <button class="btn btn-secondary btn-block mt-2 post-btn" type="submit" id="PostButton">Post</button>
</div>

}

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

Applying a filter to a Vue.js ajax-generated list - Step by step tutorial

Currently, I am facing an issue while attempting to implement a filter on a list fetched via AJAX in my Vue.js application. The problem arises as Vue.js attempts to apply the filter before the list is fully loaded and displayed. Below is my current implem ...

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

Ways to customize a bot's status based on the time of day

I'm currently working on enhancing my discord bot by having its status change every hour for a more dynamic user experience. However, I'm facing challenges with JavaScript dates. Can anyone provide some guidance? Below is the snippet of code I ha ...

Annoying Cross-Origin Resource Sharing problem with WebAPI and authentication token

I've faced CORS issues so many times that I've grown to despise it. In order to tackle the problem, I decided to split my application into two parts: one handling the API and the other managing the client-side functionality. To address the CORS r ...

Finding the perfect pairing: How to align counters with objects?

public counter = 0; x0: any; x1: any; x2: any; x3: any; x4: any; next(){ this.counter += 1; this.storage.set("Count", this.counter); console.log(this.counter); this.logic(); } logic(){ //automatic counter here var xNum = JSON.parse(JSON.stri ...

JS/JQuery: Retrieve value from dropdown list or input field

I'm looking for a way for my user to choose a value from a drop-down menu, but if they can't find the right option there, I want them to be able to input a custom value. I've figured out a workaround by deactivating the drop-down and activa ...

React failing to display changes in child components even after using setState

When I delete an "infraction" on the child component, I try to update the state in the parent component. However, the changes do not reflect visually in the child component even though the state is updated. It seems like it's related to shallow update ...

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

To retrieve the 100 latest documents from a MongoDB collection, where each document is a combination of multiple documents with a similar field (in this case timestamp), I have implemented a series of queries using Node.js: return q.ninvoke(collec ...

How to Use Jquery UI Datepicker

Currently, I am delving into the world of JavaScript and have grasped some understanding of it. As I created a webpage with a date entry field, I require a calendar feature to enable date selection. The jquery UI datepicker (http://jqueryui.com/datepicker) ...

Transmitting an array within the POST request payload

My goal is to send an array to my Node/MongoDB server using an AJAX POST request, along with other variables in the body. Check out the client side JS code below: function setupForm(){ $("#add").submit(function(event) { event.preventDefault() ...

Group by month and calculate the total sum using mongoose in MongoDB

I'm currently working with the orderdetails model in my project. Here is a snippet of the schema: const model = new Schema( { district: { type: String }, category: String, producer: String, variety: String, qty: String, price ...

Tips for updating multiple documents in a MongoDB database using an array of values

I have a range of Product items in my inventory and when a client places an Order, they submit an array of objects. Each object in the array includes the _id product (objectId) and the quantity they purchased. [ {producId: "dshsdsdh72382377923", quantity: ...

"Exploring the capabilities of React 18 with arrays of

I have a main component called Root, which contains several sub-components known as Panel components. export interface RootProps{ children: React.ReactNode, className?: string, scheme?: 'light' | 'dark', activePanel: str ...

An issue with MySql encountered in the MySqlDataReader

After executing the command, I have fetched data into a MySqlDataReader object named 'rdr'. I now have some information stored in my MySqlDataReader. How can I display this data on our website? I'm uncertain about how to utilize the MySqlD ...

Utilizing Selenium to interact with textfields and simulate triggering events, replicating human-like behavior

Currently, I am facing a challenge in testing a webpage using Selenium which has been developed using AngularJS. This particular webpage contains text fields that users need to fill out. As the user starts typing in these text fields, AngularJS captures ea ...

Exploring the differences between a fixed-top navbar and dark theme in Bootstrap 5.3

I've been struggling to find a solution for having a fixed top navigation bar that remains solid without being transparent in both dark and light themes. Switching between dark and light themes results in the fixed-top navigation bar appearing transp ...

A guide to filtering a JSON array by email address with JavaScript

How can I identify distinct elements in a JSON array using JavaScript? Below is the example of my JSON array. I need to determine the size of unique elements. [ { "_id": "5aaa4f8cd0ccf521304dc6bd", "email": "<a h ...

In my sequence of Promises, a "reject is not defined" error led to the rejection of a Promise

In my code, I set up a chain of Promises like this: let promise = new Promise((resolve, reject) => { imgToDisplay.onload = () => { resolve(imgToDisplay.width); } }) .then((result) => { window.URL.revokeObjectURL(imgToD ...

Finding a way to extract a singular text node after the Span element but before the br tag using Selenium WebDriver

I am trying to retrieve the text between span and br tags. In the HTML snippet below, I am aiming to extract the Orange text: <td role="grid cell"> <span class="ui-column-title">Fruits</span> <span id="all fruits"> "Orange" < ...

Tips for pinpointing parent elements within a group of various sub child elements

CSS - <div class="windows" id="window'+divCount+'"> <p id="windowName'+divCount+'"></p> <p id="para'+divCount+'">Source</p> </div> <div cla ...