Iva Kobalava
Iva Kobalava

Reputation: 129

How submit value of input field dynamically

I have some categories:

<div class="cbp-l-inline-title" style=" font-size: 18px;">
    <span style="color: #0669b4">Generic Name:</span> 
    <a><?php echo $category[0]['generic_name'];?></a>
</div>

and I want on click to insert value of this <a> to this form

<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
    <input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div id="suggesstion"></div>
    <div class="input-group-btn input-group-append">
        <button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
    </div>
</form>

so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters

Upvotes: 0

Views: 79

Answers (1)

undg
undg

Reputation: 825

html

<div class="cbp-l-inline-title" style=" font-size: 18px;">
  <span style="color: #0669b4">Generic Name:</span> 
  <p class="clickMe">click me: text to send after click</p>
</div>

<form method="post"  class="input-group">
  <input type="text" name="search" id="search" class="form-control" minlength=3
                       placeholder="Generic" aria-label="Recipient's username"
                       aria-describedby="basic-addon2">
  <div id="suggesstion"></div>
  <div class="input-group-btn input-group-append">
     <button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
  </div>
</form>

And javascript in jquery

$('.clickMe').on('click', function(){
  var value = $(this).text()
  $('input#search').val(value)
})

https://jsfiddle.net/ora0j4uu/

.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp

edit: jquery for submit

$('.clickMe').on('click', function(){
  var value = $(this).text()
  console.log(value)
  $('input').val(value)
  $('.input-group').submit()
})

Upvotes: 3

Related Questions