CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user1043646
user1043646

Reputation:

Better practice Jquery vs Document.formname.formelement.value

quick question.

I am currently doing some js (pre / front end validation) the question I have is which line of code is better to use. Myself I have always used this method.

 document.formname.forminput.value

Rather than

 $('formelement').val()

Which would you recommend that I use, I presume that the first method is better as it's not relying on an external library to commit the function ?

Thanks, Tony.

Upvotes: 4

Views: 2265

Answers (7)

Rob
Rob

Reputation: 15168

There is no reason to use jQuery over javascript in this case.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

According to JS Perf, the native DOM approach, with document.querySelector() is fastest, and the native DOM approach you post in your question the slowest. Presumably 'fast' correlates to efficient, and it seems, then, that selecting by id (as both the jQuery and document.querySelector() approaches use) is the fastest method of selection.

The JS Perf is linked below, and based on the following HTML:

<form action="#" method="post" name="trek">
  <fieldset>
    <label for="input1">
      Input One:
    </label>
    <input id="input1" value="An input, Jim; but just as we know it..." />
  </fieldset>
  <fieldset>
    <label for="input2">
      Input Two:
    </label>
    <input id="input2" value="'Beam me up, Scotty!' attributed to, but never said, in Star Trek."
    />
  </fieldset>
</form>

Native DOM:

var input1 = document.trek.input1.value,
    input2 = document.trek.input2.value;
console.log(input1, input2);

More DOM:

var input1 = document.getElementById('input1').value,
    input2 = document.getElementById('input2').value;
console.log(input1, input2);

Yet more DOM, d.qS:

var input1 = document.querySelector('#input1').value,
    input2 = document.querySelector('#input2').value;
console.log(input1, input2);

And jQuery:

var input1 = $('#input1').val(),
    input2 = $('#input2').val();
console.log(input1, input2);

JS Perf.

References:

Upvotes: 0

David Hellsing
David Hellsing

Reputation: 108530

"Better" is hard to define. "Faster" would probably be the first, although adding an ID to the input field and calling $('#inputid') in jQuery might be faster. But the differences are so tiny that it wouldn’t make sense for any human to even consider micro-optimizing such a selector.

They are also equal when it comes to simply getting the value from a known input field, however jQuery does not throw exceptions if a DOM element is not found, whereas document.formname.forminput.value will throw an exception if formname does not exist in the DOM. jQuery’s .val() will simply return undefined if the DOM element is not found.

Needless to add, jQuery’s API including val() is more consistent between different input elements and browsers, and can also be used as a setter.

Upvotes: 1

Ruben-J
Ruben-J

Reputation: 2693

It's what works for you.

If you only want to use plain JavaScript use:

document.formname.forminput.value

or

 document.getElementById('formelement').value

If you want to use the jQuery framework:

$('formelement').val()

Personally i like the jQuery way cause it's cleaner, but always know the plain JavaScript way if you use it.

Check out this post on stackexchange for a more detailed discussion about plain JavaScript vs jQuery: https://softwareengineering.stackexchange.com/questions/122191/what-benefits-are-there-to-native-javascript-development

Upvotes: 1

mplungjan
mplungjan

Reputation: 178421

Actually in Plain JavaScript you have

document.formname.fieldName.value
document.getElementsByName("fieldName")[0].value
document.getElementById("fieldID")[0].value

whereas similar access in jQuery would be

$("input[name='fieldName'"].val();

or

$("#fieldID"].val();

Be sure to know the differences

If you do not have jQuery in the page for other reasons than to get the values of form field, then in my opinion jQuery is not necessary. If however you are doing anything slightly complex and cross browsery, like Ajax or event handling, go for jQuery for all your needs on the page

Upvotes: 0

bipen
bipen

Reputation: 36551

actually there is no proper answer for this... answer depends on the person using it..

the first one is plain javascript so as you said an external library files is not required..

whereas

second one is using jquery....

i would go with the second cause its short ,readable and cleaner

Upvotes: 0

chandresh_cool
chandresh_cool

Reputation: 11830

Both are fine

if you are using document.formname.forminput.value, that means you are using plain javascript

But if you use $('formelement').val() it comes in jquery which is one of the framework of javascript. For using you should be downloading jquery.js and include it in your webpage.

Upvotes: 0

Related Questions