What is the best way to include an href link in my SharePoint button?

I styled some buttons with CSS, but now I want to add links to all of them. I've attempted using JavaScript to change the <button> tag to <input>, and also tried adding an onclick event in CSS like <button onclick="href">, but none of these methods seem to be working.

Here is an example HTML code for one of the buttons

<th> 
        <button class="img" type="button8"> 
           <p class="single">​ HR 
              <br/> </p></button>​​​ </th>

and here is the corresponding CSS style

[type=button8] {
            margin-top: 5px;
            marring-left: 5px;
            padding-left: 10px;
            width: 260px; 
            height: 155px;
            background: url('https://share.novartis.net/sites/ruphoncology/Shared%20Documents/00778_300dpi_RGB.jpg');
            background-size: cover;
            background-position: center;
            text-color: black; }

I am looking to have the buttons redirect users to another page when clicked. P.S This is all done on SharePoint Online using WebPart Editor

javascripthtmlcsssharepoint-2013sharepoint-online

Answer №1

Simply add the onclick attribute to your button:

<button onclick="location.href='https://www.google.com/';">Click</button>

Alternatively, you can utilize Javascript to set the attribute of the button:

document.getElementById('my_button').setAttribute("onclick", "location.href='https://www.google.com/';");

If you are using a form tag, you can submit it while changing the attribute of your button like so:

document.getElementById('my_button').setAttribute("onclick", "document.getElementById('my_form').action = 'https://google.com/'; document.getElementById('my_form').submit();");

Answer №2

In case you are utilizing a designer or content editor, consider visiting this link: https://www.url.com/';">Click Here

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

Troubleshooting AJAX hover functionality issue

Here is the content that loads through AJAX: <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title< ...

htmlajaxjquery

Prevent time from being structured into hours

In my app, I am successfully using Moment to format times. There is one instance where I need to count hours instead of converting it to a regular time format. The time format I am working with looks like this: 0:00:02 AM However, I am trying to remove t ...

javascriptmomentjs

Precautions when integrating three.js scenes into backbone.js models

Encountering issues while attempting to insert an instance of THREE.Scene into a Backbone.Model: var scene = new THREE.Scene(); new (Backbone.Model)(scene); This results in the following warnings: DEPRECATED: Object3D's .eulerOrder has been moved t ...

javascriptbackbone.jsthree.js

Conceal a specific div element using jQuery hide method based on its unique

I'm facing a challenge with this code snippet. I am dynamically generating elements on a webpage from an array: $cars = array("Volvo", "BMW", "Toyota"); foreach($cars as $item) { echo '<div class="column col-3" id="'.$item.'" ...

javascriptphphtmljquery

Load Vue components dynamically while also highlighting code previews and preserving the HTML structure

My goal is to dynamically load Vue components and have the component's HTML displayed as a code preview when it becomes visible. Currently, the code preview shows a single big string because I am using $el.innerHTML. What I want is for the structure ...

javascripthtmlvue.jsvue-componentcodemirror

What steps do I need to take in order to successfully make a checkbox?

I am attempting to use Angularjs to set a checkbox to true. When saved, it should store an integer value (1 or 0) in my field. Below is the code snippet for the view: <input type="checkbox" ng-model="lis.SMSPromotion" id="SMSPromotion" ng-init="checke ...

htmlangularjs

AngularJS - Establishing communication between controller and view

I am facing an issue with the Angularjs view. I seem to be making a mistake somewhere and I can't figure out where the problem lies. I hope someone can assist me with this. The problem is that {{user.login}} (userRepoInfo.html file) is not being call ...

javascriptangularjs

JavaScript - change image when clicked or hovered over

I have the knowledge to achieve this using jQuery, however, I am attempting to accomplish the following using traditional JavaScript. Can someone provide assistance: document.querySelectorAll(".thumbnail").forEach(function(elem) { elem.addEventListene ...

javascriptimagerollover

Error message displayed when refreshing a page using ngRoute: "Page cannot be found."

Having an issue with angularjs ngRoute for routing a single page application. When attempting to reload the page at localhost/about or localhost/blog, I receive an error message stating "Cannot GET /about". How can this be resolved? Below is my router con ...

javascriptangularjs

Transfer data in JSON format to the server using Ajax

Currently, I have an HTML form where I am in the process of creating a JSON object using JavaScript. Here is how it looks: var JSobObject= '{"name":"'+personObject.GetPersonName()+ '","about":"'+personObject.GetAbout()+ &ap ...

phpjavascriptajaxjson

Exploring the depths of ES6 with cascading promises

Currently grappling with a dilemma while working with promises - it's more of a Best Practice question. I have a function that returns a promise resolving into a validated object: validate(req.body, bodyValidationSchema) Another function creates an ...

javascriptnode.jsasynchronouspromise

Add the value of JQuery to an input field rather than a select option

Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...

htmljquery

Personalized CSS styling for Jquery Mobile version 1.3

Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...

jquerycssjquery-mobilejquery-mobile-navbar

Guide on creating a conditional column in a kendo UI grid with the use of AngularJS

Is there a way to dynamically add a column to the Kendo UI grid based on JSON data? Consider the following JSON input: [{ "ProductID": 1, "ProductName": "Chai", "Supplier": { "SupplierID": 1, "SupplierName": "Exotic Liquid ...

javascriptjqueryangularjskendo-uikendo-grid

ajax with names that are alike

I've set up a text input field that searches for file names on my server. However, it currently requires an exact match to display the file. I'm looking for a solution that can show me files even if the input text isn't an exact match. Here ...

javascriptjqueryhtmlajax

The property length is undefined and cannot be read

I'm currently utilizing a dexi.io robot for the purpose of automating data extraction from permit databases. This particular robot has the capability to process custom JavaScript in order to dissect the incoming JSON object. While this code does func ...

javascriptjsonrestparsing

Using a loop to iterate through a multidimensional array in Node.js or JavaScript, creating additional data and adding new key-value pairs

Here is an array of objects showcasing different intents and results : var finalresult = [{ "Date": "Wed Jan 15 2020 00:00:00 GMT+0530 (India Standard Time)", "data": [{ "intent": "delivery", "result": [{ "h ...

javascriptarraysnode.jsmultidimensional-array

Using Javascript to automate the organization of links based on predefined criteria is an

Picture This: A digital library full of categorized links, totaling 1000 in number. Diverse themes are covered by these links, making it a treasure trove of information. Displayed prominently at the top are buttons labeled ALL, MOBILE, CARS, BOOKS, and TE ...

javascriptajaxjquerydynamic

Changing the size of the Modal Panel in Ui Bootstrap for a customized look

Currently, I am in the process of developing an application that utilizes Ui bootstrap to seamlessly integrate various Bootstrap components with AngularJs. One of the key features I require is a modal panel, however, I found that the default size option &a ...

angularjscsstwitter-bootstrap

It appears that Wordpress is having trouble accurately mapping POST data

Let me explain the issue I am facing: I have a .php file embedded in my WordPress site that performs the following tasks: It contains a form that prompts the user to enter their NAME. Upon submitting the form, the data is posted to the same page (action ...

phphtmlwordpress