Monday, October 10, 2016

Form Replication on Onclick using JQuery

<?php

session_start();

if(isset($_POST['submit'])){


$_SESSION['success'] = 1;

if($_POST['personal']['name'] == ''){
$_SESSION['msg'][] = "Name can't be empty";
$_SESSION['success'] = 0;
}

if($_POST['personal']['email']==''){
$_SESSION['msg'][] = "Email can't be empty";
$_SESSION['success'] = 0;
}


if($_SESSION['success'] == 1) {
header('Location:confirmation.php');
}
else {
if(is_array($_SESSION['msg']) && count($_SESSION['msg'])) {
foreach($_SESSION['msg'] as $msg) {
$string .= $msg.'<br />';
unset($_SESSION['msg']);
}
}
}
}
?>
<html>
<head>
<title>Registration</title>


<style>
.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right;
  width: auto;
  margin-left: 10px;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left;
  width: 200px;
  text-align: left;}

.form_settings input, .form_settings textarea
{ padding: 5px;
  width: 299px;
  font: 100% arial;
  border: 1px solid #E5E5DB;
  background: #FFF;
  color: #47433F;}

.form_settings .submit
{ font: 100% arial;
  border: 1px solid;
  width: 99px;
  margin: 0 0 0 212px;
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer;
  background: #263C56;
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial;
  width: 299px;}

.form_settings .submit
{ font: 100% arial;
  border: 1px solid;
  width: 99px;
  margin: 0 0 0 428px;
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer;
  background: #263C56;
  color: #FFF;}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
var i=1;
$(document).ready(function(){
$('#addMore').click( function(){
i++;
$('#qualification').append('<fieldset class="form_settings" style="width:380px;"><legend>Qualification '+i+'</legend><p><span>Name of Examination: </span><input type="text" name="educational['+i+'][exam]" ></p><p><span>School: </span><input type="text" name="educational['+i+'][school]"></p><p><span>Year of Passing: </span><input type="text" name="educational['+i+'][year]"></p></fieldset>');
});
});
</script></head>

<body>
<form name="form_register" method="post" action="register.php" align="center">
<?php echo $string;  ?>
<fieldset class="form_settings" style="width:580px;">
<legend>Personal Information</legend>
<p><span>Name: </span><input type="text" name="personal[name]"></p>
<p><span>Address: </span>
  <input type="text" name="personal[address]">
</p>
<p><span>Phone: </span><input type="text" name="personal[phone]"></p>
<p><span>Email: </span><input type="text" name="personal[email]"></p>

</fieldset>
<fieldset class="form_settings" style="width:580px;">
<legend>Educational Information</legend>
<input type="button" class="submit" value="Add Another" name="addMore" id="addMore"/>

<div id="qualification">
<fieldset class="form_settings" style="width:380px;">
<legend>Qualification 1</legend>
<p><span>Name of Examination: </span><input type="text" name="educational[0][exam]" ></p>
<p><span>School: </span><input type="text" name="educational[0][school]"></p>
<p><span>Year of Passing: </span><input type="text" name="educational[0][year]"></p>
</fieldset>

</div>


</fieldset>
<input type="submit" name="submit" value="Submit">

</form>

</body>
</html>




No comments:

Post a Comment