将文本框值以变量的形式附加到链接，而不使用提交按钮 [英] Attaching textbox value to a link in the form of a variable without using submit button

问题描述

我想知道如何将HTML表单的文本框值附加到链接上。例如，我有3个链接，每个链接转到不同的PHP文件，但是，我需要传递一个变量。由于我的页面设计，我不能使用按钮。所以，我创建了一个带有文本字段的表单。如何发送文本字段值与链接？

EG：

 <形式> 
< input type =textname =test1id =test1>< / input>< / form> 
 
< a href = index.php？id = $ test1>链接1< / a> 
< a href = index2.php？id = $ test1>链接2< / a> 
   

我希望这对我正在尝试做什么有意义。

编辑：

我试图动态地做到这一点，但：

好的，我做了这样的功能：

<$ p $
函数awardcode（）
{var awamount = document.getElementById（award）;
document.write（'<？php $ awardvar ='+ awamount.value +';？>'）;
};
< / script>

然后，我通过PHP创建了如下链接：

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

然而，这并不奏效。是我的输入框代码：

 < form><输入类型=文字名称='awardamount'id ='awardamount' onchange ='awardcode（）'style：'width：10px;'>< / form> 
  

当我把这个数字，然后选项卡，它加载一个空的页面。

我该如何调整？

（'click'，function（e）{
e.preventDefault（）;
var url = $（this）.attr（'href'）。 （'$'）[0];
window.location = url + $（'＃test1'）。val（）;
}）;

但是，将 onchange 事件添加到文本框本身可能会更好，以便HREF更改立即，用户可以在mouseover上看到预期的目的地：

$（$＃
$ b

  $（'＃test1'）。on（'change'，function（）{
 var val = $（this）。 VAL（）; 
 $（'a [href * = \\？id\\ = =''。）each（function（i，el）{
 $（el）.attr（'href' ，函数（j，str）{
 return str.split（'？'）[0] +？id =+ val; 
}）; 
}）; 
}）; 
  

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?

解决方案

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;
    });
  });
});

这篇关于将文本框值以变量的形式附加到链接，而不使用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！