Develop Reference

How to save loop data in the database in php and javascript?

I'm developing a form, which has got some fields and whose data gets saved in the sql server database.
I'm able to save the data to the database for the rest of the form, however I'm stuck at a button which upon clicking shows more fileds. It's a loop which runs five times, so the user will have an option of adding details of their mentors for five times. I'm not sure how to save the data of the loop in the database.
Here's the code:
<div class="container" >
<form class="cmxform" action ='functions/processform.php' id="Form1" method="post" enctype="multipart/form-data">
<div id="FormResult1" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="resultFormContent1"></div>
</div>
<h1>Contact Information</h1>
<div class="form-row">
<div class="container">
<div class="form-group col-md-6">
<label for="fName">First Name </label>
<input type="text" class="form-control" id="fName" name="fName" required>
</div>
<div class="form-group col-md-6">
<label for="lName">Last Name </label>
<input type="text" class="form-control" id="lName" name="lName" required>
</div>
<div class="form-group col-md-6">
<label for="uEmail">University Email </label>
<input type="email" class="form-control" id="uEmail" name="uEmail" required>
</div>
</div>
</div>
<div id=new_site></div>
<button type="button" class="btn btn-default" onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default" onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
<div class="form-group col-md-12">
<button class="btn btn-info btn-primary" id="registerSubmit" type="submit">Submit</button>
</div>
<script>
function addSite() {
var new_total_sites = parseInt($('#total_sites').val()) + 1;
if ($('#total_sites').val() >= 4) {
$('button:contains("Add Mentor")').prop('disabled', true);
}
var new_label= "<label id='new_label9_" + new_total_sites
+ "'><h1>Mentor#"+ new_total_sites +"</h1></label><br>";
var new_site_label = "<label id='new_label1_" + new_total_sites
+ "'>Length of Time in Research: </label>";
var new_site_input = "<input id='new_site_"
+ new_total_sites
+ "' type='text' class='form-control col-md-12' list='sites' name='site[]'></br>";
var new_slot_label = "<label id='new_label2_" + new_total_sites
+ "'>Research Institution</label>";
var new_slot_input = "<input class='form-control col-md-12' id='new_slot_"
+ new_total_sites + "' name='slots[]'></br>";
var new_research_label = "<label id='new_label3_" + new_total_sites
+ "'>Research Mentor</label>";
var new_research_input = "<input class='form-control' id='new_research_"
+ new_total_sites + "' name='slots[]'></br>";
var new_form_group_label= "<label id='new_label4_" + new_total_sites
+ "'>Type of Research</label><br>";
var new_basic_label = "<input type='checkbox' id='checkbox1" + new_total_sites +"' value='basic'><label for='basic' id='basic"+ new_total_sites +"'>Basic</label></br>";
var new_clinical_label = "<input type='checkbox' id='checkbox2" + new_total_sites +"' value='clinical'><label for='clinical' id='clinical"+ new_total_sites +"'>Clinical</label></br></div>";
var new_form_label= "<label id='new_label5_" + new_total_sites
+ "'><h1>Mentor's Contact Information</h1></label>";
var new_mentor_label = "<label id='new_label6_" + new_total_sites
+ "'>Mentor's Phone</label>";
var new_mentor_input = "<input class='form-control' id='new_mentor_"
+ new_total_sites + "' name='slots[]'></br>";
var new_mentoremail_label ="<label id='new_label7_" + new_total_sites
+ "'>Mentor's Email</label>";
var new_mentoremail_input = "<input class='form-control' id='new_mentoremail_"
+ new_total_sites + "' name='slots[]'></br>";
var new_describeresearch_label = "<label id='new_label8_" + new_total_sites
+ "'>Describe your research</label></div>";
var new_describeresearch_input = "<input class='form-control' id='new_describeresearch_"
+ new_total_sites + "' name='slots[]'></br>";
$('#new_site').append(new_label);
$('#new_site').append(new_site_label);
$('#new_site').append(new_site_input);
$('#new_site').append(new_slot_label);
$('#new_site').append(new_slot_input);
$('#new_site').append(new_research_label);
$('#new_site').append(new_research_input);
$('#new_site').append(new_form_group_label);
$('#new_site').append(new_basic_label);
$('#new_site').append(new_clinical_label);
$('#new_site').append(new_form_label);
$('#new_site').append(new_mentor_label);
$('#new_site').append(new_mentor_input);
$('#new_site').append(new_mentoremail_label);
$('#new_site').append(new_mentoremail_input);
$('#new_site').append(new_describeresearch_label);
$('#new_site').append(new_describeresearch_input);
$('#total_sites').val(new_total_sites)
}
function removeSite() {
var last_total_site = $('#total_sites').val();
if (last_total_site > 1) {
$('#new_label9_' + last_total_site).remove('');
$('#new_label1_' + last_total_site).remove('');
$('#new_site_' + last_total_site).remove('');
$('#new_label2_' + last_total_site).remove('');
$('#new_slot_' + last_total_site).remove('');
$('#new_label3_' + last_total_site).remove('');
$('#new_research_' + last_total_site).remove('');
$('#new_label4_' + last_total_site).remove('');
$('#basic' + last_total_site).remove('');
$('#clinical' + last_total_site).remove('');
$('#checkbox1' + last_total_site).remove('');
$('#checkbox2' + last_total_site).remove('');
$('#new_label5_' + last_total_site).remove('');
$('#new_label6_' + last_total_site).remove('');
$('#new_mentor_' + last_total_site).remove('');
$('#new_label7_' + last_total_site).remove('');
$('#new_mentoremail_' + last_total_site).remove('');
$('#new_label8_' + last_total_site).remove('');
$('#new_describeresearch_' + last_total_site).remove('');
$('#total_sites').val(last_total_site - 1);
}
}
</script>
</body>
</html>
processform.php
<?php
ob_start();
require_once 'db-connect.php';
require_once 'email.php';
if(isset($_POST['pEmail'])){
$fName = filter_input(INPUT_POST, "fName") ? filter_input(INPUT_POST, 'fName') : null;
$lName = filter_input(INPUT_POST, "lName")? filter_input(INPUT_POST, 'lName') : null;
$uEmail = filter_input(INPUT_POST, "uEmail")? filter_input(INPUT_POST, 'uEmail') : null;
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sql = "INSERT INTO dbo.form ( FirstName,LastName,universityemail)VALUES
( :fName,:lName,universityemail)
$stmt = $conn->prepare($sql);
$stmt->bindParam(':fName', $fName);
$stmt->bindParam(':lName', $lName);
$stmt->bindParam(':universityemail', $uEmail);
if ($stmt->execute()) {
$conn->commit();
if (Form::mailer($fName, $lName,$uEmail))) {
echo
'<script >
alert("Thank you for registration.");
window.location = "www.google.com/";
</script>';
return true;
} else {
$conn->rollback();
echo '
<script>
alert("Error, please try submitting again. Error code 1");
window.history.back();
</script>';
return false;
}
}
}
The rest of the fields gets saved in the database, I'm just not sure how to save the loop data in the same way.

How do i save a dynamic form?

I am really stuck.
All i want to do is save a form not just the data into a session, the actual form. The idea is the administrator can add as many extra's to a product. My problem is i cannot work out how to save the form into a session (current code not working). I just cannot get my head around it. I am a newbie so i am getting rather confused.
At the moment i have the dynamic form but the form and data disappear on page refresh.
I have created the dynamic form:
var counter = 1;
var limit = 50; // the amount of addons that are allowed
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><label id='cat_label' name='cat_label' class='lab'>Name</label>\n\
<input type='text' id='cat_name' name='cat_name' value=''>\n\
<br>\n\
<label id='desc_label' name='desc_label' class='lab'>Description</label>\n\
<input type='text' id='cat_desc' name='cat_desc' value=''>\n\
<br>\n\
<hr id='dotted'>\n\
<br>\n\
<p id='menu_head'> Menu Item</p>\n\
<input type='button' value='Add New item to ...' onClick='addInput('new item');'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
<div id="dynamicInput">
<br><!--<input type="text" name="myInputs[]">-->
<label id="cat_label" class="lab">Name</label>
<input type="text" id="cat_name" name="cat_name[]" value="<?php print $_SESSION['form']['cat_name'][$counter]; ?>">
<br>
<label id="desc_label" class="lab">Description</label>
<input type="text" id="cat_desc" name="cat_desc[]" value="<?php print $_SESSION['form]['cat_desc'][$counter]; ?>">
</div>
<input type="button" value="Add" onClick="addInput('dynamicInput');">
<input type="submit" id="submit" name="submit" value="Save...">
</form>
I started this:
if (count($_POST) > 2 && $_POST['submit'] == "Save...") {
$countNumberOfInputs = count($_POST['cat_name']);
foreach($_POST as $key=>$value) {
if(!is_array($value)) {
$value = strip_tags($value);
$value = preg_replace("/[^0-9a-z -,.!]/i", "", $value);
}
$_SESSION['form'][$key] = $value;//save to session
}
if ($countNumberOfInputs < 1 ) {
$countNumberOfInputs = 1;
$counter = 0;
}
How can i resolve this, even better could someone highlight where i went wrong?

Passing input value to another page using $_SESSION

I tried to passing the input value from user to another page by using the Session method after the user click on submit button.
My page has a form with one button which called as "Add Textbox". This button allow the user to add textbox by themselves.
Here is my current code
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 2) {
alert("System required at least one.");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="<?php $_PHP_SELF ?>" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 :</label>
<input type='textbox' id='textbox1' name="textbox1">
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<br/>
<input type="submit" name="submit" id="submit">
</form>
And here is my code to assign the value to session in php
<?php
if(isset($_POST['submit'])) {
for($i=1; $i<=10; $i++)
{
if(isset($_POST['textbox'.$i]))
{
$obj = $_POST['textbox'.$i];
echo $obj,'<br>';
$_SESSION['textbox'.$i] = $obj;
}
}
header("Location:../brightan-system/result.php");
}
?>
and here is how I tried to get the value from the second page
<?php
for($i=1; $i<=10; $i++)
{
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
session_destroy();
?>
Actually, I can get a result on the second page, but the problem is if the user only add 4 textboxes, then there will be an error that said Undefined index on the second page. This is because the for loop produce 10 session variable on the second page.
Is there another way to get the session variable instead using for loop in this case?

You should check first if ith textbox is set or not. Add condition to check before printing it.
<?php
for($i=1; $i<=10; $i++)
{
if(isset($_SESSION['textbox'.$i])){
echo "<strong>".$i."</strong> ".$_SESSION['textbox'.$i]."<br>";//Use the session variables
}
}
session_destroy();
?>

How to create multiple dynamic form fields and insert in mysql database

I need to create dynamic text fields which contains: name surname age gender. I should have a button called "add new user" which simply adds a new row where a I can type in name surname age gender. I need it dynamic because I don't know how many users will be added per event. I also need to store name surname age gender (x) amount of added rows in database.
I need something similar to below : however I need an additional 3 rows next to each other. So I will "INSERT INTO my_hobbies (name, surname, age, gender)
I know this sounds far fetched but i am struggling with this.
<?php
require("dbconn.php");
?>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'<strong>Hobby No. ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="dynfields[]' + '" type="text" /><br />' );
});
});
</script>
<body>
<?php
if (isset($_POST['submit_val'])) {
if ($_POST['dynfields']) {
foreach ( $_POST['dynfields'] as $key=>$value ) {
$values = mysql_real_escape_string($value);
$query = mysql_query("INSERT INTO my_hobbies (hobbies) VALUES ('$values')", $connection );
}
}
echo "<i><h2><strong>" . count($_POST['dynfields']) . "</strong> Hobbies Added</h2></i>";
mysql_close();
}
?>
<?php if (!isset($_POST['submit_val'])) { ?>
<h1>Add your Hobbies</h1>
<form method="post" action="">
<div id="container">
<p id="add_field"><span>Click To Add Hobbies</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
<?php } ?>
</body>
</html>

You already have a javascript counter so you can use it to identify which input fields belong together. According your example can use something like this:
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'<strong>Hobby No. ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="dynfields['+counter+'][name]' + '" type="text" /><br />' +
+ '<input id="field_' + counter + '" name="dynfields['+counter+'][surname]' + '" type="text" /><br />' +
+ '<input id="field_' + counter + '" name="dynfields['+counter+'][age]' + '" type="text" /><br />' +
+ '<input id="field_' + counter + '" name="dynfields['+counter+'][gender]' + '" type="text" /><br />');
});
});
</script>
You can catch that in your PHP in the same way. Only notice that the value is now an array instead of a single value, but you can use array_keys and array_values to create the query on an easy way. Try this in PHP:
if (isset($_POST['submit_val'])) {
if ($_POST['dynfields']) {
foreach ( $_POST['dynfields'] as $key=>$fieldArray ) {
$keys = array_keys($fieldArray);
$values = array_map("mysql_real_escape_string",$fieldArray);
$query = mysql_query("INSERT INTO my_hobbies (".implode(',',$keys).") VALUES ('".implode('\',\'',$values)."')", $connection );
}
}
echo "<i><h2><strong>" . count($_POST['dynfields']) . "</strong> Hobbies Added</h2></i>";
mysql_close();
}
And yes, #alda1234 is right. You should't use mysql_* because it's deprecated.

I have the same answer with Mysqli prepared Statements enjoy it.
My html
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<p><label>Please enter your most recent education<br>
<input type="text" name="dynfields[]">
</p>
<p><label>Please enter any previous education<br>
<input type="text" name="dynfields[]">
</p>
<p><label>Please enter any previous education<br>
<input type="text" name="dynfields[]">
</p>
<input type="submit" name="submit">
</form>
and the php
foreach ( $_POST['dynfields'] as $key=>$value ) {
print_r($value."<br>");
$stmt = $conn->prepare("INSERT INTO dynamic_test2 (hobbies) VALUES (?)");
$stmt->bind_param("s", $values);
$values = $conn->real_escape_string($value);
$stmt->execute();
echo "New records created successfully";
}

How to insert PHP 'generated' options (html select) dynamically using JavaScript?

I'm facing this trouble..
I have this JavaScript code:
echo "<script type=\"text/javascript\">
var counter = 1;
function addInput(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = \"Entry \" + (counter + 1) + \" <input type='text' name='myInputs[]'>\";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script> ";
and this PHP code:
$produkty="SELECT * FROM goods ORDER BY name";
if (isset($_POST['order'])) {
$name = $_POST['myInputs'];
foreach( $name as $key => $n ) {
print $n." thank you\n <br />";
}
}
echo "
<fieldset><form method='post'>
<div id='dynamicInput'>
<select name='idp[]'>";
$vys = mysqli_query($db, $goods);
while ($arr = mysqli_fetch_assoc($vys)) {
echo "<option value='".$arr['id_good']."'>".$arr['name']."</option>";
}
echo "
</select> <br />
Entry 1 <input type='text' name='myInputs[]''><br />
</div>
<input type='button' value='Add another text input' onClick=\"addInput('dynamicInput');\"><br />
<input type='submit' name='order'>
</form></fieldset>
";
and I use it to "generate" new (html) input everytime submit is clicked.
But I need to generate not only those (html) inputs, but also that (html) select, which processes the values from the database and show it as options in that (html) select.
I searched a lot to find out the way to "insert" the part from <select .. to </select> to the newdiv.innerHTML variable, but it wasn't succesful. I find some hints that I should "parse" the PHP code in (html) select and then create variable $no1 = mysqli_query($db, $goods); $no2 = while ($arr = mysqli_fetch_assoc($no1)... ... and in the end just say JavaScript newdiv.innerHTML = <?php echo $no5; ?>; .. but there were many problems with the syntax and with the principles that discouraged me.
Can you help me please? ;)

Here is a rough sketch of what you can do for this, if I am understanding you correctly.
<?php
$options = "";
$vys = mysqli_query($db, $goods);
while ($arr = mysqli_fetch_assoc($vys)) {
$options .= "<option value='".$arr['id_good']."'>".$arr['name']."</option>";
}
echo <<< _html
<form method="post">
<div id="dynamicInput">
<div>
<select name=idp[]>
$options
</select> <br />
Entry 1 <input type="text" name=myInputs[]><br />
</div>
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');"><br />
<input type="submit" name="order">
</form>
_html;
?>
<script type="text/javascript">
var counter = 1;
function addInput(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = "<select name=idp[]><?php echo $options; ?></select> Entry " + (counter + 1) + " <input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
Hope this helps...