-
-
Save josephdicdican/49a293147e2855b8a8d1037684b8c8c7 to your computer and use it in GitHub Desktop.
Checkbox on Change Require and Show Inputs (source: https://jsfiddle.net/jdme/s28oz6Ls/8/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form id="my-form" action="#"> | |
<div class="form-group"> | |
<label>Email address:</label> | |
<input type="email" class="form-control" required> | |
</div> | |
<div class="form-group"> | |
<label>Password:</label> | |
<input type="password" class="form-control"> | |
</div> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" id="subscribe"> Subscribe </label> | |
</div> | |
<div id="subscription-inputs"> | |
<div class="form-group"> | |
<label>City</label> | |
<input type="text" class="form-control"> | |
</div> | |
<div class="form-group"> | |
<label>State</label> | |
<input type="text" class="form-control"> | |
</div> | |
</div> | |
<button type="submit" class="btn btn-default">Submit</button> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var form = $('#my-form'), | |
checkbox = $('#subscribe'), | |
subscription_inputs = $('#subscription-inputs'); | |
subscription_inputs.hide(); | |
checkbox.on('click', function() { | |
if ($(this).is(':checked')) { | |
subscription_inputs.show(); | |
subscription_inputs.find('input').attr('required', true); | |
} else { | |
subscription_inputs.hide(); | |
subscription_inputs.find('input').attr('required', false); | |
} | |
}); | |
form.submit(function() { | |
alert('you submitted thanks'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Roboto'); | |
* { | |
font-family: 'Roboto', sans-serif; | |
} | |
body { | |
padding: 80px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment