Импортирование JS-модуля для вызова при отправке формы HTML - PullRequest
Новая
       11

Импортирование JS-модуля для вызова при отправке формы HTML

0 голосов
/ 30 октября 2018

Я помогаю другу с проектом, который требует использования только HTML. Я писал только в React при написании внешнего интерфейса, поэтому никогда не понимал взаимодействия между простым HTML и Javascript. Прямо сейчас у нас есть форма sign up, которая при отправке должна сделать запрос к серверной части. Запрос записан в отдельном файле, и я не могу заставить его вызвать файл при отправке формы.

HTML-файл: 

<head>
  
<script src="./build/createUser.js"></script>

</head>


  ...
  
  
<form onsubmit="createUser()">
  <input>
  <button type="submit">Sign Up</button>

Файл JS до его создания с помощью browserify: 

const serviceRequest = require('../../packages/serviceRequest');

module.exports = function createUser (options, cb) {
	serviceRequest({
		method: 'POST',
		uri: '/user/create',
		body: {
			email: options.email,
			password: options.password,
			studentName: options.name
		}
	}, function (err, resp, body) {
		if (err) {
			console.log(err);
			cb(err);
		}
		if (resp.statusCode >= 400) {
			console.log('Unexpected response from create user endpoint');
			console.log(resp.statusCode);
			console.log(body);
			cb('Unexpected Response');
		}

		cb(null, body);
	});
};

1 Ответ

0 голосов
/ 31 октября 2018

(я полагаю) проблема, с которой вы сталкиваетесь, заключается в том, что то, как вы управляете экспортом, означает, что ваша форма не может ссылаться на вашу функцию onSubmit. У вас нет проблем с компиляцией вашего проекта, верно?

У меня есть два варианта для вас.

( ONE ) Привязать прослушиватель событий (очиститель) 

import serviceRequest from '../../packages/serviceRequest';
const createUser = (event, options) => {
    event.preventDefault(); // Prevent default action of form
    // serviceRequest() // Perform Logic
};
document.querySelector('form').addEventListener(createUser); // Or add a more specific selector

( TWO ) Добавьте вашу функцию в глобальную область. 

const createUser = (event, options) => {};
window.createUser = createUser;

Если ваш конвейер сборки просто объединяет весь ваш javascript, ваши const будут объявлены глобально, но browserify / babel обернет все в закрытие.

Надеюсь, это поможет!

...