Update text of DIV with input value

Question

I'm trying to update the text of a div which has several input buttons. When an input button gets clicked, the value of the button should be passed to the div and replace the text in the div.

It's basically a drop down menu which gets closed when the user clicks on an option. For obvious reasons I'd like the name of the button to replace "Choose one" which is default.

It is structured like this:

                    <div class="button_slide" rel="slide1">Choose one</div>
                    <div class="content_slide slide1">
                        <input id="ButtonCake" class="button_vertical special_button" type="button" value="Cake" size="10px" />
                        <input id="ButtonNoCake" class="button_vertical special_button" type="button" value="No Cake" />                                                                            
                    </div>  

So when the user clicks cake I'd like "Choose one" to be changed to "Cake". I've got a looot of these fields so a really generic jQuery solution would be awesome. Thanks for reading.

Answer 1

$('button').click(function(){
  $('.button_slide').text($(this).val());
})

Should probably do it

Answer 2

$(".button_vertical").click(function() {
   $(".button_slide").text($(this).val());
});

If you have multiple .button_slide divs, give them IDs, or better - use a parent <div> and use : $(this).parent().children(".button_slide")

Answer 3

$('input').click(function() {
  var new_val = $(this).val();
  $('.button_slide').val(new_val);
});

Answer 4

You will need to implement the click() function and pass the value you want to the button_slide by using the text() function

$(".special_button").click(function(e) {
   $(".button_slide").text($(this).val());
});

References

• http://api.jquery.com/text/
• http://api.jquery.com/click/

Answer 5

<div class="button_slide" rel="slide1" id="sld">Choose one</div>
<div class="content_slide slide1">
<script language="javascript">

var buttonArr = new Array("Cake","No Cake");
for(var i=0;i<buttonArr.length;i++){
 document.write(" <input onclick='showvalue(this.value)' class='button_vertical special_button' type='button' value='"+buttonArr[i]+"' />")
}
function showvalue(value){
 document.getElementById("sld").innerHTML = value;
}
</script>
</div>