fix(form): fixed common form get value selector

close #1178

src/modules/common/components/form/Form.tsx

@@ -1,7 +1,7 @@
 import { IFormProps } from 'modules/common/types';
 import React from 'react';
 import validator from 'validator';
-import { __ } from '../../utils';
+import { __, generateRandomString } from '../../utils';
 import { Error } from './styles';
 
 type Props = {
@@ -16,6 +16,7 @@ type State = {
 };
 
 class Form extends React.Component<Props, State> {
+  private formId: string = generateRandomString();
   private children: any[] = [];
 
   constructor(props: Props) {
@@ -56,16 +57,18 @@ class Form extends React.Component<Props, State> {
     });
   };
 
-  getValue = child => {
-    const { name } = child.props;
+  getSelector = (name: string) => {
+    return document.querySelector(`#${this.formId} [name='${name}']`) as any;
+  };
 
-    const values = document.getElementsByName(name) as any;
+  getValue = child => {
+    const element = this.getSelector(child.props.name);
 
-    if (values.length > 1) {
-      return values[values.length - 1].value;
+    if (element) {
+      return element.value;
     }
 
-    return values[0].value;
+    return '';
   };
 
   onSubmit = e => {
@@ -77,12 +80,8 @@ class Form extends React.Component<Props, State> {
 
   validate = child => {
     const { props } = child;
-    const elements = document.getElementsByName(props.name) as any;
-
-    const value =
-      elements.length > 1
-        ? elements[elements.length - 1].value
-        : elements[0].value;
+    const element = this.getSelector(props.name);
+    const value = element ? element.value : '';
 
     if (props.required && !value) {
       return <Error>{__('Required field')}</Error>;
@@ -124,7 +123,7 @@ class Form extends React.Component<Props, State> {
 
   render() {
     return (
-      <form onSubmit={this.onSubmit} noValidate={true}>
+      <form id={this.formId} onSubmit={this.onSubmit} noValidate={true}>
         {this.props.renderContent({
           errors: this.state.errors,
           values: this.state.values,

src/modules/common/utils/index.tsx

@@ -214,3 +214,19 @@ export const getCookie = cname => {
 
   return '';
 };
+
+/**
+ * Generate random string
+ */
+export const generateRandomString = (len: number = 10) => {
+  const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+
+  let randomString = '';
+
+  for (let i = 0; i < len; i++) {
+    const position = Math.floor(Math.random() * charSet.length);
+    randomString += charSet.substring(position, position + 1);
+  }
+
+  return randomString;
+};