dynamically populate div from js array in html form

Question

I am basically a newbie with javascript. I want to populate a div in my webpage from a select form found on the same page, when the user selects the book and chapter he wants to view and presses the submit button. Here the code:

<script type="text/javascript" charset="utf-8">
          var setArray = newArray(
                 bk1, 001, "this is my chapter content for the <div>",
                 bk1, 002, "this is my chapter content for the <div>",
                 bk1, 003, "this is my chapter content for the <div>",
                 bk2, 001, "this is my chapter content for the <div>",
                 bk2, 002, "this is my chapter content for the <div>"
                 etc....
          );
</script>

<form>
<select id="book">
  <option value="">Select Book</option>
  <option value="bk1">Book 1</option>
  <option value="bk2">Book 2</option>
  <option value="bk3">Book 3</option>
</select>
<select id="chapter">
  <option value="">Select Chapter</option>
  <option value="001">1</option>
  <option value="002">2</option>
  <option value="003">3</option>
</select>
<button id="button" type="submit">View</button>
</form>

<div id="content">
I want the content from the js array for the selected book and chapter to be placed here without reloading the page.
</div>

Note: I have simplified the code to make it a little easier to follow. I am sure my js array is incorrect and needs fixing for my purpose. Also, I don't want the page to refresh, only the div to update. Thanks for any help.

you would ideally want a better structure array. For example, an array of objects, where each object has a book, chapter and comment property. Then you can search the array on an event. Of course, the whole "hard-coded" option is a bad idea anyway. You could use AJAX to query the server and get a lookup on a database (for example) — musefan
– musefan, Commented Apr 3, 2012 at 9:22
You should consider using an Ajax library. I would recommend that you go with jQuery which also has quite a lot of other handy features. — Jibi Abraham
– Jibi Abraham, Commented Apr 3, 2012 at 9:22

David Downes · Accepted Answer · 2012-04-03 10:06:46Z

1

As has been suggested, you should seriously consider using ajax to retrieve this data, it would not make the page refresh, and would allow you to keep this data semi-private, and more easily manageable on the backend.

If/when you do this with ajax, you'll still need something like the following:

var booksData = {
    book1: [
        "chapter 1 content",
        "chapter 2 content",
        "..."
    ],
    book2: [
        "chapter 1 content",
        "chapter 2 content",
        "..."
    ]
}

function whenButtonClicked() {
    var book = "book1" // get the actual book name from the select input
    var chapter = 0 // get the selectedIndex of chapter input
    var content = booksData[book][chapter];
    var div = document.getElementById("content");
    div.innerHTML = content;
}

And use an onclick handler on the button. Something like

<button id="button" onclick="whenButtonClicked()">

I'd recommend looking at a library like jQuery that would make life easier, and clean a lot of this up.

edited Apr 3, 2012 at 10:06

answered Apr 3, 2012 at 9:38

David Downes

1,20912 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

preahkumpii Over a year ago

thanks much...it really helped. in your array, I am a little confused where the chapter numbers go. it seems like "chapter 1 content" is just the content...where is the 001, 002, 003 etc. in the array that would be called from the form? Thanks again.

preahkumpii Over a year ago

oohh, I see... you are relying on the indexes of the array, and will use the indices (not the values) of the select, correct?

preahkumpii Over a year ago

actually, I am using jquery to manage the almost 70 books and nearly 2,000 chapters. I use it to link the two selects so that the chapter select only displays the options for the already selected book. I think, by the way, this is interfering with the button. When I did an onclick command for the button, the content would display in the div briefly then disappear. Not sure why, maybe the jquery plugin is messing it up?

Sandeep Manne · Accepted Answer · 2012-04-03 09:26:01Z

1

If you can format your array into multidimensional array like this

   var setArray = ["book1":["chap1":"content","chap2":"content"], "book2":["chap1":"content","chap2":"content"]]

then it is easy to parse the array if you call setArray["book1"]["chap1"] will get the content of that

answered Apr 3, 2012 at 9:26

Sandeep Manne

6,0825 gold badges41 silver badges55 bronze badges

3 Comments

preahkumpii Over a year ago

ok, thanks. How do I take the selections from the form and populate there div from the "content" of the array?

Sandeep Manne Over a year ago

use onchange event listener for select box, when the select box change it will call the function and there you can capture the value of select box, using that select box value you can get content

Sandeep Manne Over a year ago

check this answer stackoverflow.com/questions/2665794/…

benoît · Accepted Answer · 2012-04-03 09:25:48Z

0

If this is a big website you need to learn how to use jQuery and Ajax (to not refresh all element). How many books ? and chapters ?

answered Apr 3, 2012 at 9:25

benoît

1,4833 gold badges13 silver badges31 bronze badges

1 Comment

Pranav Over a year ago

is this an answer...?Please post it as comment.

Collectives™ on Stack Overflow

dynamically populate div from js array in html form

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related