单击 div 后将内容从 div 推送到隐藏输入

Question

I have a question. I have for example 3 divs, all these dives should be clickable. And after click on div, value from div should be pushed to hidden input and form should be submitted automatically. How I can do it in a best way?

upd

<form action="" method="get">
  <input type="text" class="hidden" id="inputID"/>
  <div id="placeholder">
    <div class="addresses">
        <div class="address">address 1</div>
        <div class="address">address 2</div>
        <div class="address">address 3</div>
    </div>
  </div>
</form>

So, when you click to .address , value from .address should be pushed to #inputID

Answer 1

The following JavaScript should do what you are asking.

 $(".address").click(function() { $("#inputID").val($(this).text()); $("form").submit(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="get"> <input type="text" class="hidden" id="inputID"/> <div id="placeholder"> <div class="addresses"> <div class="address">address 1</div> <div class="address">address 2</div> <div class="address">address 3</div> </div> </div> </form>

Answer 2

$('.address').on('click', function() {
   $('#inputID').val($(this).text());
   $('form').submit();
});

Answer 3

$('div.address').click(function() { $('#inputID').val($(this).text()); $('form').submit(); });

Answer 4

please look at this solution using jQuery:

HTML:

<form action="" method="get">
  <input type="text" class="hidden" id="inputID"/>
  <div id="placeholder">
    <div class="addresses">
        <div class="address">Berlin Leipzigerstr. 13</div>
        <div class="address">Berlin Firedrichstr. 2</div>
        <div class="address">Berlin Berlinerstr. 90</div>
    </div>
  </div>
</form>

JavaScript:

$('.address').click(function(){
    $('#inputID').val($(this).text());
    $('form').submit();
});

DEMO