Change url of button depending on input text

Question

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>

Cool. What have you tried?

Bas Slagter
– Bas Slagter

2017-08-21 07:35:52 +00:00
Commented Aug 21, 2017 at 7:35 — Bas Slagter
– Bas Slagter, Commented Aug 21, 2017 at 7:35

Ankit Agarwal · Accepted Answer · 2017-08-21 07:38:20Z

1

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>

answered Aug 21, 2017 at 7:38

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

Kuba Wojtach · Accepted Answer · 2017-08-21 07:45:31Z

0

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

answered Aug 21, 2017 at 7:45

Kuba Wojtach

5663 silver badges10 bronze badges

Comments

jANVI · Accepted Answer · 2017-08-21 07:51:40Z

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>

Collectives™ on Stack Overflow

Change url of button depending on input text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related