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內容

回答

相關問題