Skip to content
Advertisement

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>

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.

Advertisement

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>

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();
}

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

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement