What steps do I need to take to build this jump page?

Question

What steps do I need to take to build this jump page?

Disclaimer: I have very little experience with coding. As a self-taught graphic designer, I have only managed to create a simple page that helps me store common phrases I use frequently throughout the day. It was quite a challenge for me.

I am currently working on a project where users can input text into a field, which will then be applied to predefined URLs linked to buttons that direct them to specific pages. For a visual reference, please check out this image: https://i.sstatic.net/ZplRK.jpg

I have attempted to modify some scripts for similar functionalities, but unfortunately, I haven't had much success. (You can find these examples below before my modifications). I'm including them here to see if I am headed in the right direction at all. I anticipate running into issues with multiple functions eventually?

<script type="javascript">
function goToPage(var url = '')
{
    var initial = "http://example.com";
    var extension = "html";

    window.location(initial+url+extension);
}
</script>

<form name="something" action="#">
Label <input type="text" name="url" value="" onchange="goToPage(this.value)">
</form>

<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails";
var extension = "";

window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">

This is my current progress. I am tired of manually typing out lengthy URLs all day at work and making mistakes half the time. I'm unsure whether the solution lies in Javascript, HTML, or CSS. I want to explore a do-it-yourself solution before considering hiring someone to develop it for me. However, I am also uncertain about how to go about hiring someone for such tasks, but that's a question for another time.

Thank you for any assistance provided, and I apologize for any seemingly naive questions.

javascript html jquery css

Answer 1

Answer №1

One way to implement this functionality is by using the code snippet below:

// locate the input element
const inputField = document.getElementById("cmsId");

// find all the links that need updating based on the input value
const linksToUpdate = document.querySelectorAll("a");

// create an event listener to track changes in the input field
inputField.addEventListener("input", (event) => {
  // retrieve the current value from the input field
  const textValue = event.target.value;

  // loop through each link and update the displayed text and href attribute accordingly
  // the base URL for each link is stored as a data attribute
  linksToUpdate.forEach((link) => {
    const baseUrl = link.dataset.url;
    const updatedUrl = baseUrl + textValue;

    link.innerText = updatedUrl;
    link.href = updatedUrl;
  });
});

<!-- Simply use an input element without the need for a form -->
<div>CMS ID: <input id="cmsId" type="text" /></div>

<div>
  <!-- Instead of buttons, anchor elements work effectively -->
  <a
    id="main"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewclientdetails/"
  >
    https://cmss.company.com/client/viewclientdetails/
  </a>
</div>
<div>
  <a
    id="notes"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewnotes/"
  >
    https://cmss.company.com/client/viewnotes/
  </a>
</div>
<div>
  <a
    id="docs"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/documentsall/"
  >
    https://cmss.company.com/client/documentsall/
  </a>
</div>
<div>
  <a
    id="activity"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewactivityledger/"
  >
    https://cmss.company.com/client/viewactivityledger/
  </a>
</div>

Answer 2

One way to implement this functionality is by using the code snippet below:

// locate the input element
const inputField = document.getElementById("cmsId");

// find all the links that need updating based on the input value
const linksToUpdate = document.querySelectorAll("a");

// create an event listener to track changes in the input field
inputField.addEventListener("input", (event) => {
  // retrieve the current value from the input field
  const textValue = event.target.value;

  // loop through each link and update the displayed text and href attribute accordingly
  // the base URL for each link is stored as a data attribute
  linksToUpdate.forEach((link) => {
    const baseUrl = link.dataset.url;
    const updatedUrl = baseUrl + textValue;

    link.innerText = updatedUrl;
    link.href = updatedUrl;
  });
});

<!-- Simply use an input element without the need for a form -->
<div>CMS ID: <input id="cmsId" type="text" /></div>

<div>
  <!-- Instead of buttons, anchor elements work effectively -->
  <a
    id="main"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewclientdetails/"
  >
    https://cmss.company.com/client/viewclientdetails/
  </a>
</div>
<div>
  <a
    id="notes"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewnotes/"
  >
    https://cmss.company.com/client/viewnotes/
  </a>
</div>
<div>
  <a
    id="docs"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/documentsall/"
  >
    https://cmss.company.com/client/documentsall/
  </a>
</div>
<div>
  <a
    id="activity"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewactivityledger/"
  >
    https://cmss.company.com/client/viewactivityledger/
  </a>
</div>

Answer 3

Answer №2

Your code currently focuses on the "main" button, which directs to viewclientdetails. An important correction is to add a "/" after var initial. By extending this functionality to other buttons, you can achieve the desired outcome:

<script type="text/javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails/"; //Include the slash 

var extension = "";

window.location(initial+url+extension);
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO"> //Ensure there are 4 buttons

Avoid using an input type="submit" since four buttons are required. Instead, assign onClick functions for each button to specify the redirect URL based on user input.

The following example demonstrates how this can be achieved:

    <script type="text/javascript">
    function onMainButtonClicked()
    {
    var cmsid= document.getElementById("cmsID").value;
    var initial = "https://cms.example.com/client/viewcasedetails/"; //Include the slash 
    
    var extension = "";
    
    window.location(initial+cmsid+extension);
    }
    function onNotesButtonClicked()
    {
    ...
    }
    function onDocsButtonClicked()
    {
    ...
    }
    function onActivityButtonClicked()
    {
    ...
    }
    </script>
    <TITLE>Redirect 1</TITLE>
    <BASE HREF="https://cms.example.com/client/viewcasedetails">
    </HEAD>
    <BODY>
    <P>
    <FORM name="jump" action="#">
    CMS ID:
    <INPUT type="text" id="cmsID" name="url" value="">
    <button onclick="onMainButtonClicked()">Main</button>
    <button onclick="onNotesButtonClicked()">Notes</button>
    <button onclick="onDocsButtonClicked()">Docs</button>
    <button onclick="onActivityButtonClicked()">Activity</button>

While there are more advanced methods available, this simple implementation serves its purpose effectively.

Answer 4

Your code currently focuses on the "main" button, which directs to viewclientdetails. An important correction is to add a "/" after var initial. By extending this functionality to other buttons, you can achieve the desired outcome:

<script type="text/javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails/"; //Include the slash 

var extension = "";

window.location(initial+url+extension);
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO"> //Ensure there are 4 buttons

Avoid using an input type="submit" since four buttons are required. Instead, assign onClick functions for each button to specify the redirect URL based on user input.

The following example demonstrates how this can be achieved:

    <script type="text/javascript">
    function onMainButtonClicked()
    {
    var cmsid= document.getElementById("cmsID").value;
    var initial = "https://cms.example.com/client/viewcasedetails/"; //Include the slash 
    
    var extension = "";
    
    window.location(initial+cmsid+extension);
    }
    function onNotesButtonClicked()
    {
    ...
    }
    function onDocsButtonClicked()
    {
    ...
    }
    function onActivityButtonClicked()
    {
    ...
    }
    </script>
    <TITLE>Redirect 1</TITLE>
    <BASE HREF="https://cms.example.com/client/viewcasedetails">
    </HEAD>
    <BODY>
    <P>
    <FORM name="jump" action="#">
    CMS ID:
    <INPUT type="text" id="cmsID" name="url" value="">
    <button onclick="onMainButtonClicked()">Main</button>
    <button onclick="onNotesButtonClicked()">Notes</button>
    <button onclick="onDocsButtonClicked()">Docs</button>
    <button onclick="onActivityButtonClicked()">Activity</button>

While there are more advanced methods available, this simple implementation serves its purpose effectively.

What steps do I need to take to build this jump page?

Answer №1

Answer №2

Similar questions

Strange occurrences observed on array mapping post-state alteration

Can Hapi-Joi validate a payload consisting of either an Array of objects or a plain Javascript object?

What could be causing the malfunction of material-UI Tabs?

What is the best way to add data to my collection using the main.js file on the server side in a Meteor application

Display two separate views or templates on the screen using AngularJS

Building a drop-right menu with Bootstrap within a dropdown menu - a step-by-step guide

Issue arising from CSS and div elements

I'm encountering an issue with the React state where it seems to be endlessly nesting

Trouble with font sizing in a single line

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

How can you generate a "Package Contains Lower Node Version" error message during the installation of an NPM package if the node version is higher than the current system's node version?

Send an Ajax request to the controller and retrieve a file to display in an iframe

Deleting multiple subdocuments and their related subdocuments with Mongoose

Employ jquery to exclusively add either a beginning tag or closing tag

What is the best way to manage adding and removing table rows in Laravel while also incorporating a dropdown list?

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

Steering clear of repeating evaluations and dynamically unloading objects requested with `require` is important

The functionality of the AJAX Script is failing to load properly on mobile devices

Tips for enabling file uploads with the same name using jQuery.filer

What could be the reason my Backbone view is failing to render?