Two events can be triggered with just one button press

Is there a way to trigger two functions with just one button click? I want the button to execute the check() function and open a popup window with a PHP script. I've tried different approaches but none have been successful. Can anyone assist me?

<input class="btn btn-primary" type="button" value="Save and Continue" onClick="OpenWindows(); return check();" />

Here is the code for the check() function:

function check(){
    var input, filter, ul, li, a, i;
    input = document.getElementById("customer_idSet");
    filter = input.value;
    ul = document.getElementById("customer_list");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {   
        a = li[i].getElementsByTagName("sup")[0];
        if (filter == a.innerHTML) {
            return true;
        } 
    }
    alert("Please select the customer from dropdown or add a new customer");
    return false;
}

I'm unsure how to trigger a popup from the Openwindows() function. Any suggestions?

javascriptpopupwindow

Answer №1

If you want to open windows, simply invoke the check() function first and then call the OpenWindows() function from within it.

function check(){
   ....
   OpenWindows();
}

Answer №2

It appears that your onClick() function implementation is correct. However, there may be an issue with injecting the OpenWindows() method into your HTML page. I have included an example below that demonstrates multiple function calls in a single click event, based on your implementation, and it is functioning as expected.

Example:

function check1(){
  console.log('check1');
}

function check2(){
  console.log('check2');
  window.open('//www.google.com', '_blank');
}
<input class="btn btn-primary" type="button" value="Save and Continue" onClick="check2(); check1();" />

Feel free to view the plunker example here.

Answer №3

Various methods can be utilized to add functionalities to a single DOM element. One approach has already been demonstrated in the query.

Another method is outlined below. Instead of directly adding the onclick attribute in the HTML, it can be done through scripting as shown:

HTML:

input type="button" class="btn btn-primary" id="clickMe" value="Click" />

JS:

$(function () {
    $('#clickMe').on('click', OpenWindows);
});

In this script, OpenWindows refers to the method in the JS file, which includes two other methods - check() and openPopup().

View Demo

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

Tips for calculating the total of a virtual column through child associations in Sequelize

I have a network of 3 interconnected objects (A, B, and C). There can be multiple Bs associated with A, and multiple Cs associated with each B. For instance: A └───B │ └───C │ └───C └───B └───C Object ...

javascriptnode.jssequelize.js

add the AJAX response to the specified div element

I'm currently using an ajax call to retrieve movie data from the IMDb API for 'The Shawshank Redemption'. My goal is to display this data within the designated div element. <div id="movie-data"></div> Here's my current Jav ...

javascriptjqueryhtmlajax

Why isn't my Vue2 data updating in the HTML?

Starting my journey with Vue, I have been finding my way through the documentation and seeking support from the Vue community on Stack Overflow. Slowly but steadily, I am gaining a better understanding of how to create more complex components. The issue I ...

javascriptvue.jsvuejs2vue-component

``Can you share your insights on transferring data from one controller to a service, and then accessing that data on another controller during the same

I'm encountering an issue with passing data from one controller to another using a service. To achieve this, I have implemented prototype inheritance using the $rootScope in my controller and broadcasting the object so that other controllers can acce ...

javascriptangularjsprototypeprototypal-inheritance

Having trouble transferring data from AppComponent to a function

When I send the email data to this.user in the constructor, it gets stored in AppComponent. Next, I need this variable in the function getUserData to import some data...but the console.log shows undefined, and there is also an error for users: Cannot read ...

javascriptangularfirebasefirebase-realtime-databasefirebase-authentication

What is the term used to describe the way console.log styles the Json object?

Have you ever noticed that when a JSON object is printed, say in a script run by node using console.log, it doesn't exactly pretty print the JSON? It sort of strikes a balance between showing as few lines as possible while still maintaining readabilit ...

javascriptnode.jsjson

A step-by-step guide on utilizing the reduce function to calculate the overall count of a user's GitHub repositories

I need help finding the total number of repositories for a specific user. Take a look at my code below: Javascript const url = "https://api.github.com/users/oyerohabib/repos?per_page=50"; const fetchRepos = async () => { response = await f ...

javascriptreactjs

Can jQuery be used to change the functionality of a submit button, such as toggling between show, hide, and submit options?

I am having trouble toggling a button to either submit a form on click or reveal an input field, depending on whether the user clicks outside the input field to hide/collapse it. The issue arises when the user dismisses the input field and the submit butto ...

javascripthtmljquery

What is causing my button to act in this way?

Initially, the website redirects to an undefined URL and then to test.com. I am looking for a way to implement a redirection sequence from to and finally to <head> <script type="text/javascript"> <!-- function popup(url ...

javascripthtmlfunctionpopup

How can you effectively update the content of a Parent component in react-native by communicating with its child component?

In one of my child components, I have included a button for interaction. Now, within my Parent component, I have three of these child components arranged side by side. Whenever any of these child components are clicked/touched, I want to trigger changes ...

javascriptreactjsreact-native

The feature in AngularJs where ng-options (key, value) is used with ng-model="selected" is not functioning properly

Here is the HTML code I am working with: <select ng-options="value.name for (key, value) in countries track by key" ng-model="selected" > </select> This is the specific object I am trying to manipulate: $scope.countries = { "AFG":{"name" ...

javascriptangularjs

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Transferring streaming data from Node.js to an ElasticSearch database

Currently, my Node.js script is extracting data from a large USPTO Patent XML file (approximately 100mb) to create a patentGrant object. This object includes details such as publication number, country, date, and type of patent. I am working on storing a ...

javascriptnode.jselasticsearch

What is the reason behind utilizing arrow functions in React event handlers?

function ButtonIncrement(){ const [count,setCount] = useState(0); render(){ <div> <h3> <button onClick={() => setCount(count+1)}>Increase count for amusement</button> <p>Total C ...

javascriptreactjsevent-handlingarrow-functions

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

javascriptangularjs

What is the best way to convert string dot notation into a nested object structure?

Is there a way to convert a dot notation string such as 'a.b.c.d' into an Object? And if the Object referenced doesn't exist, can we automatically create an empty one? var str = 'a.b.c.d' var obj = {} // Now what? function dotTo ...

javascript

Guide to implementing if statements within a map function in JavaScript/Vue.js

Currently, I am developing a small application using Vuejs. In this application, I receive response data and then map it to a variable. However, there are some elements with empty arrays in the data. So, during mapping, I need to check a condition and ma ...

javascriptvue.jsmappingvuejs2

What are the steps to modify the authorization header of an HTTP GET request sent from a hyperlink <a href> element?

I have a unique Angular application that securely saves JWT tokens in localstorage for authentication purposes. Now, I am eager to explore how to extract this JWT token and embed it into an HTTP GET request that opens up as a fresh web page instead of disp ...

javascriptangularjsexpress

Which is more effective: Layering multiple canvases in the DOM or consolidating all drawing on a single canvas?

In my previous projects, I have had experience working with layered canvases. While some of my colleagues swear by this approach, I find myself skeptical about its effectiveness. My primary concerns are: If multiple canvases are layered and one undergoes ...

javascripthtmlcanvas

The battle between dynamic PDF and HTML to PDF formats has been a hot

In my current project, I am developing multiple healthcare industry dashboards that require the functionality to generate PDF documents directly from the screen. These dashboards do not involve typical CRUD operations, but instead feature a variety of char ...

javascripthtmlangularjspdfhighcharts