Skip to content

Instantly share code, notes, and snippets.

@arya-oss

arya-oss/form.php

Created December 21, 2016 12:25
Show Gist options
  • Save arya-oss/9518766dc1d3fd9e5eb7964df942c325 to your computer and use it in GitHub Desktop.
Save arya-oss/9518766dc1d3fd9e5eb7964df942c325 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic option form adding
Raw
form.php
<?php
if (isset($_POST) && !empty($_POST['name'])) {
var_dump($_POST);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Dev</title>
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon{
font-size: 12px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-heading">
<div class="panel-title">
<h3>Add Doctor</h3>
</div>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal form-groups-bordered" action="#" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<input type="text" name="name" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Email</label>
<div class="col-sm-5">
<input type="email" name="email" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Phone</label>
<div class="col-sm-5">
<input type="text" name="phone" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" name="password" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Local Address</label>
<div class="col-sm-5">
<input type="text" name="localAddress" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Permanent Address</label>
<div class="col-sm-5">
<input type="text" name="permanentAddress" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Country</label>
<div class="col-md-5">
<select class="form-control countries" name="country" id="countryId sel1">
<option value="">Select Country </option>
</select>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">State *</label>
<div class="col-md-5">
<select class="form-control states" name="state" id="sel12 stateId">
<option value="">Select State </option>
</select>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">City</label>
<div class="col-md-5">
<select class="form-control cities" id="sel13 cityId" name="city">
<option value="">Select City </option>
</select>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Pincode</label>
<div class="col-sm-5">
<input type="text" name="pincode" class="form-control" id="field-1" >
</div>
</div>
<div class="form-group" id="doctor_qual">
<label for="field-1" class="col-sm-3 control-label">Qualification</label>
<input type="hidden" name="h_qualification" value="">
<div class="col-md-5">
<div class="row" style="margin-bottom:5px">
<div class="col-md-11">
<select class="form-control" name="qualification" required>
<option value="">Choose Qualification</option>
<option value="1">MBBS</option>
<option value="2">MD</option>
<option value="3">BDS</option>
<option value="4">MMD</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add" style="margin-top:0px;">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="form-group" id="doctor_spl">
<label for="field-1" class="col-sm-3 control-label">Speciality</label>
<input type="hidden" name="h_speciality" value="">
<div class="col-md-5">
<div class="row" style="margin-bottom:5px">
<div class="col-md-11">
<select class="form-control" name="speciality">
<option value="">Choose Speciality</option>
<option value="1">Child Deases</option>
<option value="2">Physician</option>
<option value="3">Surgeon</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add" style="margin-top:0px;">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Registration No.</label>
<div class="col-sm-5">
<input type="text" name="registrationNumber" class="form-control" id="field-1" >
</div>
</div>
<!--
<div class="form-group">
<label for="field-ta" class="col-sm-3 control-label"></label>
<div class="col-sm-5">
<select name="department_id" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
-->
<!--
<div class="form-group">
<label for="field-ta" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<textarea name="profile" class="form-control html5editor" id="field-ta" data-stylesheet-url="assets/css/wysihtml5-color.css"></textarea>
</div>
</div>
-->
<div class="form-group">
<label class="col-sm-3 control-label">Image</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
<img src="http://placehold.it/200x150" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="image" accept="image/*">
</span>
<a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3 control-label col-sm-offset-2">
<input type="submit" class="btn btn-success" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Load script file at ends -->
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).parent('div').parent('div'),
currentEntry = $(this).parent('div'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
$(this).removeClass('btn-success btn-add').addClass('btn-danger btn-remove');
$(this).find('span').removeClass('glyphicon-plus-sign').addClass('glyphicon-minus-sign');
}).on('click', '.btn-remove', function(e) {
e.preventDefault();
$(this).parent('div').remove();
return false;
});
$("form").submit(function(e){
e.preventDefault();
var h_input = $("#doctor_qual").find('input');
var str = "";
$("#doctor_qual").find('select').each(function(index, elem) {
str += elem.value+",";
});
$(h_input).val(str);
str = "";
h_input = $("#doctor_spl").find('input');
var str = "";
$("#doctor_spl").find('select').each(function(index, elem) {
str += elem.value+",";
});
$(h_input).val(str);
// $(this).submit();
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment