将文本框值以变量的形式附加到链接，而无需使用提交按钮

Question

I was wondering how it would be possible to attach an HTML form's text box value to a link. For instance, I have 3 links and each link goes to a different PHP file, however, I need to pass a variable. Because of the design of my page, I cannot use buttons. So, I created a form with a text field. How do I send that Text Fields value with the links?

EG:

<form>
<input type="text" name="test1" id="test1"></input></form>

<a href=index.php?id=$test1">Link 1</a>
<a href=index2.php?id=$test1">Link 2</a>
<a href=index3.php?id=$test1">Link 3</a>

I hope this makes sense as to what I am trying to do.

EDIT:

I tried to do this dynamically, but:

OK, I made a function like this:

 <script> 
function awardcode()
{ var awamount = document.getElementById("awardamount"); 
document.write('<?php $awardvar = ' + awamount.value + '; ?>');  
}; 
</script> 

Then, I made the link via PHP that looks like this:

echo '<a id=awlink3 name=awlink3 href="index.php?siteid=gmaward&type=xp&post=' . $posts_row['posts_id'] . '&handle=' . $posts_row['handle'] . '&varamount=' . $awardvar . '">Award XP</a>';

However, that didn't work. This is my input box code:

<form><input type=text name='awardamount' id='awardamount' onchange='awardcode()' style:'width:10px;'></form>

When I put the number and then tab, it loads an empty page.

How can I adjust that?

Answer 1

You'll need to dynamically change the link using JavaScript. Here's one approach:

$('a').on('click',function(e) {
  e.preventDefault();
  var url = $(this).attr('href').split('$')[0];
  window.location = url + $('#test1').val();
});

But it might be better to add an onchange event to the textbox itself, so that the HREF changes instantly and the user can see the intended destination on mouseover:

$('#test1').on('change', function () {
  var val = $(this).val();
  $('a[href*=\\?id\\=]').each(function (i, el) {
    $(el).attr('href', function (j, str) {
      return str.split('?')[0] + "?id=" + val;
    });
  });
});