CODEWITHSUNDEEP
javascriptjqueryhtml
zeroTAG
zeroTAG

Reputation: 3

Use the value of a INPUT and refere it to a DIV element AND appendTo() it

I'm trying to do a simple code (so that I don't have to copy and paste it to multiple buttons) where are any number of buttons where their values are simple as "Home", "Contact", "Register" and stuff like that. So whenever I click that button will make a hidden div to be shown at the DIV (content area) element.

So here is what I mean:

(hiddenstuff123 id=home) (hidden321stuff id=register) (hid22st id=contact)

< Home >< Contact >< Register > INPUT Buttons

 

DIV Area

Click "Home" button and hiddenstuff123 will show on the DIV area, you press "Contact" and hid22st shows, and so on.

So JavaScript will receive a GenericButton click, and will take the BUTTON Value and just Generic Select a div with that id (button value) and appendTo() the "DIV Area". So I'll show the code I've got already.

$('input:button').click(function(){
 var contentName = $(this).val().toLowerCase();
 $(contentName).appendTo('#pageContent');
});

The only problem so far is that he isn't selecting the especific hidden div according to the button value.

Thanks and sorry for my bad english.

Upvotes: 0

Views: 53

Answers (3)

adeneo
adeneo

Reputation: 318182

considering the following HTML:

<button value="contact">CONTACT</button>

<div id="contact"></div>

The following jQuery should work:

$(':button').click(function(){
   var _id = $(this).val();
    $('#'+_id).appendTo('#pageContent');
});

Upvotes: 0

Matteo B.
Matteo B.

Reputation: 4064

contentName is the ID of the DIV to be shown, right? So you should jQuery tell that its an ID by adding a '#' in front of the ID.

$('input:button').click(function(){
 var contentName = $(this).val().toLowerCase();
 $('#'+contentName).appendTo('#pageContent');
});

Upvotes: 0

danludwig
danludwig

Reputation: 47375

Assuming you have assigned <div id="home">, <div id="contact">, etc, this should work:

$('input:button').click(function(){
    var contentName = $(this).val().toLowerCase();
    $('#' + contentName).appendTo('#pageContent');
})

Upvotes: 1

Related Questions