Как проверить input на undefined?

Question

[dmitriu256]

Суть проблемы
Есть несколько форм которые имеют одинаковые поля ввода, условия валидации для них идентичны, но в одной форме есть поля:
Форма1
Имя,
Email,
Phone,
Textarea,
а в другой только
Форма2
Имя,
Phone
Такие формы отправляются AJAX запросом на сервер, одна функция отправки для всех форм.

Как в форме2 обойти ошибку undefined this.elements.textarea.value и this.elements.email.value
Естественно таких полей нет для формы2 ?
Исходный код

xhr.setRequestHeader('Content-type', 'application/json; charset = utf-8');

                data = {
                    name: this.elements.name.value,
                    email: this.elements.email.value, //undefined 
                    phone: this.elements.phone.value,
                    message: this.elements.textarea.value //undefined 
                };
        xhr.send(JSON.stringify(data));

Пробовал проверять через this.hasOwnProperty(`${this.elements.email}`)
Результат
Cannot read property 'value' of undefined (this.elements.email.value)
at HTMLFormElement.sendForm

Громоздил проверки следующего типа (ошибка но уже в последнем блоке else).

if(this.elements.email === 'undefined') {
                    data = {
                        name: this.elements.name.value,
                        email: '',
                        phone: this.elements.phone.value,
                        message: this.elements.textarea.value
                    };
                }else if(this.elements.textarea === 'undefined'){
                    data = {
                        name: this.elements.name.value,
                        email: this.elements.email.value,
                        phone: this.elements.phone.value,
                        message: ''
                    };
                }else if(this.elements.textarea === 'undefined' && this.elements.email === 'undefined'){
                    data = {
                        name: this.elements.name.value,
                        email: '',
                        phone: this.elements.phone.value,
                        message: ''
                    };
                }else{
                    data = {
                        name: this.elements.name.value,
                        email: this.elements.email.value,
                        phone: this.elements.phone.value,
                        message: this.elements.textarea.value
                    };
                }

Буду благодарен за помощь, не хочется делать несколько функций под каждую форму логика у них идентична, выборочно отсутствуют некоторые поля.

Answer 1

[Just Me]

1) как выше тебе написали, но рабочий:

const data = Object.keys(this.elements).reduce((res, key)=>{
if(this.elements[key]) res[key] = this.elements[key].value;
  return res;
}, {});

2) проще:

let data = {}
for(let i in this.elements){
	if( this.elements.hasOwnProperty(i)){
		if( this.elements[i] ){
			data[i] = this.elements[i].value
		}
	}
}

data отправляется на сервер

Comments

[Александр Черемхин]

if(this.elements[key]) // это мусор так как всегда true

[Just Me]

Александр Черемхин,

// это мусор так как всегда true

this.elements[key] не ключ, а его значение

Answer 2

[Владимир Кудря]

а обычная FormData не подойдет? делаете валидацию в начале функции, если есть ошибки return false, если нет то формировать formdata и просто отсылать все что есть

Answer 3

[Александр Черемхин]

...
const data = Object.keys(this.elements).reduce((res, key)=>{
  res[key] = this.elements[key].value;
  return res;
}, {});

xhr.send(JSON.stringify(data));
...

Comments

[Just Me]

const data = Object.keys(this.elements).reduce((res, key)=>{
if(this.elements[key]) res[key] = this.elements[key].value;
  return res;
}, {});

[Александр Черемхин]

this.elements[key] есть всегда, зачем его проверять ?

[Just Me]

Александр Черемхин, есть key, а значение this.elements[key] может быть undefined в случае отсутствия соответствующего поля в форме

[Александр Черемхин]

а значение this.elements[key] может быть undefined

Значит так тому и быть. Если например phone="", то получится

data = {
  ...
  mail: '[e-mail]',
  phone: ''
  ...
}

и это правильно.

[Just Me]

Александр Черемхин, в коде автора в this.elements попадает выборка DOM элементов формы. Если в форме нет инпута с name="email", то this.elements.email будет undefined, соответственно this.elements.email.value вызовет ошибку. Следовательно, проводится проверка на фильтрацию существующих полей ( значений ключей )

[Александр Черемхин]

Если в форме нет инпута с name="email", то

значит и ключа key не будет

const elements ={
   text: 'писец',
    //email:''  нет его в объекте
   phone:'877346868'
}
const keys = Object.keys(elements)) //  ['text', 'phome'] -- нет mail
keys.forEach(key => console.log(key,  elements[key])  
// выведет только 
// text, 'писец' 
// phone, '877346868'
// а mail - НЕ ВЫВЕДЕТ ПОТОМУ КАК НЕТ ЕГО

[Александр Черемхин]

И вообще надо писать

const data = Object.keys(this.elements).reduce((res, key)=>({...res, [key]:this.elements[key].value});

,но это трудно для чтения видимо, так что давайте нахерачим

let data = {}
for(let i in this.elements){
  if( this.elements.hasOwnProperty(i)){
    if( this.elements[i] ){
      data[i] = this.elements[i].value
    }
  }
}

[Just Me]

Александр Черемхин,

const elements ={
   text: 'писец',
    //email:''  нет его в объекте
   phone:'877346868'
}

Ключ email как раз в объекте есть. Ошибка в передаваемом в него значении

но это трудно для чтения видимо, так что давайте нахерачим

да. Для незнакомых с действием ф-ции reduce

[Александр Черемхин]

Ключ email как раз в объекте есть

Пришлось проверить все и написать в живую. Я не поленился и проверил работу в основных браузерах.
Привожу код полностью под задачу одна функция отправки для всех форм.

<form id="test" method="post" action="/test">
    <input name="phone" type="tel" value="9991112233"/>
    <textarea name="description">Bla bla bla</textarea>
    <input name="email" type="text" value="[e-mail]"/>

    <!--  на кнопке нет атрибута name-->
    <button type="submit">Submit</button>
</form>

<form id="test1" method="post" action="/test1">
    <input name="phone" type="tel" value="9991112233"/>
    <textarea name="description">Bla bla bla</textarea>
    <!--  нет email в форме-->
    <button type="submit">Submit</button>
</form>

/** Обработчик отправки формы
     * @param event submit
     * @returns  Promise
     */
    const onSubmit = function(e){
        e.preventDefault();
        // this - указывает на форму где сработало событие submit
        // собираем все поля из формы
        const data = Object.keys(this.elements)  // здесь this.elements - HTMLFormControlsCollection
            .reduce((res, key) => {
                const {name, value} = this.elements[key]; // проверять не требуется !!!!
                if (name) // есть атрибут name ? 
                    res[name] = value;
                return res;
            }, {});

        const options = {
            headers: {
                'Content-Type': 'application/json',
            },
            method: 'post',
            body: JSON.stringify(data)
        };

        return fetch(this.action, options);
    };

    // событие submit для всех форм
    $('form').on('submit', onSubmit);