Jquery html pass a value as third parameter

Question

Is there a way I can pass from an input html tag and append it to a link url ?

 <input type="text" name="job_card_id_payment"
        id="job_card_id_payment"
        class="job_card_id_payment form-control"/>
 <a class="btn btn-success pull-right" 
    id="submit_payment_link" 
    href="<?php echo base_url(); ?>operations/submit_payment">
   <i class="fa fa-credit-card"></i>Submit Payment
 </a>

I want to pass the value from the input name job_card_id_payment to the end of the link url so that it can be like this one :

<?php echo base_url(); ?>operations/submit_payment/1

How can I do it?

Answer 1

The solution is to extract the value from input tag and update the URL:

$('#submit_payment_link').click(function(e) {
  // Getting input value.
  var value = $('#job_card_id_payment').val();
  // Getting current link URL.
  var href = $(this).attr('href');
  // Checking for slash at the end and updating URL.
  href += ('/' == href.slice(-1) ? '' : '/') + value;
  // Setting updated URL.
  $(this).attr('href', href);
});