2

I started learning about JavaScript but I realized there are so many ways to take a value from an input field inside a form. Can someone who has more experience than me explain what is the most practical (best) way to achieve this? And what advantages or disadvantages one way may have over another? I would be very grateful if you can help me out. Thank you in advance.

function One(){
  var Value = document.forms['FormOne'].Input.value;
  console.log(Value);
}

function Two(){
  var Value = document.FormOne.elements['Input'].value;
  console.log(Value);
}

function Three(){
  var Value = document.getElementById('Input').value;
  console.log(Value);
}

function Four(){
  var Value = document.querySelector('Input').value;
  console.log(Value);
}

function Five(){
  var Value = document.getElementsByName('Input')[0].value
  console.log(Value);
}
<form name="FormOne">
    <input name="Input" id="Input" type="text" size="10"> 
</form>

<br>

<input name="Show" type="Button" onClick="One()" value="Show F-1">
<input name="Show" type="Button" onClick="Two()" value="Show F-2">
<input name="Show" type="Button" onClick="Three()" value="Show F-3">
<input name="Show" type="Button" onClick="Four()" value="Show F-4">
<input name="Show" type="Button" onClick="Five()" value="Show F-5">
George Smith
  • 415
  • 8
  • 25
  • wrap it with Jquery... and it will do all the magic – Proxytype Dec 14 '17 at 14:04
  • You don't need jQuery to grab the value from an input as the OP clearly points out. – Andy Dec 14 '17 at 14:05
  • 1
    *"best"* is a very subjective term. Just know that all those methods exist and as your skills develop you can decide for yourself what works best in different situations – charlietfl Dec 14 '17 at 14:07
  • 1
    This is really a question re personal opinion so will likely be closed. That said `querySelector` only works from IE9, so if you're targeting anything lower than that, you should rule that out. As an additional note, re your code, it's generally standard practice to reserve initialisation of function names to classes and constructors, and keep other function names as camelCase - `function Four` would be `function four` for example. Same for variable names. – Andy Dec 14 '17 at 14:09
  • 5
    @Proxytype, Frankly speaking, I am not really sure why I should load a whole library just to achieve something that can be done in the native language. – George Smith Dec 14 '17 at 14:09
  • 2
    good answer here....https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript – Jason Delaney Dec 14 '17 at 14:10
  • @charlietfl, Thank you very much for contributing to this topic. I will play a little bite more with these functions and see if I can find some major differences. – George Smith Dec 14 '17 at 14:22
  • 1
    @Andy, Thank you very much for pointing the differences between the generally standard practice and my code. Point taken! – George Smith Dec 14 '17 at 14:25
  • 1
    @JasonDelaney Oh, thank you very much for the link. It was extremely helpful! – George Smith Dec 14 '17 at 14:25
  • @George Stoqnov if you want cross support for all browser, better use Jquery, it's save a lot of time developing cross browser application... – Proxytype Dec 14 '17 at 15:02

0 Answers0