Extract and set form values through the DOM—no frameworks required! https://github.com/TheoryOfNekomata/formxtra
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

99 rivejä
2.4 KiB

  1. <!DOCTYPE html>
  2. <html lang="en-PH">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <article>
  9. <h2></h2>
  10. <form>
  11. <div>
  12. <input type="text" placeholder="First Name" name="first_name" />
  13. </div>
  14. <div>
  15. <input type="text" placeholder="Middle Name" name="middle_name" />
  16. </div>
  17. <div>
  18. <input type="text" placeholder="Last Name" name="last_name" />
  19. </div>
  20. <fieldset>
  21. <legend>Gender</legend>
  22. <div>
  23. <label>
  24. <input type="radio" name="gender" value="m" />
  25. Male
  26. </label>
  27. <label>
  28. <input type="radio" name="gender" value="f" />
  29. Female
  30. </label>
  31. </div>
  32. </fieldset>
  33. <div>
  34. <select name="civil_status">
  35. <option value="">Select Civil Status</option>
  36. <option value="single">Single</option>
  37. <option value="married">Married</option>
  38. <option value="divorced">Divorced</option>
  39. <option value="separated">Separated</option>
  40. </select>
  41. </div>
  42. <div>
  43. <label>
  44. <input type="checkbox" name="new_registration" />
  45. New Registration
  46. </label>
  47. </div>
  48. <div>
  49. <label>
  50. <input type="checkbox" value="filipino" name="nationality" />
  51. Filipino
  52. </label>
  53. </div>
  54. <fieldset>
  55. <legend>
  56. Default Dependents
  57. </legend>
  58. <div>
  59. <label>
  60. <input type="radio" value="James" name="dependent" />
  61. James
  62. </label>
  63. <label>
  64. <input type="radio" value="Jun" name="dependent" />
  65. Jun
  66. </label>
  67. </div>
  68. </fieldset>
  69. <div>
  70. <button type="button" class="dependents">
  71. Add Dependents
  72. </button>
  73. </div>
  74. <div>
  75. <textarea name="notes" placeholder="Notes"></textarea>
  76. </div>
  77. <div>
  78. <button name="submit" value="Hello" type="submit">Hello</button>
  79. <button name="submit" value="Hi" type="submit">Hi</button>
  80. </div>
  81. </form>
  82. </article>
  83. <script>
  84. Array.from(document.getElementsByClassName('dependents')).forEach(d => {
  85. d.addEventListener('click', e => {
  86. const container = document.createElement('div')
  87. const input = document.createElement('input')
  88. input.name = 'dependent'
  89. input.type = 'text'
  90. input.placeholder = 'Dependent'
  91. container.classList.add('additional-dependent')
  92. container.appendChild(input)
  93. e.target.parentElement.parentElement.insertBefore(container, e.target.parentElement)
  94. })
  95. })
  96. </script>
  97. </body>
  98. </html>