Using jquery to create an interactive menu, based on an array of user input

Question

I have created a webpage that allows a user to update multiple iframes based on their input in a text box. I'd like to extend the functionality of this page to allow the user to enter multiple values at once.

These values would be separated by a new line, I would like to display all the values in some kind of side bar menu and I would like the user to be able to select values by clicking them and/or cycle through values by "next" or "previous" buttons.

This is how the current page is working:

<input type="text" id="user">

<iframe id="frame1" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame2" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame3" width="450px" height="880px" src="" frameborder=0></iframe>

<div class="button">Submit</div>

// Clicks submit button if enter key is pressed
$("#user").keyup(function(event){
  if(event.keyCode == 13){
    $(".button").click();
  }
});

// If submit button is pressed, update iframes with contents of text box 
$(".button").click(function(){
    $('#user').val(function(n,c){
       $('#frame1').attr('src', "url" + c);
       $('#frame2').attr('src', "url" + c);
       $('#frame3').attr('src', "url" + c);
       $('#user').attr('value',c);
       return c
    });
});

From what I understand, I'd need to add the user input to an array by splitting the values based on new line, as described here. Then display them using something like what's described here.

What I'm really struggling with is how to then get these array values into some kind of sidebar menu that the user can interact with. Hopefully if I can do that, I can just use click handlers to update the iframes.

Any help would be greatly appreciated, thanks!

Nelson Matos · Accepted Answer · 2015-09-21 12:46:04Z

0

Maybe something like this:

http://fiddle.jshell.net/a1qzdk3a/1/

Hope it helps... =) Give feedback!

            var myarray = $('#myTextArea').val().split("\n");

edited Sep 21, 2015 at 12:46

answered Sep 20, 2015 at 11:14

Nelson Matos

964 bronze badges

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

2 Comments

Mr Charles Over a year ago

It took me a little while to figure out what you had done there but I think that should work nicely, thank you!

Nelson Matos Over a year ago

You need to change fidle properties in the left menu to jquery 1.7.2 and No wrap in head to make it work...

Collectives™ on Stack Overflow

Using jquery to create an interactive menu, based on an array of user input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related