如何创建一个表单来更改按钮的href url的一部分？
如何创建一个表单来更改按钮的href url的一部分？
提问于 2019-08-17 13:36:32
所以我想要有一个表单(像一个带有提交按钮的文本区或一些简单的东西)，它可以改变另一个按钮的链接的一部分(如下所示)。
此表单只会更改href链接的'receiveAddr‘部分(将"1313mainstreetlosangeles“更改为用户提交的地址)，但保持其他内容不变。
因此，仅根据用户提交的文本更改按钮中的href链接的一部分。
有什么方法可以做到这一点吗？
<a class="button" id="btn" href="https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com" target="_blank">Buy now</a>回答 4
Stack Overflow用户
回答已采纳
发布于 2019-08-17 13:59:00
合理的解决方案：
var changeForm = document.forms['changeBtn'],
regex = /receiveAddr=(.*?)&/;
changeForm.addEventListener('submit', function(e) {
e.preventDefault(); // Don't submit function
var form = e.target,
btn = document.getElementById('btn'),
href = btn.href,
textareaVal = encodeURIComponent(form.receiveAddr.value.trim());
btn.href = href.replace(regex, 'receiveAddr=' + textareaVal + '&');
});<form id="changeBtn">
<textarea name="receiveAddr"></textarea><br>
<input type="submit">
</form>
<a class="button" id="btn" href="https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com" target="_blank">Buy now</a>
解决方案过度杀伤力：
var changeForm = document.forms['changeBtn'],
regexFirstPart = /(.*)\?/;
changeForm.addEventListener('submit', function(e) {
e.preventDefault(); // Don't submit function
var form = e.target,
href = document.getElementById('btn').href,
firstPart = regexFirstPart.exec(href)[0],
urlParts = processQuery(href); // ends with ?
urlParts.receiveAddr = changeForm.receiveAddr.value;
btn.href = firstPart + objectToUrlParams(urlParts);
});
function processQuery(url) {
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while (match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
function objectToUrlParams(obj) {
var str = "";
for (var key in obj) {
if (str != "") {
str += "&";
}
str += key + "=" + encodeURIComponent(obj[key]);
}
return str;
}<form id="changeBtn">
<textarea name="receiveAddr"></textarea><br>
<input type="submit">
</form>
<a class="button" id="btn" href="https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com" target="_blank">Buy now</a>
Stack Overflow用户
发布于 2019-08-17 13:50:15
您将需要一个polyfill for IE
let url = new URL("https://url.com/v1/?type=buy&mode=popup&receiveAddr=1313mainstreetlosangelesca&receiveType=USD&callback=url.com");
let params = new URLSearchParams(url.search);
document.getElementById("btn").addEventListener("click", function(e) {
var addr = document.getElementById("addr").value.trim();
if (addr) {
params.set('receiveAddr', addr);
url.search = params.toString();
this.href=url;
console.log(url);
} else {
e.preventDefault();
document.getElementById("addr").focus();
alert("Please fill in an address");
}
});<input type="text" id="addr" />
<a class="button" id="btn" target="_blank">Buy now</a>
替代方案-请注意encodeURIComponent
document.getElementById("btn").addEventListener("click", function(e) {
var addr = document.getElementById("addr").value.trim();
if (addr) {
addr = encodeURIComponent(addr);
var url = `https://url.com/v1/?type=buy&mode=popup&receiveAddr=${addr}&receiveType=USD&callback=url.com`
this.href=url;
console.log(url);
} else {
e.preventDefault();
document.getElementById("addr").focus();
alert("Please fill in an address");
}
});<input type="text" id="addr" />
<a class="button" id="btn" target="_blank">Buy now</a>
Stack Overflow用户
发布于 2019-08-17 20:22:05
棘手的解决方案：
textarea=//your textarea
var value="";
if(textarea.value==null){
value="1313mainstreetlosangelesca";
}else{
value=textarea.value;
}然后将链接添加到文档：
link='<a class="button" id="btn" href="https://url.com/v1/?type=buy&mode=popup&receiveAddr='+value+'&receiveType=USD&callback=url.com" target="_blank">Buy now</a>';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57533563
复制相关文章
相似问题
腾讯云开发者
