Generating an HTML hyperlink to trigger a button click event on another page

After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page:

<style>
    .fancy-link{
        color: #FFFFFF;  
        text-decoration: none;  
        transition: all 0.3s linear;  
        -webkit-transition: all 0.3s linear;  
        -moz-transition: all 0.3s linear;
        border-radius: 4px; 
        border: 1px solid black; 
        background: #0080FF;  
        padding-top: 0px;  
        padding-left: 5px; 
        padding-right: 5px; 
        padding-bottom: 0px; 
        width: 100px;  
        height: 10px; 
        font-size: 15px; 
        font-weight: bold;} 

  .fancy-link:hover{ 
        color: #F44336;   
        padding-left: 10px;}
</style>

<html>
<a class="fancy-link" name="View" id="View"
  href="'||'https://XXXXXX-sb1.app.website.com/app/common/custom/custrecordentry.nl?
  rectype=142&id='||{internalid}||'"target="_blank">Check-In</a>
</html>

While this solution works well, my actual objective is to trigger a button click event/element at the specified URL (mentioned in the href attribute) without redirecting to that page. Is there a way to achieve this functionality? Any sample code snippets demonstrating this would be greatly appreciated.

 .<input type="button" style="" class="rndbuttoninpt bntBgT"value="Check-In" id="custpageworkflow157" name="custpageworkflow157"onclick="try{
    if (!!window) {
        var origScriptIdForLogging = window.NLScriptIdForLogging;
        var origDeploymentIdForLogging = window.NLDeploymentIdForLogging;
        window.NLScriptIdForLogging ='CUSTOMSCRIPT_STICK_USER_PREFERENCE';
        window.NLDeploymentIdForLogging= 'CUSTOMDEPLOY_STICK_USER_PREFERENCE';
    }
    try{
        NS.Workflow.buttonClick('custpageworkflow157');
    }
    catch(e){
        document.location = addParamToURL(addParamToURL(addParamToURL(document.location.href,'workflowbutton','157'),'workflowbuttoninstanceid','84083'),'workflowbuttonobsoletehandling','T');
    }
}
finally{
    if (!!window) {
        window.NLScriptIdForLogging = origScriptIdForLogging;
        window.NLDeploymentIdForLogging = origDeploymentIdForLogging;
    }
}
;
return false;
"onmousedown="this.setAttribute('_mousedown','T');
setButtonDown(true, false, this);
" onmouseup="this.setAttribute('_mousedown','F');
setButtonDown(false, false, this);
" onmouseout="if(this.getAttribute('_mousedown')=='T') setButtonDown(false,false, this);
" onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false, this);
" _mousedown="F">

Answer №1

To achieve this functionality, you can easily incorporate a basic event listener within the button element that you are constructing:

document.getElementById('customworkflow123').click();

In essence, the code structure would look something like this:

document.getElementById("Button").addEventListener("click", function(){
    document.getElementById('customworkflow123').click();
});

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

Automate the process of filling up and activating a bootstrap dropdown upon a click, and clearing it out when it is

Is there a method to reveal the dropdown content only upon clicking instead of displaying all content at once and increasing the lines of HTML code? Perhaps using an onclick attribute on the button and incorporating a function inside? var data = [{ " ...

Guide on how to incorporate an external javascript file into an HTML button

I am currently working on an exercise through Udacity that involves creating an HTML form with JavaScript functions. The task is to input text into the form, submit it, and have it displayed on the webpage within a blue square. This exercise is designed to ...

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

Locate a URL within a Java string and generate an HTML hyperlink tag

My string contains the following: content = "Hello world, visit this link: www.stackoverflow.com"; or content = "Hello world, visit this link: http://www.stackoverflow.com"; or content = "Hello world, visit this link: http://stackoverflow.com"; Now I ...

What is the best way to send user input text to a Vue method using v-on:change?

I am trying to pass the input value from my HTML to a Vue method called checkExist(). I need to get this value within the checkExist() method. Can anyone provide advice on how I can achieve this? I am new to Vue and could use some guidance. HTML: <inp ...

What is the most effective method to ensure this layout is functioning properly?

Seeking a solution to an unexpected challenge, what initially appeared as a simple task has transformed into a complex dilemma. Balancing the vertical alignment of green DIVs while preventing absolute positioned elements from overlapping following content ...

Is requesting transclusion in an Angular directive necessary?

An issue has cropped up below and I'm struggling to figure out the reason behind it. Any suggestions? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive(&apos ...

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

"The functionality of the personalized checkbox is not working as expected

Having an issue with my custom checkbox where only the first one gets selected when I select the bottom checkbox. I suspect it might be a styling problem, but I'm unsure. I've recreated the issue in a sandbox for you to check out: https://codesan ...

Tips for efficiently moving through divs in a personalized single page application?

Exploring the world of JS frameworks and single page app functionality is a bit of a mystery to me. Currently, I have a pseudo single page app set up without any specific framework in place. The setup involves 3 tabs that toggle visibility for 3 different ...

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

I am currently working on an html code and I am looking for a way to use java script in order to create a text area box only when the "Yes" radio button is selected. This text area should be hidden by default or when selecting "NO". <table class="tab ...

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

Issues with the alignment of columns using Bootstrap framework

I've created a design in Photoshop using the Bootstrap 12-column guide, but when I try to implement it using Bootstrap, the results are completely off. https://i.stack.imgur.com/vQwOt.png Here's my HTML code: <!DOCTYPE html> <html lan ...

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

As my web app runs on port number, I am looking to download some files in a specific section. However, the download file path is being prefixed with "". <a href={file_path} download={file_name}> <Button variant={"link"}> <b>Dow ...

Can you provide instructions on creating a small border at the center of an h1 heading?

What is the best way to create a small border in the center of an h1 text element? ...

Tips for assigning a string value to an <li> element with Jquery

I have a database table structured as follows: ID name aa1 Tom bb2 Jack cc3 Mike To display this data in an HTML format, I am using Ajax to pass the values. $.ajax({ ... success: function (data) { $.each(data, f ...

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

Tips for shrinking the circumference of a circle

Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...