HTML-Button - Wie URL-Inhalt dynamisch ändern

Question

Ich versuche, Werte in einer Schaltfläche URI zu ändern, um Textwerte einzugeben.

<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: Der Versuch, Werte in den beiden Eingangs

JS eingeben verketten: Es funktioniert nicht wie erwartet

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

. Wie kann ich das lösen?

Answer 1

nur eine Alternative, es ist sauberer

<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 völlig unnötig ist. fiddle

Answer 2

Sie können kein href Attribut für eine Schaltfläche haben. Sie müssen hier die onclick Attribut ändern:

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

Es ist immer besser, wenn es wie folgt aufgeteilt:

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

Answer 3

sollten Sie einfach verwenden

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

statt

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

Link verwenden, um diese zu ändern:

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

Answer 4

Ihre Eingabetyp ändern wie diese type="nummber" oder type="text" für immer Nummer oder Text nur

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

Sie können Click-Ereignis auf Ihre Schaltfläche wie folgt hinzufügen.

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