Generate a class btn link from an input

0

I am trying to generate a link (preferably a button) that is generated dynamically with the content of an input, I think I have gone far by modifying jquery codes.

The link I want is a url like this: "index.php? order_of_purchase=" to which a number "index.php? order_of_purchase = 900" is concatenated

    
   var $el = $("#url"),
    url = $el.val();
     
    var $orden_de_compra = $("#orden_de_compra"),
url2 = $orden_de_compra.val();

$el.replaceWith( $("<a />").attr({"href" : url+url2,"target":"_blank"}).html("Buscar") );
    
    $("#orden_de_compra").change( function(){
        
           var $el = $("#url"),
    url = $el.val();
     
    var $orden_de_compra = $("#orden_de_compra"),
url2 = $orden_de_compra.val();

$el.replaceWith( $("<a />").attr({"href" : url+url2,"target":"_blank"}).html("Buscar") );
    
 
});  
     
        
<input type="text"  id="orden_de_compra" placeholder="Orden de compra">

<input type="text" value="index.php?orden_de_compra=" id="url">
        
        
        
        
    
asked by Daniel Treviño 20.10.2017 в 20:11
source

1 answer

1

I think this will help you, since when you started the code you were already doing replace of input for <a> it was not necessary to do it again within function change , you just had to select the new one tag and change its attribute href .

I also deleted several lines of code that you did not need.

var el = $("#url"),
url = el.val();

var url2 = $("#orden_de_compra").val();

el.replaceWith( $("<a />").attr({"href" : url+url2,"target":"_blank"}).html("Buscar") );

$("#orden_de_compra").change( function(){
    url2 = $(this).val().toString();
    $('a').attr('href', url + url2);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text"  id="orden_de_compra" placeholder="Orden de compra">

<input type="text" value="index.php?orden_de_compra=" id="url">
    
answered by 20.10.2017 / 20:33
source