JSFiddle - React, Tailwind, and code Playground
by James Allardice
HTML
<form>
<label><strong>Enter the phone details below and click the "Call Now" button. </strong></label><br /> <br />
<label>Phone number </label> <br />
<input type="tel" id="phone" class="formfield" style="width: 150px; height: 33px;" placeholder="usa" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}"/><br /> <br />
<label>What country do you reside in? </label> <br />
<label>USA </label>
<input type="checkbox" id="usa" style="float: left;"> <br />
<label>UK </label>
<input type="checkbox" id="uk" style="float: left;"> <br /> <br />
<button type"submit" class="button white">Call Now </button>
</form>
JavaScript
$(function() {
$('#usa').click(function() {
if ( $(this).is(':checked') )
$('#phone').attr('placeholder', '555-555-5555');
});
});