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