CODEWITHSUNDEEP
javascripthtml
rimboche
rimboche

Reputation: 87

HTML Button - How to dynamically change url content

I am trying to change values in a button's URI to input texts values.

<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: Trying to concatenate values enter in both input

JS:

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

It does not work as expected. How can I solve this?

Upvotes: 1

Views: 2498

Answers (4)

Thielicious
Thielicious

Reputation: 4452

Just an alternative, it's cleaner

const getNumber =()=> {
    let val =id=> document.querySelector(id).value
    console.log('myserver://send?phone='+val('#cnt')+val('#wano'))
}
//console or location.href
<div class="numcontainer">
   <input required id="cnt" type="text" placeholder="ISD">
   <input required id="wano" type="number" placeholder="Enter number">
</div>
<input type="button" name="gowa" id="btngo" onclick="getNumber()" value="Go!">

onChange is quite unnecessary.

Upvotes: 1

Tanvir Hossain
Tanvir Hossain

Reputation: 97

Change your input type like this type="nummber" or type="text" for getting number or text only 

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

You can add click event to your button like this.

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

Upvotes: 0

Dima Melnik
Dima Melnik

Reputation: 884

You should use simple

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

instead of

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

To change link use this:

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

Upvotes: 0

Soolie
Soolie

Reputation: 1797

You cannot have a href attribute for a button. You need to change the onclick attribute here:

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

It's always better to have it split like this:

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

Upvotes: 1

Related Questions