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

The try/catch block proves ineffective at handling a socket connection exception

What is the process for advancing to the next or previous step using Angular.js?

Creating a Node server exclusively for handling POST requests is a straightforward process

Looking to extract a specific field using Angular JS?

retrieve a compilation of all versions through the JIRA REST API

Ways to extract data from a JSON object

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

Using Ajax within a while loop

The hyperlink within the dropdown menu in HTML code is malfunctioning

Substitute the information in the table with new data

Critical bug discovered in fundamental Vue.js component by Internet Explorer

Exploring the world of jQuery AJAX requests by sending POST data to a PHP

Instructions for displaying typed chat messages on the screen using socket.io and node.js

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

Is storing HTML tags in a database considered beneficial or disadvantageous?

Why is the button missing from the codepen?

Calculator for calculating values using JavaScript data attributes

Incorporate validation features within a jQuery method

What steps should I take to turn off caching specifically for directory listings?