JavaScript - Getting HTML form values

Question

How can I get the value of an HTML form to pass to JavaScript   Is this correct  My script takes two arguments one from textbox  one from the dropdown box    lt body gt   lt form name  valform  action    method  POST  gt   Credit Card Validation   lt input type  text  id  cctextboxid  name  cctextbox  gt  lt br  gt  Card Type   lt select name  cardtype  id  cardtypeid  gt     lt option value  visa  gt Visa lt  option gt     lt option value  mastercard  gt MasterCard lt  option gt     lt option value  discover  gt Discover lt  option gt     lt option value  amex  gt Amex lt  option gt     lt option value  diners  gt Diners Club lt  option gt   lt  select gt  lt br  gt   lt input type  button  name  submit  value  Verify Credit Card  onclick  isValidCreditCard document getElementById  cctextboxid   value document getElementById  cardtypeid   value     gt   lt  body gt

User · Answer

My 5 cents here  using form elements which allows you to query each field by it s name  not only by iteration   const form   document querySelector  form name  valform      const ccValidation   form elements  cctextbox   value  const ccType   form elements  cardtype   value

User · Answer

I know this is an old post but maybe someone down the line can use this   x000D   x000D     use document form  form-name   to reference the form const ccForm   document forms  ccform        bind the onsubmit property to a function to do some logic ccForm onsubmit   function e          access the desired input through the var we setup   let ccSelection   ccForm ccselect value    console log ccSelection      e preventDefault      x000D   lt form name  ccform  gt     lt select name  ccselect  gt       lt option value  card1  gt Card 1 lt  option gt       lt option value  card2  gt Card 2 lt  option gt       lt option value  card3  gt Card 3 lt  option gt     lt  select gt     lt button type  submit  gt Enter lt  button gt   lt  form gt  x000D   x000D   x000D

User · Answer

Here is an example from W3Schools   function myFunction         var elements   document getElementById  myForm   elements      var obj          for var i   0   i  lt  elements length   i             var item   elements item i           obj item name    item value             document getElementById  demo   innerHTML   JSON stringify obj       The demo can be found here

User · Answer

lt form id  form  gt       lt input type  text  name  title  gt       lt input type  text  name  text  gt       lt input type  email  name  email  gt   lt  form gt   const element   document getElementByID   form   const data   new FormData element  const form   Array from data entries       form           quot title quot    quot a quot         quot text quot    quot b quot         quot email quot    quot c quot        for  const  name  value  of form        console log   name  value                name   quot title quot   value   quot a quot        name   quot text quot   value   quot b quot        name   quot email quot   value   quot c quot

User · Answer

Please try to change the code as below   lt form    onSubmit  e   gt         e preventDefault         e stopPropagation          const elements   Array from e currentTarget  as HTMLInputElement          const state   elements reduce  acc  el    gt           if  el name             acc el name    el value                   return acc                     console log state       test   123          gt      lt input name  test  value  123    gt   lt  form gt

User · Answer

document forms will contain an array of forms on your page  You can loop through these forms to find the specific form you desire   var form   false  var length   document forms length  for var i   0  i  lt  length  i          if form id     wanted id             form   document forms i             Each form has an elements array which you can then loop through to find the data that you want  You should also be able to access them by name  var wanted value   form someFieldName value  jsFunction wanted value

User · Answer

Quick solution to serialize a form without any libraries   x000D   x000D  function serializeIt form    x000D    return   x000D      Array apply 0  form elements  map x   gt   x000D          x000D           obj   gt   x000D              x000D              x type     radio     x000D              x type     checkbox  x000D                x000D              x checked    x000D                obj x000D                 x000D                null x000D              x000D              obj x000D             x000D              x000D               x name  x value x000D              x000D            x000D          x000D        filter x   gt  x  x000D       x000D    x000D   x000D  function whenSubmitted e    x000D    e preventDefault   x000D    console log  x000D      JSON stringify  x000D        serializeIt document forms 0    x000D        4  4  4 x000D        x000D      x000D    x000D   lt form onsubmit  whenSubmitted event   gt  x000D   lt input type text name hiThere value nothing gt  x000D   lt input type radio name okRadioHere value nothin gt  x000D   lt input type radio name okRadioHere1 value nothinElse gt  x000D   lt input type radio name okRadioHere2 value nothinStill gt  x000D   x000D   lt input type checkbox name justAcheckBox value checkin gt  x000D   lt input type checkbox name justAcheckBox1 value checkin1 gt  x000D   lt input type checkbox name justAcheckBox2 value checkin2 gt  x000D   x000D   lt select name selectingSomething gt  x000D   lt option value  hiThere  gt Hi lt  option gt  x000D   lt option value  hiThere1  gt Hi1 lt  option gt  x000D   lt option value  hiThere2  gt Hi2 lt  option gt  x000D   lt option value  hiThere3  gt Hi3 lt  option gt  x000D   lt  select gt  x000D   lt input type submit value  click me   name subd gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

HTML    lt input type  text  name  name  id  uniqueID  value  value    gt    JS   var nameValue   document getElementById  uniqueID   value

User · Answer

lt input type  text  id  note text    gt   let value   document getElementById  note text   value

User · Answer

Expanding on Atrur Klesun s idea    you can just access it by its name if you use getElementById to reach the form  In one line   document getElementById  form id   elements  select name   value    I used it like so for radio buttons and worked fine  I guess it s the same here

User · Answer

Several easy-to-use form serializers with good documentation   In order of Github stars    jquery serializeJSON jquery-serialize-object form2js form-serialize

User · Answer

This is the answer of your question  You can pass the values of the form fields to the function by using this  lt  lt name of the field gt  gt  value  And also changed input submit to button submit  Called the function from form   lt body gt      lt form name  quot valform quot  method  quot POST quot  onsubmit  quot isValidCreditCard this cctextbox value  this cardtype value  quot  gt     Credit Card Validation   lt input type  quot text quot  id  quot cctextboxid quot  name  quot cctextbox quot  gt  lt br  gt     Card Type       lt select name  quot cardtype quot  id  quot cardtypeid quot  gt                lt  select gt      lt br  gt      lt button type  quot submit quot  gt Verify Credit Card lt  button gt   lt  body gt   Technically you can do it in your function by using document getElementById  quot cctextboxid quot    But his solution is concise and simple code

User · Answer

This is a developed example of https   stackoverflow com a 41262933 2464828  Consider   lt form method  POST  enctype  multipart form-data  onsubmit  return check event   gt       lt input name  formula  gt   lt  form gt    Let us assume we want to retrieve the input of name formula  This can be done by passing the event in the onsubmit field  We can then use FormData to retrieve the values of this exact form by referencing the SubmitEvent object   const check    e    gt        const form   new FormData e target       const formula   form get  formula        console log formula       return false      The JavaScript code above will then print the value of the input to the console   If you want to iterate the values  i e   get all the values  then see https   developer mozilla org en-US docs Web API FormData Methods

User · Answer

If you want to retrieve the form values  such as those that would be sent using an HTTP POST  you can use  JavaScript const formData   new FormData document querySelector  form    for  var pair of formData entries           console log pair 0           pair 1       form-serialize  https   code google com archive p form-serialize   serialize document forms 0     jQuery    quot form quot   serializeArray

[javascript] JavaScript - Getting HTML form values

Examples related to javascript

Examples related to html