The hyperlink for pulling information from a form field to populate a signature template webpage is not functioning properly

I've been developing a signature template page for our company's Intranet and have successfully implemented it with almost satisfactory appearance.

My current challenge involves updating link information from my forms without altering the displayed text.

While I was able to modify the href, the issue arose when extra unnecessary information was added to the href.

To view my code, please follow this link: https://jsfiddle.net/kogcyb3z/

function updateSignature() {
  // Code here to retrieve data and update signature elements
}
.signature-template {
  // CSS styles for the signature template page
}

.input-field {
  // CSS styles for input fields in the form
}

.preview-info {
  // CSS styles for the preview section of the signature
}
<h2 class="sig-header">Your Information</h2>
// HTML structure for input fields, labels, and preview section

    <button class="update-button" onclick="updateSignature()">Update Signature</button>

Your assistance on this matter would be highly valued. Thank you!

Answer №1

It seems like you are anticipating a URL in this particular format:

https://google.sharefile.com/r-rdf834da7a8149478

to be included in the sharefile link.

Your current code only inserts the exact input from the form field, causing it to display incorrectly when hovered over as the browser interprets it as a URI relative to the current page.

To fix this issue, update your code to the following:

var sigval = document.getElementById("sig-sharefile").value;
sigval = 'https://google.sharefile.com/' + sigval;
document.getElementById("sFile").href = sigval;

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

The carousel is having trouble aligning the images div to the center

Struggling to create a carousel slide that automatically resizes image, but can't seem to get the inner div containing the images to center within the outer div. Even after trying various CSS properties like text-align:center and margin-left: auto, th ...

PHP: The issue with displaying array values in an HTML select within a form using a foreach loop

I am currently working with an array containing a list of countries. $country_list = array( "Afghanistan", "Albania", "Algeria", "Andorra", "Angola" }; I want to display these countries using a select element in my form <select ...

Exploring the Modularity of Post Requests with Node.js, Express 4.0, and Mongoose

Currently, I am immersed in a project that involves utilizing the mean stack. As part of the setup process for the client-side, I am rigorously testing my routes using Postman. My objective is to execute a post request to retrieve a specific user and anot ...

Utilizing AJAX and PHP to Showcase Data

Instructions for program flow: 1. When the page loads, the chart will display the total sales from all branches. 2. Upon selecting a specific branch from the dropdown menu, the chart should show the total sales for that particular branch. I am encounterin ...

The Django CSRF token is inaccessible for retrieval

I'm in the process of developing a website using Vue.js for the frontend and Django for the backend. I've made sure to include the csrf token in every request from the frontend to the backend to prevent any 403 Forbidden errors. All requests are ...

Choose a checkbox by targeting a specific column value with XPath

While automating the testing with Selenium, I encountered an issue related to selecting a checkbox in a table row. To resolve this problem, I turned to XPath for assistance. Specifically, I needed to choose the row based on the file name. Below is the rele ...

Develop an event that simultaneously detects both the onload and change actions

Is there a way to make this code run when the checkbox is checked and also on page load to check if it needs to expand the hidden section? $(document).ready(function () { $('#hasContractorFlag').on('change', function () { i ...

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...

What causes the lack of upward movement for a div element when the div above it is floated to the left?

Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...

Export Option in Bootstrap Table Plugin

I've been utilizing the plugins from to add search functionality, pagination, and sorting features to a table on my HTML page. Everything is working smoothly except for the export function. After searching through forums for hours, I came across sug ...

Error: The geoNear command was unsuccessful due to the presence of multiple 2d indexes

My goal is to fetch documents from a collection based on distance. I attempted to utilize the $geoNear aggregation, but encountered errors (while using node.js and Postman) or received zero records as output. Example Document: { "_id" : ObjectId("5cc ...

Unable to load module/controller file from Angular 1 into view/html

var app = angular.module("appModule",[]); app.controller("viewController",function($scope){ $scope.greeting = "Welcome to the future"; }); <html> <head> <script src="Scripts/script.js"></script> <script ...

best practices for sending multiple requests using node js

I have a list of 4 URLs, each containing JSON data. How can I iterate through these URLs? Example: URLs = [ "", "", "", ""]; Each URL contains JSON data for one student as follows: { date: 08/05/2014 stude ...

Is there an issue with this npm version number?

I am trying to include the following dependency in the package.json file of my npm package: "redux-saga": "^1.0.0-beta.0 || ^0.16.0"`. When I install this package in a project that already has "redux-saga": "^1.0.0-beta.1 I am expecting npm/yarn to on ...

Refresh the screen with modifications from the Model using Ajax Post through a javascript function

I am using Ajax to update the model value in my application and I need help showing this new value in the view. Below is the code snippet where I call a method called GetText to update the model value. How can I display the updated model value in the HTML ...

Embed the variable directly within the JSON structure

My goal is to dynamically create a JavaScript object using object initializer notation, but with keys taken from a config object. Instead of the traditional method: var obj = { 'key' : 'some value' }; I envision something like this: ...

The JSON data is not displaying in the correct format

My current issue involves using AJAX to write JSON files, but the file display format is incorrect. AJAX: $.ajax ({ type: "GET", dataType : 'json', contentType: "application/json", async: false, ...

Adding numerous objects to a Vuex store using mutations

I am currently working with the following store setup: import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ plugins: [createPersistedState()], state: { ...

What are the steps to implement THREE.MeshLine in my JavaScript project?

While exploring ways to create a line using three.js with a modified width, I stumbled upon this article suggesting the usage of a THREE.MeshLine class available here. However, when I attempted to follow the documentation to implement it in my script, I en ...

Leveraging nested objects within React state

A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...