The synchronicity of server and client clicking is not functioning properly

When button1 is clicked, a server-sided code Button1_Click is executed to submit data into a database. On the other hand, SubmitForm() is client-sided code. How do I make both work when pushing the button named button1 (my submit button)? The code provided below only triggers the Onclick event when the button is pushed and ignores the OnClientClick function.

<asp:Button ID="Button1" runat="server"  Onclick = "Button1_Click" 
            OnClientClick = "javascript:SubmitForm();return false" 
            Text="Submit" Width="98px"
              />

This snippet shows the validation logic in my submit form code:

function SubmitForm() {
    // Validation checks go here

    // Creation of COO_BTO_Test.bat file
}

And this is the code for button1_click:

 protected void Button1_Click(object sender, EventArgs e)
{
    // Database insertion process here
}

Answer №1

Give this a try:

<asp:Button ID="Button1" runat="server"  Onclick = "Button1_Click" 
            OnClientClick = "javascript:SubmitForm();" 
            Text="Submit" Width="98px"
/>

UPDATE:

function SubmitForm() {

    // Check for empty fields
    if (document.getElementById("hawbtxt").value == "") {
        alert("Please enter the HAWB (B/L)!");
        return false;
    }
    if (document.getElementById("invrefpotxt").value == "") {
        alert("Please enter the INV/REF/PO!");
        return false;
    }
    // Repeat for other required fields...

    // Create COO_BTO_Test.bat file
    var sText, s;
    var fso = new ActiveXObject("Scripting.FileSystemObject");

    alert("called");
    if (!fso.FileExists("C:\\COO_BTO_Test.bat")) {
        s = fso.CreateTextFile("C:\\COO_BTO_Test.bat", true);
        // Write content to COO_BTO_Test.bat file...
    }

    return true;
}

Answer №2

Eliminate the use of return false in your JavaScript function to ensure it functions correctly.

Note:

If you have return false in your code, the form will not submit:

Furthermore, Using return false in a JavaScript event typically prevents the default behavior - for links, it instructs the browser not to follow the link.

Answer №3

Take out do not include the return false statement from OnClientClick

OnClientClick = "javascript:SubmitForm()" 

By removing the return false from the client click function, the server event will now be triggered.

If you want to return a boolean value from the submit form function, you can make the following adjustment:

OnClientClick="javascript: return SubmitForm();"

Returning true from the SubmitForm method will also allow the server event to execute.

Update

In your SubmitForm method, if all required inputs are present in the form, only then should you return true at the end.

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 it beneficial to establish a universal ng-app scope within an AngularJS application that functions as a multi-page app?

Just dipping my toes into AngularJS waters, and this question will surely prove that. We're in the midst of revamping an existing app to take advantage of AngularJS for CRUD operations and more. Rather than starting from scratch, we've decided a ...

Struggling with integrating API response formatting in React and updating state with the data

This is the content found in the file 'Search.js' import React, { Component } from 'react'; import * as BooksAPI from './BooksAPI' class Search extends Component{ constructor(props){ super(props); this.state={ ...

What kind of type is recommended to use when working with async dispatch in coding?

For my TypeScript and React project, I am currently working on an action file called loginAction.tsx. In this file, there is a specific line of code that handles the login functionality: export const login = (obj) => async dispatch => { dispatch( ...

Directly transfer image to Cloudinary without creating a local file

I have integrated jdenticon to create user avatars upon signup in a node/express app. When working locally, I follow these steps: Create identicon using jdenticon Save the file on my local machine Upload the local file to cloudinary Here is a snippet o ...

How can I decrease the size of a picker in React Native?

My example shows that the picker displays numbers, but the size of it is too long and covers the entire screen. I want to reduce its size. How do I do it? In this code, I have built a dropdown list picker that contains numbers 1-31. I tried to reduce the ...

I encountered an error with status code 401 despite providing the API token as required

Can anyone help me troubleshoot an issue I'm having with a POST request using VueJS in Laravel? The request keeps failing with a 401 status code, even though I'm passing the token in the headers. const post_data = { headers: { Authoriza ...

Issue encountered when attempting to locate the file path within the getStaticProps function of an internal page in Next Js

I'm currently implementing a multi-language feature on my Next JS app. Below is the folder structure of my project. https://i.stack.imgur.com/5tD2G.png On the Home page (index page), I successfully retrieved the locales module using getStaticProps: ...

Teaching Selenium how to input text into Google's login field (programming with Python)

Encountering an issue with sending keys to the username and password fields in Google's sign-in box using Selenium. Despite locating the web elements with the IDs "Email" and "Passwd", I'm unable to input any keys into them. Here is the code sni ...

Exploring the integration of Stripe Checkout with React and Express.js

Seeking assistance with integrating Stripe Checkout into my React application. I need to create a route in my nodejs/express server that will provide the session id required for setting up Stripe Checkout on the front end. The aim is to redirect users to s ...

What is the best way to generate a dynamic HTML page output in Next.js?

Is there a way to generate a dynamic page in Next.js with HTML output? I have a dynamic page that doesn't create a file after export. When clicking on the links, the page loads, but upon refreshing a 404 error is displayed. Can dynamic page links be d ...

I encountered an issue where vue-toastr fails to function properly within an inertia.js environment

While working on a page with Inertia.js, I encountered an issue when trying to integrate vue-toastr into my Vue template file. Unfortunately, it doesn't seem to be functioning as expected and I'm unsure of how to resolve this issue. Any suggestio ...

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

I am utilizing dynamic routes with the fallback:true option to ensure newly created pages are accepted. First, I check if the parameters are true, then I create related props and display the component with those props. In the console, I can observe that Ne ...

Sending a file stream with specific file name and extension in NodeJS: A comprehensive guide

Currently, I am utilizing nodejs to transmit file streams to express response var fileReadStream = fs.createReadStream(filePath); fileReadStream.pipe(res); However, the issue arises on the front-end where the file is solely downloadable with the "download ...

Locate any instances of NaN and include them in the updated array

I've been tackling the issue of removing duplicates from an array, but I've hit a roadblock when it comes to handling NaN values. How can I identify NaN and ensure it's only added once to a new array? Although my code works flawlessly in mo ...

Disabling Scrolling in AngularJS Material Tab Components

I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...

What is preventing me from displaying a jqGrid on my HTML page?

I am encountering some issues while trying to display a jqGrid on an HTML page. The code I have implemented is causing a run-time error, and the grid is not being loaded properly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

Executing a JavaScript function with a parameter in an NPM script

Trying to execute a function by invoking an npm script with an extra parameter to specify a file path. A simplified version of the setup is shown below: package.json "reset_script": "node -e 'require(\"./script_reset_db\& ...

The Session_Start event is not being triggered

Our website consists of both ASP.NET 2.0 and classic ASP pages, specifically a login.asp page and a home.aspx page. Authenticated users are redirected from the login.asp to the home.aspx. We aim to track the number of visitors on our site. Once a specifie ...

When Ajax attempts to run a PHP page, it redirects me to a different page

My goal is to create a live chat feature using PHP, MySQL, and AJAX. I have almost got it working perfectly, but I'm stuck on how to submit the chat message without refreshing the page. I have a PHP page called sendchat.php that takes input data and s ...

Can a JavaScript class have a property that returns an array?

To those more experienced in node red development, this may be obvious, but I'll ask anyway. Within my node red flow, I have a function node containing a javascript class that only exposes static members. Here's an example: class MeasurementsLis ...