Convert text into a clickable link

Question

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the specific number appended to it. In the case of an order number being entered, I'd like the form to redirect to: website.com/ordernumberfromform

However, I've encountered a challenge where I need the input to be formatted as simply website.com/ordernumberfromforminput. No id= or additional elements, just taking the value and adding it after the /. Unlike traditional validation checks, the URL will provide an error if the number is invalid. Simply inserting the text field's value at the end of the URL.

Has anyone faced a similar issue? It seems unnecessary to use JavaScript or server-side scripting for this task, making it more complicated than needed. Despite researching extensively, I am unable to find a solution. Any guidance is appreciated.

Shown below is a snippet of my code:

<div id="orderidfield">
<form action="https://www.website.com/" method="get" target="_blank">
<input type="search" name="orderNumber"/>
<!!-- Looking to have the order number posted to the URL (www.url.com/ordernumberthatisentered) without additional attributes, but struggling to achieve this due to the inclusion of an id and = sign -->
</form>
</div>

javascript php jquery html forms

Answer 1

Answer №1

Here's a solution that utilizes JavaScript and HTML exclusively: Your HTML:

<div id="orderidfield">
<input type="text" name="orderNumber" id="search"/>
    <button onClick="search()">Search</button>
</div>

And here is the accompanying script

<script type='text/javascript'> 
function search()
{
    var number=document.getElementById("search").value;
    window.open("http://www.url.com/"+number);
}

</script>

Feel free to check out the demo here: http://jsfiddle.net/piyushkmr/mEfmu/2/

Answer 2

Here's a solution that utilizes JavaScript and HTML exclusively: Your HTML:

<div id="orderidfield">
<input type="text" name="orderNumber" id="search"/>
    <button onClick="search()">Search</button>
</div>

And here is the accompanying script

<script type='text/javascript'> 
function search()
{
    var number=document.getElementById("search").value;
    window.open("http://www.url.com/"+number);
}

</script>

Feel free to check out the demo here: http://jsfiddle.net/piyushkmr/mEfmu/2/

Answer 3

Answer №2

I found a solution by creating a workaround using a different post form and dynamically changing the action with JavaScript

http://jsfiddle.net/vf9rb/1/

Below is a snippet of the HTML code:

<form id="oldform" action="www.example.com">
    <input type="search" name="orderNumber"/>
</form>

<form id="trueform" action="www.example.com" method="post">
</form>

<button type="button">Click Me!</button>

Here's the JavaScript used:

$(function() {
    $("button").click(function(){
        var orderValue = $("#oldform input").val();
        var oldAction = $("#trueform").attr("action");
        var newAction = oldAction + "/" + orderValue;
        $("#trueform").attr("action", newAction);
        $("#trueform").submit();
    });
});

Answer 4

I found a solution by creating a workaround using a different post form and dynamically changing the action with JavaScript

http://jsfiddle.net/vf9rb/1/

Below is a snippet of the HTML code:

<form id="oldform" action="www.example.com">
    <input type="search" name="orderNumber"/>
</form>

<form id="trueform" action="www.example.com" method="post">
</form>

<button type="button">Click Me!</button>

Here's the JavaScript used:

$(function() {
    $("button").click(function(){
        var orderValue = $("#oldform input").val();
        var oldAction = $("#trueform").attr("action");
        var newAction = oldAction + "/" + orderValue;
        $("#trueform").attr("action", newAction);
        $("#trueform").submit();
    });
});

Answer 5

Answer №3

One way to achieve the desired outcome is by assigning the text field to a variable and then executing the following code:

open.window(url)

This should provide you with the expected result.

Answer 6

One way to achieve the desired outcome is by assigning the text field to a variable and then executing the following code:

open.window(url)

This should provide you with the expected result.

Convert text into a clickable link

Answer №1

Answer №2

Answer №3

Similar questions

Insert an element into a JSON collection

Attempting to automatically invoke the API every minute, rather than relying on the user to reload the page

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

Display the value in Vue.js as a price format while maintaining it as an integer

Tips for implementing Bootstrap pagination in VueJS 2

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

Implement a formatter function to manipulate the JSON data retrieved from a REST API within the BootstrapVue framework

Retrieve the object filtered by a specific group from an array of data

How can you retrieve command line variables within your code by utilizing npm script in webpack?

Troubleshooting VueJS, Electron, and Webpack integration with Hot Reload feature

I am utilizing Vuex to store all of the product details and handle API request queries efficiently

How to show the raw image content-type using Vue.js

Transferring a Query between Domains with the Help of JavaScript

Is it possible to determine if an AJAX request is still ongoing when a user returns to a webpage using jQuery or JavaScript?

Add the URL link according to the specific domain name

Using ValidationGroup to trigger JavaScript calls from controls

What is the best way to include an "average" line in a nvd3.js Stacked Area Chart?

Angular JS - Establishing a Connection to Woocommerce OAuth v1

Exploring the World of Vue.js Object Imports