[SOLVED] Open a Link with a variable that was provided by a HTML Form

Open a Link with a variable that was provided by a HTML Form

I want to Create a Form, that when its Submitted opens a link with a Variable which is the Input from the Textfield of the Form.

Here is an example:

<form onsubmit=<a href="http://www.link.xx?123&456&input=$UserInput target"_blank">
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>

I do not need a Solution to get this exact example to work. All I want is:

The User Puts Something in The Form and presses the Submit Button. With Pressing the Submit Button the Browser opens The Link i provide with the Input as a Part of the Link.

In real life it means i want to use a Teamspeak Join Link with the username which the user has provided in the Form.

This is the Link that has to be Modified at the end with the username

ts3server://serverip?port=11&password=123&nickname=!Input from the Form!

I hope there is a better Way than the way i use at the moment:

form.html =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="200" id="LayoutBereich5" style="background-attachment: fixed; border: 1px solid rgb(179,0,180); margin: 1px; height: 50px;" >
<tr align="center" valign="top">
<td>

<form action="startts3.php" method="post">
<p>Namen bitte anpassen:
<p><input type="text" name="name" value="InGameName|RealName"/></p>
<p><input type="submit" value="Verbinden" /></p>

</td>
</tr>
</table>
</center>
</body>
</html>

startts3.php =

<?php
$name = $_POST["name"];
header("Location: ts3server://serverip?port=11password=123&nickname=$name"); 
exit;
?>

Solution

You can try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p><input type="text" name="name" value="UserInput"/></p>
  <p><input type="submit" value="Verbinden" /></p>
</form>
<script>
  $("form").submit(function(event) {
    event.preventDefault();
    window.location.href = "ts3server://serverip?port=11&password=123&nickname=" + $("input[name=name]").val();
  });
</script>

It doesn't actually submit the form: JavaScript takes over and opens it by itself.

EDIT As per request, I've included the JS alongside the HTML to show how it can be used.