如何根据表单中的输入字段动态更改链接?例如,如果我在输入字段中输入1.00
,我想将链接更改为:
donate.php?amount=1.00
其中金额更改为输入字段中指定的金额。
我猜它的JavaScript,这不是我的强项,但任何帮助将是了不起的。:)
谢谢
标记:
<input type="text" id="amount" onkeyup="changeLink(this);" />
<a href="donate.php?amount=0.0" id="donateLink"> donate now! </a>
Javascript: function changeLink(inputElement)
{
$('#donateLink').attr("href","donate.php?amount="+inputElement.value);
//console.log($('#donateLink').attr("href"));
}
这可以通过html表单完成:
<form action="donate.php" method="GET" id="donateform">
<input type="text" name="amount" />
<input type="submit" value="Donate" />
</form>
你也可以通过下拉列表输入,这样他们就不会输入无效的值。或者您可以使用javascript验证输入。要使用链接提交表单,可以使用javascript:
<a href="javascript:document.forms['donateform'].submit();">Donate</a>
您不需要做任何事情,只需使用表单。通过对表单使用GET方法并将输入字段命名为"amount",在表单提交时就已经添加到URL中了。当您在框中输入1.00
时,请继续尝试提交表单。当页面加载时,您的URL将像预期的那样是donate.php?amount=1.00
。URL不需要修改。
如果您使用POST,我只建议不要这样做。