How can I scale this?

I have a form that consists of several pages. To go through the form, everything I do is shown and hides the div containers. The last page is the confirmation page before sending. It takes the contents of the form and issues it so that the user can see that he / she simply filled out. If they click on one of them, they will return them to the page on which they were (# nav1 ~ 3), focus on this field and let them enter a new value, if necessary.

Using jQuery, I made variables for EVERY field / radio / check / select / textarea / whatever. If my method seems stupid, please write to me, but basically, and this method works fine already, but I'm trying to scale , and I don't know how, because I really don't 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 a field of 3, 4, 5 ~ 25, etc.

If you could explain the explanations in terms other than programmers, I would really like you forever.

+4
source share
2 answers

Without getting too complicated, you can create a function that handles repetitive things. I have not tested this, but you 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 improve in Javascript, you will probably just create a loop to handle all these β€œvalField ()” calls, or you will write something that will validate your form, find there and generate event handlers to glue it all together automatically . This, of course, is not "n00bware", but it gives you something to think about.

Also instead on your output:

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

You can replace it with any code in the onclick tab of the nav tab.

There are many ways to solve this problem. Take it step by step.

+2
source

I would 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 will be well served.

+3
source

All Articles