Skip to content

Instantly share code, notes, and snippets.

@OlivierJM

OlivierJM/index.html

Created March 19, 2018 16:33
Show Gist options
  • Save OlivierJM/3118a48c8798af834864b4a9303f5c4b to your computer and use it in GitHub Desktop.
Save OlivierJM/3118a48c8798af834864b4a9303f5c4b to your computer and use it in GitHub Desktop.
Download ZIP
Form Recipe: Conditionally disabling the button // source https://jsbin.com/zucuyup
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form Recipe: Conditionally disabling the button</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
}
body {
padding-top: 0;
font-family: Helvetica Neue, Helvetica;
background: #f7f7f7;
}
h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 5px;
}
form {
padding: 0 40px;
}
form input {
display: block;
width: 100%;
font-size: 20px;
padding: 5px 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
}
form input.error {
border-color: red;
}
form button {
display: block;
width: 100%;
appearance: none;
border-radius: 5px;
background-color: #84c00c;
color: #fff;
border: none;
font-size: 16px;
height: 40px;
margin-top: 30px;
}
form button:hover {
background-color: #669509;
}
form button:disabled {
background-color: #dbf99f;
color: #333;
}
form button.small {
display: inline-block;
width: auto;
padding: 0 20px;
background-color: #777;
font-size: 14px;
}
form button.small:hover {
background-color: #999;
}
.shareholder {
display: flex;
direction: row;
align-items: center;
}
.shareholder button {
margin: 0;
margin-left: 10px;
}
</style>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var IncorporationForm = (function (_React$Component) {
_inherits(IncorporationForm, _React$Component);
function IncorporationForm() {
var _this = this;
_classCallCheck(this, IncorporationForm);
_get(Object.getPrototypeOf(IncorporationForm.prototype), 'constructor', this).call(this);
this.handleNameChange = function (evt) {
_this.setState({ name: evt.target.value });
};
this.handleShareholderNameChange = function (idx) {
return function (evt) {
var newShareholders = _this.state.shareholders.map(function (shareholder, sidx) {
if (idx !== sidx) return shareholder;
return _extends({}, shareholder, { name: evt.target.value });
});
_this.setState({ shareholders: newShareholders });
};
};
this.handleSubmit = function (evt) {
var _state = _this.state;
var name = _state.name;
var shareholders = _state.shareholders;
alert('Incorporated: ' + name + ' with ' + shareholders.length + ' shareholders');
};
this.handleAddShareholder = function () {
_this.setState({ shareholders: _this.state.shareholders.concat([{ name: '' }]) });
};
this.handleRemoveShareholder = function (idx) {
return function () {
_this.setState({ shareholders: _this.state.shareholders.filter(function (s, sidx) {
return idx !== sidx;
}) });
};
};
this.state = {
name: '',
shareholders: [{ name: '' }]
};
}
_createClass(IncorporationForm, [{
key: 'render',
value: function render() {
var _this2 = this;
return React.createElement(
'form',
{ onSubmit: this.handleSubmit },
React.createElement('input', {
type: 'text',
placeholder: 'Company name, e.g. Magic Everywhere LLC',
value: this.state.name,
onChange: this.handleNameChange
}),
React.createElement(
'h4',
null,
'Shareholders'
),
this.state.shareholders.map(function (shareholder, idx) {
return React.createElement(
'div',
{ className: 'shareholder' },
React.createElement('input', {
type: 'text',
placeholder: 'Shareholder #' + (idx + 1) + ' name',
value: shareholder.name,
onChange: _this2.handleShareholderNameChange(idx)
}),
React.createElement(
'button',
{ type: 'button', onClick: _this2.handleRemoveShareholder(idx), className: 'small' },
'-'
)
);
}),
React.createElement(
'button',
{ type: 'button', onClick: this.handleAddShareholder, className: 'small' },
'Add Shareholder'
),
React.createElement(
'button',
null,
'Incorporate'
)
);
}
}]);
return IncorporationForm;
})(React.Component);
ReactDOM.render(React.createElement(IncorporationForm, null), document.body);
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
}
body {
padding-top: 0;
font-family: Helvetica Neue, Helvetica;
background: #f7f7f7;
}
h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 5px;
}
form {
padding: 0 40px;
}
form input {
display: block;
width: 100%;
font-size: 20px;
padding: 5px 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
}
form input.error {
border-color: red;
}
form button {
display: block;
width: 100%;
appearance: none;
border-radius: 5px;
background-color: #84c00c;
color: #fff;
border: none;
font-size: 16px;
height: 40px;
margin-top: 30px;
}
form button:hover {
background-color: #669509;
}
form button:disabled {
background-color: #dbf99f;
color: #333;
}
form button.small {
display: inline-block;
width: auto;
padding: 0 20px;
background-color: #777;
font-size: 14px;
}
form button.small:hover {
background-color: #999;
}
.shareholder {
display: flex;
direction: row;
align-items: center;
}
.shareholder button {
margin: 0;
margin-left: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">class IncorporationForm extends React.Component {
constructor() {
super();
this.state = {
name: '',
shareholders: [{ name: '' }],
};
}
handleNameChange = (evt) => {
this.setState({ name: evt.target.value });
}
handleShareholderNameChange = (idx) => (evt) => {
const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
if (idx !== sidx) return shareholder;
return { ...shareholder, name: evt.target.value };
});
this.setState({ shareholders: newShareholders });
}
handleSubmit = (evt) => {
const { name, shareholders } = this.state;
alert(`Incorporated: ${name} with ${shareholders.length} shareholders`);
}
handleAddShareholder = () => {
this.setState({ shareholders: this.state.shareholders.concat([{ name: '' }]) });
}
handleRemoveShareholder = (idx) => () => {
this.setState({ shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx) });
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Company name, e.g. Magic Everywhere LLC"
value={this.state.name}
onChange={this.handleNameChange}
/>
<h4>Shareholders</h4>
{this.state.shareholders.map((shareholder, idx) => (
<div className="shareholder">
<input
type="text"
placeholder={`Shareholder #${idx + 1} name`}
value={shareholder.name}
onChange={this.handleShareholderNameChange(idx)}
/>
<button type="button" onClick={this.handleRemoveShareholder(idx)} className="small">-</button>
</div>
))}
<button type="button" onClick={this.handleAddShareholder} className="small">Add Shareholder</button>
<button>Incorporate</button>
</form>
)
}
}
ReactDOM.render(<IncorporationForm />, document.body);</script></body>
</html>
Raw
jsbin.zucuyup.css
* {
box-sizing: border-box;
}
body {
padding-top: 0;
font-family: Helvetica Neue, Helvetica;
background: #f7f7f7;
}
h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 5px;
}
form {
padding: 0 40px;
}
form input {
display: block;
width: 100%;
font-size: 20px;
padding: 5px 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
}
form input.error {
border-color: red;
}
form button {
display: block;
width: 100%;
appearance: none;
border-radius: 5px;
background-color: #84c00c;
color: #fff;
border: none;
font-size: 16px;
height: 40px;
margin-top: 30px;
}
form button:hover {
background-color: #669509;
}
form button:disabled {
background-color: #dbf99f;
color: #333;
}
form button.small {
display: inline-block;
width: auto;
padding: 0 20px;
background-color: #777;
font-size: 14px;
}
form button.small:hover {
background-color: #999;
}
.shareholder {
display: flex;
direction: row;
align-items: center;
}
.shareholder button {
margin: 0;
margin-left: 10px;
}
Raw
jsbin.zucuyup.js
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var IncorporationForm = (function (_React$Component) {
_inherits(IncorporationForm, _React$Component);
function IncorporationForm() {
var _this = this;
_classCallCheck(this, IncorporationForm);
_get(Object.getPrototypeOf(IncorporationForm.prototype), 'constructor', this).call(this);
this.handleNameChange = function (evt) {
_this.setState({ name: evt.target.value });
};
this.handleShareholderNameChange = function (idx) {
return function (evt) {
var newShareholders = _this.state.shareholders.map(function (shareholder, sidx) {
if (idx !== sidx) return shareholder;
return _extends({}, shareholder, { name: evt.target.value });
});
_this.setState({ shareholders: newShareholders });
};
};
this.handleSubmit = function (evt) {
var _state = _this.state;
var name = _state.name;
var shareholders = _state.shareholders;
alert('Incorporated: ' + name + ' with ' + shareholders.length + ' shareholders');
};
this.handleAddShareholder = function () {
_this.setState({ shareholders: _this.state.shareholders.concat([{ name: '' }]) });
};
this.handleRemoveShareholder = function (idx) {
return function () {
_this.setState({ shareholders: _this.state.shareholders.filter(function (s, sidx) {
return idx !== sidx;
}) });
};
};
this.state = {
name: '',
shareholders: [{ name: '' }]
};
}
_createClass(IncorporationForm, [{
key: 'render',
value: function render() {
var _this2 = this;
return React.createElement(
'form',
{ onSubmit: this.handleSubmit },
React.createElement('input', {
type: 'text',
placeholder: 'Company name, e.g. Magic Everywhere LLC',
value: this.state.name,
onChange: this.handleNameChange
}),
React.createElement(
'h4',
null,
'Shareholders'
),
this.state.shareholders.map(function (shareholder, idx) {
return React.createElement(
'div',
{ className: 'shareholder' },
React.createElement('input', {
type: 'text',
placeholder: 'Shareholder #' + (idx + 1) + ' name',
value: shareholder.name,
onChange: _this2.handleShareholderNameChange(idx)
}),
React.createElement(
'button',
{ type: 'button', onClick: _this2.handleRemoveShareholder(idx), className: 'small' },
'-'
)
);
}),
React.createElement(
'button',
{ type: 'button', onClick: this.handleAddShareholder, className: 'small' },
'Add Shareholder'
),
React.createElement(
'button',
null,
'Incorporate'
)
);
}
}]);
return IncorporationForm;
})(React.Component);
ReactDOM.render(React.createElement(IncorporationForm, null), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment