HTML按钮 - 如何动态更改url内容

我正在尝试更改按钮的URI中的值以输入文本值。HTML按钮 - 如何动态更改url内容

<div class="numcontainer"> 
    <input required="required" onchange="getNumber()" id="cnt" type="input" name="input" placeholder="ISD"> 
    <input required="required" onchange="getNumber()" id="wano" type="input" name="input" placeholder="Enter number"> 
</div> 
<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>

NumberPlaceHolder：试图串连值输入两种输入

JS：

function getNumber() { 
    document.getElementById('btngo').href.replace("NumberPlaceHolder",document.getElementById('cnt').value+document.getElementById('wano').value); 
}

预期它不工作。我该如何解决这个问题？

来源

2017-10-18 rimboche

只是一种选择，它的清洁

<div class="numcontainer"> 
    <input required id="cnt" type="text" placeholder="ISD"> 
    <input required id="wano" type="number" placeholder="Enter number"> 
</div> 
<input type="submit" name="gowa" id="btngo" onclick="getNumber()" value="Go!">

function getNumber() { 
    var val = (id) => { 
     return document.getElementById(id).value; 
    } 
    location.href ='myserver://send?phone='+val('cnt')+val('wano'); 
}

onChange是完全没有必要。 fiddle

来源

2017-10-18 12:21:48 Thielicious

这里是什么'el'？ – rimboche

这是元素的参数，秒我会编辑'ID'，更好 – Thielicious

完美！它按我的预期工作！ – rimboche

按钮的属性不能有href。您需要在此更改onclick属性：

function getNumber(){ 
    document.getElementById('btngo').setAttribute("onclick", document.getElementById('btngo').getAttribute("onclick").replace("NumberPlaceHolder", document.getElementById('cnt').value+document.getElementById('wano').value)); 
}

它总是最好把它拆分这样的：

function getNumber(){ 
    curOnclick = document.getElementById('btngo').getAttribute("onclick"); 
    wanoValue = document.getElementById('cnt').value+document.getElementById('wano').value; 
    newOnclick = curOnclick.replace("NumberPlaceHolder", wanoValue); 
    document.getElementById('btngo').setAttribute("onclick", newOnclick); 
}

来源

2017-10-18 11:13:24 Soolie

oops !!我再次遇到了问题..我只在第一次刷新页面时使用了另一个数字，它显示的是NumberPlaceholder，而不是实际输入的数字 – rimboche

@rimboche太棒了。你可以做一个[mcve]，以便我可以好好研究一下吗？ – Soolie

为了验证，我第一次输入了一个数字，当我点击按钮时它将按预期工作，但是当我回去并在文本字段中输入另一个数字时，方法没有给出 – rimboche

您应该使用简单

<a href="myserver://send?phone=NumberPlaceHolder"></a>

代替

<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>

若要更改链接使用此：

document.querySelector('.start a').href = 'my-new-address'

来源

2017-10-18 11:17:34

更改您的输入型这样type="nummber"或type="text"对于只得到

<input required="required" onchange="getNumber()" id="cnt" type="nummber" placeholder="ISD"> 
<input required="required" onchange="getNumber()" id="wano" type="number" placeholder="Enter number">

您可以点击事件添加到您的按钮，这样的数字或文字。

function getNumber(){ 
    document.getElementById("btngo").onclick = function() { 
     var ll = "myserver://sendphone="+document.getElementById('cnt').value+document.getElementById('wano').value; 
     console.log(ll); // checking url in console. 
     location.href = ll; 
    }; 
}

来源

2017-10-18 11:27:57

HTML按钮 - 如何动态更改url内容

回答

相关问题