JSFiddle - React, Tailwind, and code Playground
HTML
<p><input type="radio" name="email" value="[email protected]" />Apple</p>
<p><input type="radio" name="email" value="[email protected]" />Microsoft</p>
<p><input type="radio" name="email" value="[email protected]" />Linux</p>
<p><input type="radio" name="email" value="other" />Other: <input type="text" name="other_email" /></p>
<p><pre id="mailto_link"></pre></p>
JavaScript
$(function() {
$(':radio[name=email]').on('change', function() {
if ($(this).val() == 'other') {
$('#mailto_link').text('mailto:'+$('input[name=other_email]').val()+'?this+is+the+predefined+message');
}
else {
$('#mailto_link').text('mailto:'+$(this).val()+'?this+is+the+predefined+message');
}
});
$('input[name=other_email]').on('keyup', function() {
if ($(':radio[name=email]:checked').val() == 'other') {
$('#mailto_link').text('mailto:'+$(this).val()+'?this+is+the+predefined+message');
}
});
});