How to merge static and dynamic forms together in php?

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>

JavaScript
​x
 
<?phpinclude_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>

JavaScript
 
<?phpinclude_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";
    }

?>

JavaScript
 
<?phpinclude_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.

Answer

put all the form inputs inside a single set of <form> tags.

<form action="testme.php" method="POST" enctype="multipart/form-data" name="master" id="my-single-form" autocomplete="on">
<input type="text" name="userid" id="userid" placeholder="userid" />....
<table class="table table-bordered table-hover" id="dynamic_field">
              <tr>
                <td><input name="duserid[]" type="text" /></td>....
</form>

JavaScript
 
<form action="testme.php" method="POST" enctype="multipart/form-data" name="master" id="my-single-form" autocomplete="on"><input type="text" name="userid" id="userid" placeholder="userid" />....<table class="table table-bordered table-hover" id="dynamic_field">              <tr>                <td><input name="duserid[]" type="text" /></td>....</form>​

You’ve still got multiple forms and submit them separately, so you need to combine them to one and submit them as one

submitForms = function(){
    document.forms["my-single-form"].submit();
}

JavaScript
 
submitForms = function(){    document.forms["my-single-form"].submit();}​

var formdata = $("#my-single-form").serialize(); //etc

Once you’ve done this implement some checks for your data – e.g. check $_POST["duserid"] and any other required variables are set before you do any inserting.

Then, and with some immediate urgency go and look up prepared statements and implement them

Advertisement

Answer