HTML Button - How to dynamically change url content

Question

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?

Thielicious · Accepted Answer · 2018-05-31 11:14:40Z

1

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.

edited May 31, 2018 at 11:14

answered Oct 18, 2017 at 12:21

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rimboche Over a year ago

what's el here?

Thielicious Over a year ago

It's the parameter for the element, sec I'll edit to 'id', better

Soolie · Accepted Answer · 2017-10-18 11:13:24Z

1

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

answered Oct 18, 2017 at 11:13

Soolie

1,77211 silver badges21 bronze badges

3 Comments

rimboche Over a year ago

oops !! I have a problem again .. I works only for first time when I refresh the page and put another number it shows NumberPlaceholder instead of actual input number

Soolie Over a year ago

@rimboche Awesome. Can you make a minimal reproducible example so that I can look into it well?

rimboche Over a year ago

For exampple, I put a number for the first time and when I click the button it will work as expected but when I go back and put another number in the text field the method not taking given number

Dima Melnik · Accepted Answer · 2017-10-18 11:17:34Z

0

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'

answered Oct 18, 2017 at 11:17

Dima Melnik

87410 silver badges23 bronze badges

Comments

Tanvir Hossain · Accepted Answer · 2017-10-18 11:27:57Z

0

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

answered Oct 18, 2017 at 11:27

Tanvir Hossain

10713 bronze badges

Collectives™ on Stack Overflow

HTML Button - How to dynamically change url content

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related