JSFiddle - React, Tailwind, and code Playground

by gromer

HTML

<!-- These hidden inputs would be populated with information from the server. -->
<input type="hidden" id="a" value="40" />
<input type="hidden" id="b" value="2" />

<label for="first-name">First Name:</label>&nbsp;&nbsp;
<input type="text" id="first-name" /><br />
<label for="last-name">Last Name:</label>&nbsp;&nbsp;
<input type="text" id="last-name" /><br />
<input type="submit" id="s" value="Submit" />

<input type="text" readonly id="result" />

<input type="hidden" id="r" />

JavaScript

$('#s').click(function(event) {
    // Get the numbers the server sent to us.
    var a = Number($('#a').val());
    var b = Number($('#b').val());
    
    // Compute the result.
    var result = a + b;
    
    // Add to a hidden element, which then gets sent to the server.
    $('#r').val(result);
    
    // This is just to display the result for demo purposes.
    $('#result').val(result);
    
    // Let the form post to the server.
    return true;
});