CODEWITHSUNDEEP
javascriptjqueryhtml
DarrenLee
DarrenLee

Reputation: 137

Change url of button depending on input text

I have created form fields with a button.

I need the url of the button to change depending on the data entered in the Last name field. The Booking reference field does not effect the url

Example: User enters "John" in the last name field the button should have the url: http://www.john.com

Example: User enters "Henry" in the last name field the button should have the url: http://www.henry.com

<form>
  <p style="margin-bottom: -10px; font-size: 12px;">*Required Fields</p><br>
  <input type="text" placeholder="Last name *" name="lastname">
  
  
  <input type="text" placeholder="Booking Reference *" name="ref">

  <a href="http://localhost:8888/ek/booking/" class="btn btn-info" role="button">Retrieve booking</a>
  
  
</form>

Upvotes: 0

Views: 639

Answers (3)

jANVI
jANVI

Reputation: 748

Try this:

     $(document).ready(function()
            {
              $('.btn btn-info').click(function() {
              var value = $("input[name='lastname']");
       if(value.length > 0)
        {
              var hrefVal = $('a').attr('href');
              hrefVal.replace('example' , value);
              $('a').attr('href' , hrefVal);
        }
            });
            });


<form>
  <p style="margin-bottom: -10px; font-size: 12px;">*Required Fields</p><br>
  <input type="text" placeholder="Last name *" name="lastname">
  
  
  <input type="text" placeholder="Booking Reference *" name="ref">

  <a href="http://www.example.com" class="btn btn-info" role="button">Retrieve booking</a>
  
  
</form>

Upvotes: 0

Kuba Wojtach
Kuba Wojtach

Reputation: 566

My answer in ES6 style:

https://codepen.io/powaznypowazny/pen/GvxGMY

function retrieveURL() {
  const anchor = document.querySelector('.btn.btn-info');
  const input = document.querySelector('input[name=lastname]');

  input.addEventListener('keyup', () => {
      let value = input.value.toLowerCase();
      anchor.href = `http://www.${value}.com`;
  });
}
document.addEventListener("DOMContentLoaded", function(event) {
  retrieveURL();
});

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use blur event on lastname to achieve this,

$('input[name=lastname]').on('blur', function(){
debugger
   var lastName = $('input[name=lastname]').val()
   //check if last name is there
   if(lastName.length !== 0){
      var link = 'http://www.'+ lastName +'.com';
      $('.btn.btn-info').attr('href',link);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p style="margin-bottom: -10px; font-size: 12px;">*Required Fields</p><br>
  <input type="text" placeholder="Last name *" name="lastname">
  
  
  <input type="text" placeholder="Booking Reference *" name="ref">

  <a href="http://localhost:8888/ek/booking/" class="btn btn-info" role="button">Retrieve booking</a>
  
  
</form>

Upvotes: 1

Related Questions