The my project has two forms. The first one is a static form that is used to collect user information (Form One inserts data into a table named, master). Second form is a dynamic form which collects additional information such as dependents (Form Two inserts data into a table named, dependents).
formone.php code:
<?php
include_once('config.php');
?>
<?php
if(isset($_POST['submit'])){
$userid = $_POST['userid'];
$email = $_POST['email'];
$name = $_POST['name'];
$sql = "INSERT INTO master (userid,email,name)VALUES('$userid','$email','$name')";
$result5 = mysqli_query($mysqli,$sql);
}
?>
<html>
<head></head>
<body>
<form action="testme.php" method="POST" enctype="multipart/form-data" name="master" id="master" autocomplete="on">
<input type="text" name="userid" id="userid" placeholder="userid" /><br>
<input type="text" name="email" id="email" placeholder="email"/><br>
<input type="text" name="name" id="name" placeholder="name"/><br>
<input type="submit" name="submit" id="submit" value="Submit" /><br>
</form>
</body>
</html>
formtwo.php code:
<?php
include_once('config.php');
?>
<html>
<head></head>
<body>
<form name="dependents" id="dependents">
<table class="table table-bordered table-hover" id="dynamic_field">
<tr>
<td><input name="duserid[]" type="text" value="value="<?php echo htmlspecialchars($_SESSION["id"]); ?>""/></td>
<td><input name="dfid[]" type="text" placeholder="Enter DFID"/></td>
<td><input name="gender" type="text" placeholder="Enter Gender" /></td>
<td><input name="childname[]" type="text" placeholder="Enter Child Name" /></td>
<td><input name="age[]" type="text" placeholder="Enter Age"/></td>
<td><button type="button" name="add" id="add" class="btn btn-primary">Add More</button></td>
</tr>
</table>
<input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"> <td><input type="text" name="duserid[]" value="value="<?php echo htmlspecialchars($_SESSION["id"]); ?>""/></td><td><input type="text" name="dfid[]" placeholder="Enter DFID" /></td><td><input type="text" name="gender[]" placeholder="Enter Gender" /></td><td><input type="text" name="childname[]" placeholder="Enter child Name" /></td><td><input type="text" name="age[]" placeholder="Enter Age" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#dependents").serialize();
$.ajax({
url :"save.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#dependents")[0].reset();
}
});
});
});
</script>
save.php code (This is for formtwo.php):
<?php
include_once('config.php');
$privateComData = count($_POST["duserid"]);
if ($privateComData > 0) {
for ($i=0; $i < $privateComData; $i++) {
if (trim($_POST['duserid'] != '')) {
$duserid = $_POST["duserid"][$i];
$dfid = $_POST["dfid"][$i];
$gender = $_POST["gender"][$i];
$childname = $_POST["childname"][$i];
$age = $_POST["age"][$i];
$query = "INSERT INTO dependents (duserid,dfid,gender,childname,age) VALUES ('$duserid','$dfid','$gender','$childname','$age')";
$result = mysqli_query($mysqli, $query);
}
}
echo "Data inserted successfully";
}else{
echo "Please Enter Info";
}
?>
I want these two forms consolidated, So, they can be put on the same webpage. Basically, I want them to be submitted with one button instead of having two different submit buttons.
My Answer:
Rate this post
4 of 5 based on 7367 votesComments