Update text of DIV with input value

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开发者_Python百科 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.

$(".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")

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

Should probably do it

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

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/

<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>