The triggering of fire OnClick is contingent upon the outcome of OnClientClick

I am currently faced with integrating legacy code written in JavaScript and C#. I need to write a new piece of code that will determine whether the OnClick event should fire based on certain conditions. My approach involves checking these conditions within the OnClientClick function. Despite trying various methods found on the Internet, none seem to be effective. As someone who is still learning JavaScript and C#, some of the solutions are difficult for me to grasp. For example, does setting OnClientClick="return confirm ('This will delete the report. Continue?'); return false; " mean that it always returns before executing "return false"?

Below are snippets of my existing codes:

aspx file:
<div id="searchBtn"><asp:LinkButton ID="SearchButton" OnClientClick="return SetInputString(); return false;" OnClick="SearchClick" ValidationGroup="search"  runat="server"><img src="images/btn_search.jpg" alt="検索" /></asp:LinkButton></div>

js file:
function SetInputString() {
    var textbox = document.getElementById("textForm");
    var inputString = document.getElementById("inputString");
    clearNonInteractiveTimer();
    inputString.value = textbox.value;

    if (/^[0-9]{6}$/.test(inputString.value)) {
        EvaluateEnteredSearch(inputString.value);
        return false;
    } else {
        return true;
    }
}

cs file:
public void SearchClick(object sender, EventArgs e){
...
}

Answer №1

Confirm is a function that is intrinsic to JavaScript.

This function operates modally, pausing the execution of scripts and restricting user interaction with the remainder of the page until the dialog window is closed.

Therefore, the result will vary based on the user's decision.

return false indicates that the default action of the clicked button is being cancelled.

There are two methods for indicating to the browser that you wish to prevent the default action for a specific event, such as cancelling a link: either call event.preventDefault() or return false within the handler function. The latter method only applies if the handler is assigned using the onevent attribute in the following way:

<a href="//google.com" onclick="return false"> google </a>

Alternatively:

<a href="//google.com"> google </a>

<script>
document.getElementsByTagName('a')[0].onclick = function() {
  return false;
}
</script>

For additional information, visit: How to undo a default action


Now, let's discuss your code.

The OnClick Event triggers a server request and carries out a response action.

OnClientClick functions similarly to the onclick function often used in JavaScript, executing statements on the client side without submitting them to the server.

If SetInputString returns true, it will proceed to call SearchClick.

Further details can be found here: When to call the Server onClick vs OnClientClick

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

Refresh a Particular Section of a Website Without Having to Reload the Entire Page

I have this PHP script that I'm using to read specific phrases from a text file and then display one of them randomly on a webpage. Currently, the only way to see a new random phrase is by refreshing the entire page. I'm wondering if there is a w ...

AngularJS $http get isn't functioning properly, but surprisingly $.ajax works perfectly

Recently delving into the world of AngularJS, I am facing a hurdle with $http functionality. In my factory setup below: app.factory('employeeFactory', function ($http) { var factory = {}; // Retrieving data from controller var emplo ...

Having difficulty executing the command 'npm install -g expo-cli'

When attempting to execute npm install - g expo-cli on a Windows 10 machine, I am encountering issues. An error message keeps popping up and preventing me from proceeding. I'm in desperate need of assistance! npm WARN deprecated <a href="/cdn-cgi/ ...

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

Encountered a deployment issue when trying to deploy an HTML application on Heroku due

After uploading an html application on GitHub, I encountered an error while attempting to deploy it on Heroku: No default language could be detected for this app. HINT: This happens when Heroku is unable to automatically determine the buildpack to use f ...

Break down a string into an array containing a specific number of characters each

I'm currently working on a project that involves tweeting excerpts from a book daily via a small app. The book's content is stored in a text file and I need to split it into 140-character-long strings for posting. Initially, I tried using the s ...

Obtaining an array element from mongoose at the corresponding index of the query

My Schema looks like this: const PublicationSchema = mongoose.Schema({ title: { type: String, required: true }, files:[{ contentType: String, data: Buffer, name: String }] }) I am attempting to re ...

Encountering a 405 Error with C# Web API when attempting a GET

As someone who has recently transitioned from desktop development to working with restful APIs, I am facing an issue with a 405 error when attempting a GET request on a controller. The code for my controller is as follows: public class ApplicantsControll ...

Having trouble sorting data-text values that include colspan cells

Latest Update: Encountered an issue with incorrect sorting and frozen sortings when dealing with a cell containing the colspan attribute. Refer to https://jsfiddle.net/2zhjsn31/12/ where the problem arises for the date 2018-06-24 On https://jsfiddle.n ...

Obtain the IDs of the previous and next list items if they exist?

Hey there friends, I've hit a roadblock and could really use your help. I'm trying to figure out how to get the previous and next list items in a specific scenario. Let's say I have a ul with three li elements, and the second one is currentl ...

Tips for maintaining a persistent login session in Gmail with Puppeteer and Node.js

I'm trying to access a pre-signed gmail account, following the guidance provided by this answer from user wolfy. However, I noticed that it logs me out after a while or when multiple instances are opened with the same cookies, requiring me to re-enter ...

Selenium WebDriver is encountering difficulty loading the list of followers on Instagram

I have been learning JavaScript, Node.js, and Selenium Web Driver as part of my educational journey. One of my projects involves developing a simple bot for Instagram using the Chrome web driver to emulate a browser. However, I encountered an issue when t ...

Stop the page from unloading before the ajax request is made

Seeking a solution similar to this question: Reliably complete Ajax request on page unload I am in need of triggering a network request before the page closes without requiring the response value. However, simply placing it within my beforeunload handler ...

Integrating Express into a React Webpack project

I am currently in the process of integrating express into my React project to establish connections with databases for storing form data. As of now, I am using webpack to create a dev server that displays my React view. My technology stack includes... Web ...

Utilize Django to leverage a JSON file stored within a context variable for use in jQuery

I need to utilize a list in Jquery and integrate it with the Autocomplete jQueryUI widget. The list is small, so creating a new request seems unnecessary. Therefore, I believe using Jsquery's getJSON is also not required. Here is my current setup: ...

Using node.js version 10.0.0 to tinker with gulp

I was working on a node.js api project that functioned perfectly with node.js v8.1.4 & npm v5.0.3. However, upon transitioning to node.js v10.0.0 & npm v5.6.0, I encountered the following error: [email protected] ecosystem E:\opensource& ...

What is the best way to retrieve the second to last element in a list

When using Protractor, you have convenient methods like .first() and .last() on the ElementArrayFinder: var elements = element.all(by.css(".myclass")); elements.last(); elements.first(); But what about retrieving the element that comes right before the ...

Implementing TypeScript type definitions for decorator middleware strategies

Node middlewares across various frameworks are something I am currently pondering. These middlewares typically enhance a request or response object by adding properties that can be utilized by subsequent registered middlewares. However, a disadvantage of ...

Functionality limited to Firefox browser

I'm having some trouble with my website development in HTML5 and CSS3. Specifically, I am struggling to get my processing sketch to work on browsers other than Firefox. Below is the code I am working with: <!DOCTYPE html> <html> ...

Exploring particular sub documents within MongoDB utilizing Mongoose

I have tested multiple methods from the MongoDB documentation manually, but none of them seem to resolve my issue. Below is a structure of my data for reference: "loopback": [ { "_date": "some date", ...