JQuery - Correct way to populate data in form

Question

function getData(id) {
    $.getJSON('process.php?action=lookup&id='+id, parseInfo);       
    return false;
}

// Display data in form
function parseInfo(data) {  
  if (data.id > 0) {
    $('#txtaction').val('update');
    $('#txtbook_id').val(data.id);
  } else {
    $('#txtaction').val('');
    $('#txtbook_id').val('');
  }
}

Referring to the method above, is this the proper way to populate form fields? Will it cause any problem when calling getData function if i have a long list of form fields to populate and attributes to change?

Thank you in advance for any comments!

If you're going to make this form very large, I'd consider a form-backing library such as AngularJS which does much of the heavy lifting for you. — Jeff Watkins
– Jeff Watkins, Commented Dec 3, 2014 at 13:28
Actually I have more than 50 fields in my form, separated into few tab pages. If this is right, why here are times I need to refresh my page a few times to make all data finish populate all the fields in my form? Should I run setTimeout(getData, 0) in order to complete the population of data into my form? — ShirleyKuanSF
– ShirleyKuanSF, Commented Dec 3, 2014 at 13:40
This is an ideal use-case for AngularJS as it keeps your form up to date automatically based on a backing object which you can manipulate at will. It also updates your backing object with the contents of the form, so they always stay in sync! — Jeff Watkins
– Jeff Watkins, Commented Dec 3, 2014 at 15:32

T.J. Crowder · Accepted Answer · 2014-12-03 13:25:28Z

1

One tweak I'd make is to avoid repeating the selectors and val calls, too easy to add a field and forget to update one half of the if/else or the other:

function parseInfo(data) {  
  var valid = data && data.id > 0;
  $('#txtaction').val(valid ? 'update' : '');
  $('#txtbook_id').val(valid ? data.id : '');
}

Side note: Doing this manually is fine for very small projects, but for anything of any size, you might look into any of the various MVC and MVVC tools or frameworks. There are many.

answered Dec 3, 2014 at 13:25

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

strapro · Accepted Answer · 2014-12-03 13:26:14Z

0

This seems to be correct. However keep in mind that JSON attribute names can't contain dashes so an alternate way to get around that problem would be:

if (data['id'] > 0) {
    $('#txtaction').val('update');
    $('#txtbook_id').val(data['id']);
} else {
   $('#txtaction').val('');
   $('#txtbook_id').val('');
}

answered Dec 3, 2014 at 13:26

strapro

1638 bronze badges

4 Comments

T.J. Crowder Over a year ago

"keep in mind that JSON attribute names can't contain dashes" A) Yes they can (if you mean JSON property names), but JavaScript identifiers cannot. B) id doesn't have any dashes in it.

strapro Over a year ago

The id was just an example it obviously does not contain dashes :)

strapro Over a year ago

I stand corrected. I didn't know that it was an issue with Javascript. Thank you for that

T.J. Crowder Over a year ago

It's not really an issue, it's just that the language has to have a way to know that a-b is a subtraction expression, not a property name. JavaScript and JSON property names can be any string (so foo["a-b"] = 42; is fine, but I think you know that), but the IdentifierName grammar production is more limited, so you can't use the dot notation and the literal form with some property names.

Collectives™ on Stack Overflow

JQuery - Correct way to populate data in form

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related