Exchanging link as input text

Question

I need to create a input text that, as I enter a quantity, it changes the link of a button, but only a part of the link.

For example, I have this link:

https://sterilair.vtexcommercestable.com.br/checkout/cart/add?sku=17&qty=1&seller=1&sc=1

I want that whenever the person puts 1,2,3,4... in the input it changes the value qty=1 from the link the person will click to below.

Answer 1

Yes, it is possible. You will use the event change to do this.

$(document).ready(function(){
    $("#qty").change(function(){
       val = $(this).val();
       newURL = "https://sterilair.vtexcommercestable.com.br/checkout/cart/add?sku=17&qty=" + val + "&seller=1&sc=1";
      // alert(newURL);
       $(".log").append("URL trocada para:<br>"+newURL+"<br>");
       $(".url").attr({href:newURL});
    });
});

.log{
  height: 400px;
  overflow: auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="qty" id="qty" type="number" />

<a class="url" href="https://sterilair.vtexcommercestable.com.br/checkout/cart/add?sku=17&qty=1&seller=1&sc=1">UFL</a>

<div class="log"></div>

Thus, whenever the amount is exchanged, the URL shall be changed to the inserted quantity.

Answer 2

You can do this with jQuery. For example:

Quantidade: <input type="text" name="qtd"><br>
<input id="botao" type="button" value="Go to Google" />

<script>
$("#botao").click(function() {
    location.href= "https://sterilair.vtexcommercestable.com.br/checkout/cart/add?sku=17&qty="+ $("#qtd").val() +"&seller=1&sc=1"
});
</script>

Note that according to what is filled in input, the jQuery script will form the URL.

Answer 3

Possible is, after all, in the computer system everything is possible until proven otherwise. Follow the solution below:

$("div#div_do_link #input_link").keyup(function() {
  var value = this.value;
  if (value) {
    var link = "https://sterilair.vtexcommercestable.com.br/checkout/cart/add?sku=17&qty=" + value + "&seller=1&sc=1";
    $('div#div_do_link a#ancora_link').attr('href', link);
  }
})

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div id="div_do_link">
  <input type="text" name="input_quantidade" id="input_link" />
  <!-- Ancora-->
  <a href="" id="ancora_link">Link</a>
</div>