根据输入文本更改按钮的URL

Question

我已经创建了一个带有按钮的表单域。

我需要更改按钮的URL，具体取决于在“姓氏”字段中输入的数据。 预订参考字段不影响网址

示例：用户在姓氏字段中输入“ John”，按钮应具有以下网址： http ： //www.john.com

示例：用户在姓氏字段中输入“ Henry”，该按钮应具有以下网址： 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> 

Answer 1

您可以对lastname使用blur事件来实现此目的，

 $('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> 

Answer 2

我用ES6风格回答：

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

Answer 3

尝试这个：

     $(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>