javascript - 根据输入文本更改按钮的 url

Question

我已经使用按钮创建了表单字段。

我需要根据“姓氏”字段中输入的数据来更改按钮的 URL。预订引用字段不会影响网址

示例:用户在姓氏字段中输入“John”，按钮应具有 url:http://www.john.com

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

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>