PHP - How to Pass Value from Previous Textbox to Newly Created Row on the Same Page?

Question

I'm planning to use a form to register new Teacher (see image bellow). A teacher can assign to different classes to teach different subjects.

Is it possible to pass the value from textbox in Row1_Column1 (AAAA) to textbox in Row2_Column1 when a new row is created by clicking on button (+)?

I don't want the user to take pain in typing the same values in some of the textboxes - the values will be the same. Only [Subject Taught] and [Class Taught] columns might be different, so i want to leave those empty for every new row created.

Sample Form

My code is as follows:

 <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <div class="row"> <div class="col-xs-12"> <p><button class="btn btn-success" type="button" name="viewStaff"> <i class="ace-icon fa fa-eye bigger-120"></i> View List</button> </p> <form method="post" id="insert_form"> <span id="error"></span> <table class="table table-bordered" id="staff_table"> <thead> <tr> <th>Name (Initials)</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Class Assigned</th> <th>Subject Taught</th> <th>Class Taught</th> <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th> </tr> </thead> </table> <div class="space-24"></div> <div class="clearfix form-actions"> <div class="center"> <button class="btn btn-info" type="submit" name="submit"> <i class="ace-icon fa fa-check bigger-110"></i> Submit </button> &nbsp; &nbsp; &nbsp; <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> Reset </button> </div> </div> </form> </div> </div> </div> </div> <script> $(document).ready(function(){ $(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; html += '<td><input type="text" name="initials[]" class="form-control initials" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="">Select...</option><option value="admin">Admin</option><option value="form_master">Form Master</option><option value="staff">Staff</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><select name="subject_taught[]" class="form-control subject_taught"><option value="">Select...</option><?php echo fill_subject_box($conn); ?></select></td>'; html += '<td><select name="class_taught[]" class="form-control class_taught"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>'; $('#staff_table').append(html); }); $(document).on('click', '.remove', function(){ $(this).closest('tr').remove(); }); $('#insert_form').on('submit', function(event){ event.preventDefault(); var error = ''; $('.initials').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.user_name').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.password').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.role').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_assigned').each(function(){ var count = 1; if($(this).val() == '') { return true; } count = count + 1; }); $('.subject_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); var form_data = $(this).serialize(); if(error == '') { $.ajax({ url:"staff_insert.php", method:"POST", data:form_data, success:function(data) { if(data == 'ok') { $('#staff_table').find("tr:gt(0)").remove(); $('#error').html('<div class="alert alert-success">Staff Details Saved</div>'); } } }); } else { $('#error').html('<div class="alert alert-danger">'+error+'</div>'); } }); }); </script> 

And staff_insert.php

<?php
//staff_insert.php
$connect = mysqli_connect("localhost", "root", "", "studentsdatabase");
if(isset($_POST["initials"]))
{
 $initials = $_POST["initials"];
 $user_name = $_POST["user_name"];
 $password = $_POST["password"];
 $role = $_POST["role"];
 $class_assigned = $_POST["class_assigned"];
 $subject_taught = $_POST["subject_taught"];
 $class_taught = $_POST["class_taught"];

 $query = '';
 for($count = 0; $count<count($initials); $count++)
 {
  $initials_clean = mysqli_real_escape_string($connect, $initials[$count]);
  $user_name_clean = mysqli_real_escape_string($connect, $user_name[$count]);
  $password_clean = mysqli_real_escape_string($connect, $password[$count]);
  $role_clean = mysqli_real_escape_string($connect, $role[$count]);
  $class_assigned_clean = mysqli_real_escape_string($connect, $class_assigned[$count]);
  $subject_taught_clean = mysqli_real_escape_string($connect, $subject_taught[$count]);
  $class_taught_clean = mysqli_real_escape_string($connect, $class_taught[$count]);

  if($initials_clean != '' && $user_name_clean != '' && $password_clean != '' && $role_clean != '' && $class_assigned_clean != '' && $subject_taught_clean != '' && $class_taught_clean != '')
  {
   $query .= '
   INSERT INTO tbl_users(fullname, username, password, role, class_assigned, subject_taught, class_taught) 
   VALUES("'.$initials_clean.'", "'.$user_name_clean.'", "'.$password_clean.'", "'.$role_clean.'", "'.$class_assigned_clean.'", "'.$subject_taught_clean.'", "'.$class_taught_clean.'"); 
   ';
  }
 }
 if($query != '')
 {
  if(mysqli_multi_query($connect, $query))
  {
   echo 'ok';
  }
 }
}
?>

Please if you know of a better way, kindly help.

Thanks.

EDIT :

New Image Please check this image

How can I manipulate the above jquery to make the Name , Username , Password , Role and Class Assigned appear for each row the remaining inputs Subject Taught and Class Taught ?

Please help.

Answer 1

Some fields are not populated as no server side data can be retrived here. Bu you can see the example for the Role column.

Look for this part in the snippet:

  // Here is were you can do the conditional and copying part
  var last_row_role_sel_val = $('#staff_table tr:last td:nth-child(4) select option:selected').val();
  var last_row_role_sel_html = $('#staff_table tr:last td:nth-child(4) select option:selected').html();
  console.log('last_row_role_sel_val',last_row_role_sel_val);
  console.log('last_row_role_sel_html',last_row_role_sel_html);

And the replacement part

if (last_row_role_sel_val!=undefined && last_row_role_sel_val!="") {
  html += '<td><select name="role[]" class="form-control role"><option value="'+last_row_role_sel_val+'">'+last_row_role_sel_html+'</option></select></td>';
} else {
...

 //$( "b" ).clone().prependTo( "p" ); $(document).ready(function(){ $(document).on('click', '.add', function(){ var html = ''; html += '<tr>'; // Here is were you can do the conditional and copying part var last_5_rows_sel_val = []; var last_5_rows_sel_html = []; for (var i=1;i<=5;i++) { if (i>=4) { last_5_rows_sel_val.push($('#staff_table tr:last td:nth-child('+i+') select option:selected').val()); last_5_rows_sel_html.push($('#staff_table tr:last td:nth-child('+i+') select option:selected').html()); } else { last_5_rows_sel_val.push($('#staff_table tr:last td:nth-child('+i+') input').val()); last_5_rows_sel_html.push(''); } } if (last_5_rows_sel_val[0]!=undefined && last_5_rows_sel_val[0]!="") { html += '<td><input type="text" name="initials[]" class="form-control initials" value="'+last_5_rows_sel_val[0]+'" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" value="'+last_5_rows_sel_val[1]+'" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" value="'+last_5_rows_sel_val[2]+'" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="'+last_5_rows_sel_val[3]+'">'+last_5_rows_sel_html[3]+'</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="'+last_5_rows_sel_val[4]+'">'+last_5_rows_sel_html[4]+'</option></select></td>'; } else { html += '<td><input type="text" name="initials[]" class="form-control initials" /></td>'; html += '<td><input type="text" name="user_name[]" class="form-control user_name" /></td>'; html += '<td><input type="password" name="password[]" class="form-control password" /></td>'; html += '<td><select name="role[]" class="form-control role"><option value="">Select...</option><option value="admin">Admin</option><option value="form_master">Form Master</option><option value="staff">Staff</option></select></td>'; html += '<td><select name="class_assigned[]" class="form-control class_assigned"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; } html += '<td><select name="subject_taught[]" class="form-control subject_taught"><option value="">Select...</option><?php echo fill_subject_box($conn); ?></select></td>'; html += '<td><select name="class_taught[]" class="form-control class_taught"><option value="">Select...</option><?php echo fill_class_box($conn); ?></select></td>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">-</span></button></td></tr>'; $('#staff_table').append(html); }); $(document).on('click', '.remove', function(){ $(this).closest('tr').remove(); }); $('#insert_form').on('submit', function(event){ event.preventDefault(); var error = ''; $('.initials').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.user_name').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.password').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.role').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_assigned').each(function(){ var count = 1; if($(this).val() == '') { return true; } count = count + 1; }); $('.subject_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); $('.class_taught').each(function(){ var count = 1; if($(this).val() == '') { error = "<p>Please enter the required information</p>"; return false; } count = count + 1; }); var form_data = $(this).serialize(); if(error == '') { $.ajax({ url:"staff_insert.php", method:"POST", data:form_data, success:function(data) { if(data == 'ok') { $('#staff_table').find("tr:gt(0)").remove(); $('#error').html('<div class="alert alert-success">Staff Details Saved</div>'); } } }); } else { $('#error').html('<div class="alert alert-danger">'+error+'</div>'); } }); }); 

 table,th,tr,td,div,p { border: 1px solid #888; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <div class="row"> <div class="col-xs-12"> <p><button class="btn btn-success" type="button" name="viewStaff"> <i class="ace-icon fa fa-eye bigger-120"></i> View List</button> </p> <form method="post" id="insert_form"> <span id="error"></span> <table class="table table-bordered" id="staff_table"> <thead> <tr> <th>Name (Initials)</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Class Assigned</th> <th>Subject Taught</th> <th>Class Taught</th> <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">+</span></button></th> </tr> </thead> </table> <div class="space-24"></div> <div class="clearfix form-actions"> <div class="center"> <button class="btn btn-info" type="submit" name="submit"> <i class="ace-icon fa fa-check bigger-110"></i> Submit </button> &nbsp; &nbsp; &nbsp; <button class="btn" type="reset"> <i class="ace-icon fa fa-undo bigger-110"></i> Reset </button> </div> </div> </form> </div> </div> </div> </div> 

UPDATED!!