Skip to content

Instantly share code, notes, and snippets.

@cikal

cikal/populate_form.html

Created October 3, 2019 21:23
Show Gist options
  • Save cikal/07dc76303156adf6fafff046bd415d52 to your computer and use it in GitHub Desktop.
Save cikal/07dc76303156adf6fafff046bd415d52 to your computer and use it in GitHub Desktop.
Download ZIP
Populate Form by dropdown value
Raw
populate_form.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Populate Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="page-header">Populate Form <small>dropdown</small></h1>
<div class="form-group">
<label>Dropdown</label>
<select id="myDropdown" class="form-control">
<option value="" selected disabled>-- Generate Input --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<hr>
<form id="demo" action="" method=""></form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#myDropdown').on('change', function() {
$('#demo').html('');
for(var i = 1; i <= $(this).val(); i++) {
$('#demo').append(`
<div class="form-group" id="row`+i+`">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" name="name`+i+`A" placeholder="input `+i+`A">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" name="name`+i+`B" placeholder="input `+i+`B">
</div>
</div>
</div>`);
}
$('#demo').append(`
<button type="submit" class="btn btn-primary" name="submit">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
`);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment