CODEWITHSUNDEEP
html
Atannos
Atannos

Reputation: 21

How to get information from an input and put it in a href

I'm a beginner, I have an input and right below I have a button that is a href for the whats app chat, I would like to know how I can get the text typed in the input and add it in the href, here's how the code is:

<p>Send me a message right now Whats App</p>

  <input id="question" class="input border-red" type="text" placeholder="Write your question">      
  <a href="https://api.whatsapp.com/send?phone=9985985848&text=" class="button-red color-red css-section" target="_blank">Submit Doubt</a>

Upvotes: 1

Views: 50

Answers (1)

Spectric
Spectric

Reputation: 31987

Some Javascript can do the trick (not possible in plain HTML, unless you count inline JS):

var link = document.getElementsByTagName("a")[0];
function upd(element){
  var value = element.value;
  link.href="https://api.whatsapp.com/send?phone=9985985848&text="+value;
}
function showLink(element){//<--This function is optional. It is simply used to show that the code works
  console.log("href attribute value: "+element.href);
}
<p>Send me a message right now Whats App</p>

  <input id="question" class="input border-red" type="text" placeholder="Write your question" oninput="upd(this)">      
  <a href="" class="button-red color-red css-section" target="_blank" onclick="showLink(this)">Submit Doubt</a>

If you want the href to change only when it is clicked, rather than update whenever the user enters something in the input, you can use the example below:

var input = document.getElementsByTagName("input")[0];
function showLink(element){
  element.href="https://api.whatsapp.com/send?phone=9985985848&text="+input.value;
}
<p>Send me a message right now Whats App</p>

  <input id="question" class="input border-red" type="text" placeholder="Write your question">      
  <a href="" class="button-red color-red css-section" target="_blank" onclick="showLink(this)">Submit Doubt</a>

A jQuery approach:

$("#question").on("input",function(){$("a").attr("href","https://api.whatsapp.com/send?phone=9985985848&text="+$(this).val())}),$("a").on("click",function(){console.log("href attribute value: "+$(this).attr("href"))});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Send me a message right now Whats App</p>

<input id="question" class="input border-red" type="text" placeholder="Write your question">
<a href="" class="button-red color-red css-section" target="_blank">Submit Doubt</a>

One that doesn't update the link whenever the user inputs:

$("a").on('click',function(){$(this).attr('href','https://api.whatsapp.com/send?phone=9985985848&text='+$('input').val())})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Send me a message right now Whats App</p>

<input id="question" class="input border-red" type="text" placeholder="Write your question">
<a href="" class="button-red color-red css-section" target="_blank">Submit Doubt</a>

Upvotes: 1

Related Questions