Skip to content

Instantly share code, notes, and snippets.

@rvvvt

rvvvt/index.html

Created August 25, 2022 06:26
Show Gist options
  • Save rvvvt/2c83c0e92e394e982e0385390388922d to your computer and use it in GitHub Desktop.
Save rvvvt/2c83c0e92e394e982e0385390388922d to your computer and use it in GitHub Desktop.
Download ZIP
dynamically create form fields based on selection w jquery
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
form > div { margin-right: 10px; }
input:invalid {}
input:valid
{ border: 1px solid green; }
</style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="container">
<div class="rendered-form">
<div class="">
<h2 access="false" id="control-8508901">form title</h2>
</div>
<form action="#" method="post" name="form_submit" id="form">
<div style="margin-top: 10px;">
<h4>Organization Name:</h4>
</div>
<div class="formbuilder-text">
<input type="text" class="form-control" name="org_name" access="false" id="org_name" required>
</div>
<div class="col-3 field-license_qty form-group formbuilder-number">
<label for="license_qty" class="formbuilder-number-label">How many users/licenses?<span class="formbuilder-required">*</span>
</label>
<select class="form-control" name="license_qty" id="license_qty" required="required" aria-required="true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div style="margin-top: 10px;">
<h4>User #1</h4>
</div>
<div class="formbuilder-text" style="display:inline-block;">
<label for="first_name_1" class="formbuilder-text-label">First Name</label>
<input type="text" class="form-control inline" name="first_name_1" access="false" id="first_name_1" />
</div>
<div class="formbuilder-text" style="display:inline-block;">
<label for="last_name_1" class="formbuilder-text-label">Last Name</label>
<input type="text" class="form-control inline" name="last_name_1" access="false" id="last_name_1" />
</div>
<div class="formbuilder-text" style="display:inline-block;">
<label for="email_1" class="formbuilder-text-label">Email</label>
<input type="email" class="form-control inline" name="email_1" access="false" id="email_1" />
</div>
<div class="formbuilder-text" style="display:inline-block;">
<label for="mobile_number_1" class="formbuilder-text-label">Mobile Number</label>
<input type="tel" class="form-control inline" name="mobile_number_1" access="false" id="mobile_number_1" />
</div>
<div id="form_submit">
</div>
</form>
</div>
<!-- </div> -->
</div>
</body>
<script>
$(document).ready(function() {
$('select#license_qty').change(function() {
var sel_value = $('option:selected').val();
if (sel_value == 1) {
$("#form_submit").empty();
// $("#form1").css({ 'display': 'none' });
} else {
$("#form_submit").empty();
create(sel_value);
$("#form_submit").append($("<button type='submit'>Register " + sel_value + " users</button>"))
}
});
function create(sel_value) {
for (var i = 2; i <= sel_value; i++) {
$("div#form_submit").append($("#form_submit").append($("<div style='margin-top:10px;'/>").append($("<h4/>").text("User #" + i)),
$('<div/>', {
style: 'display:inline-block;'
}).append(
$("<label>First Name</label>", {
for: 'first_name_' + i,
class: 'formbuilder-number-label',
}),
$("<input/>", {
type: 'text',
name: 'first_name_' + i,
id: 'first_name_' + i,
class: 'form-control inline',
required: ''
}),
),
$('<div/>', {
style: 'display:inline-block;'
}).append(
$("<label>Last Name</label>", {
for: 'last_name_' + i,
class: 'formbuilder-number-label',
}),
$("<input/>", {
type: 'text',
name: 'last_name_' + i,
class: 'form-control inline',
required: ''
}),
),
$('<div/>', {
style: 'display:inline-block;'
}).append(
$("<label>Email</label>", {
for: 'email_' + i,
class: 'formbuilder-number-label',
}),
$("<input/>", {
type: 'email',
name: 'email_' + i,
id: 'email_' + i,
class: 'form-control inline',
required: ''
}),
),
$('<div/>', {
style: 'display:inline-block;'
}).append(
$("<label>Mobile Number</label>", {
for: 'mobile_number_' + i,
class: 'formbuilder-number-label',
}),
$("<input/>", {
type: 'tel',
name: 'mobile_number_' + i,
id: 'mobile_number_' + i,
class: 'form-control inline',
required: '',
minlength: '10'
}),
),
$("<br/><br/>")
))
}
}
});
</script>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment