I'm a JS newb. How can I scale this?

Question

Let me preface this by saying I'm a complete newb when it comes to front-end (and back-end, for that matter) development. Please keep that in mind. There.

So I've got a form that's a few pages long. To traverse the form all I'm doing is showing and hiding container divs. The last page is a confirmation page before submitting. It takes the contents of the form and lays it out so the user can see what he/she just filled out. If they click on one of these it'll take them back to the page they were on (#nav1~3), focus on that field, and let them type in a new value if they need to.

Using jQuery, I made variables for EVERY field/radio/check/select/textarea/whatever. If my method seems silly please pwn me but basically, and this method works ok already, but I'm trying to scale it and I don't have any idea how because I don't really know what I'm doing. Thoughts?

  var field1 = '<a href="#" 
    onclick="$(\'#nav1\').click();$(\'input#field-1\').focus();" 
    title="Click to edit">' + 
    $('input#field-1').val() + '</a>';
    $('#field1-confirm').html(field1);

  var field2 = '<a href="#" 
    onclick="$(\'#nav1\').click();$(\'input#field-2\').focus();" 
    title="Click to edit">' + 
    $('input#field-2').val() + '</a>';
    $('#field2-confirm').html(field2);

And so on, with field3, 4, 5 ~ 25, etc.

If you could help out explaining in non-programmer terms, I'd love you forever. Thanks.

Answer 1

You need to learn about loops and associative containers.

Answer 2

First, welcome in the wonderfull world of programming.

But if you are a complete newbee, I can recommend to read at least one entry level book on programming. There are lots of concepts that you need to understand before you can actually program.

Answer 3

I'd start with an introduction to arrays: this one looks pretty decent, for starters.

Wrap your head around arrays and loops to get started, and you'll be well served.

Answer 4

Without getting too complicated, you can make a function that handles the repetitive stuff. I haven't tested this, but you'll get the idea:

function valField(fieldName,navName) {
    var output = '<a href="javascript://" onclick="$(\''+navName+'\').click();$(\'input#'+fieldName+'\').focus();" title="Click to edit">' + $('input#'+fieldName).val() + '</a>';
 $('#'+fieldName+'-confirm').html(output);
}

valField("field-1","nav1")
valField("field-2","nav1")
valField("field-293","nav3")

When you get better at Javascript, you would probably just make a loop to handle all these "valField()" calls, or you would write something that would inspect your form, find what's there and generate event handlers to glue it all together automatically. That's certainly not "n00bware", but it gives you something to think about.

Also instead of using this on your output:

$(\''+navName+'\').click();

You could replace it with whatever code is actually in the onclick of the nav tab.

There are dozens of ways to solve this problem. Take it one step at a time.