Link is cut after question mark in dynamic php table - php

Question

I have a PHP dynamic table, and when I click on one of my link (http://www.xxxxxx.com/?r=xxxxxxxxx), the link open in a new tab and it's cut after the question mark (?), like www.xxxxxx.com/?.
Here is the table php code:
echo '<div class="row"><tr>';
echo '<td><form action='.$data['referral'].'>
<input class="btn" type="submit" formtarget="_blank" value='.$data['webadress'].' data-value='.gmdate("H:i:s",($data['timer']*60+60)).' data-start="false"></form></td>';
echo '<td>Now</td>';
echo '<td>'.$data['timer'].'</td>';
echo '<td>'.$data['payout'].'</td>';
echo '</tr></div>';
In my database, the $data['referral'] are my www.xxxxxx.com/?r=xxxxxxxxx link's.
I think is the type or something in my database option is wrong, so it cut after the question mark. Now I'm on varchar(255) and latin1_general_ci.
EDIT: I have put an input because I need store data for a timer, here is the JS:
$(window).load(function(){
var row = document.getElementsByClassName("color");
function toTimeString(seconds) {
return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}
function redColor(element) {
$(element).css('background-color', 'rgba(255,0,0,0.7)');
}
function normalColor(elemen) {
$(element).css('background-color', 'transparent');
}
$('.btn').on('click', startTimer);
function startTimer() {
var dataStartElem = $(this);
var dataStart = dataStartElem.attr('data-start');
if (dataStart === 'false') {
dataStartElem.attr('data-start', 'true');
var nextElem = dataStartElem.parents('td').next();
var duration = dataStartElem.attr('data-value');
var a = duration.split(':');
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
setInterval(function () {
seconds--;
if (seconds >= 0) {
nextElem.html(toTimeString(seconds));
redColor(nextElem);
}
if (seconds === 0) {
nextElem.html('Now');
dataStartElem.attr('data-start', 'false');
clearInterval(seconds);
normalColor(nextElem);
}
}, 1000);
}
}
});
This JS, start the timer and put it in red, and after the "now" appear when is finish.

Answer 1

By using a GET form, you override the query part of the action. Either convert your form to a normal link, or put the query part of the URL in a hidden input.

Answer 2

As #Otto said, try to do it in way near to this:
echo '
<div class="row">
<tr>
<td>
' . htmlspecialchars($data['webadress']) . '
</td>
<td>Now</td>
<td>' . $data['timer'] . '</td>
<td>' . $data['payout'] . '</td>
</tr>
</div>
';

Answer 3

Here is the solution, thanks to all have help me to figured out: i think it's the form who dont take "?" on link, so i have changed it to a normal link and here we go.
echo '<div class="row">
<tr>
<td>
<a href="'.$data['referral'].'" target="_blank">
<input type="submit" value="'.htmlspecialchars($data['webadress']).'" data-value="'.gmdate("H:i:s", ($data['timer'] * 60 + 60)).'" data-start="false" class="btn" formtarget="_blank">
</a>
</td>
<td>Now</td>
<td>'.$data['timer'].'</td>
<td>' . $data['payout'] . '</td>
</tr>
</div>';