JSFiddle - React, Tailwind, and code Playground

by slackero

HTML

<form id="myform">
    <p><label>Field 1</label> <input type="text" id="field1"></p>
    <p><label>Field 2</label> <input type="text" id="field2"></p>
    <p><label>Field 3</label> <input type="text" id="field3"></p>
    <p><button type="subject">Calculate</button></p>
    <p id="result"></p>
</form>

JavaScript

$(function(){
	var $myform = $('#myform');
	if($myform.length) {
		var $f1 = $('#field1'), $f2 = $('#field2'), $f3 = $('#field3'), $r = $('#result');
		var calculateResult = function() {
			var $f1val = $f1.val(), $f2val = $f2.val(), $f3val = $f3.val();
			var calcresult = parseInt($f1val, 10) + parseInt($f2val, 10) + parseInt($f3val, 10);
			$r.html('Das Ergebnis ist <strong>' + calcresult + '</strong>');
		};
		$myform.submit(function(e) {
			e.preventDefault();
			calculateResult();
		});
	}
});