We Keep Coding

ejs dynamic form have all the same data

I'm learning ejs and I have some trouble to get some thinge working properly. I'm trying to fill out a form when user click modify, depending on which line it is, but the form is showing all the same data and I don't know why.
For exemple, if i click "Modify on the second line of the table, it's supposed to take what's on second row and fill the form with dats. But it's always filling it using the first row data, regardless of where I click. Here's the code :
<% if(data.length){
for(var i = 0;i < data.length;i++) { %>
<tr>
<td><%=data[i].ID%></td>
<td><%=data[i].NOM%></td>
<td><%=data[i].EMPLACEMENT%></td>
<td><%=data[i].UTILITE%></td>
<td><%=data[i].MARQUE%></td>
<td><%=data[i].MODELE%></td>
<td><%=data[i].NUMEROSERIE%></td>
<td><%=data[i].PROCESSEUR%></td>
<td><%=data[i].MEMOIRE%></td>
<td><%=data[i].OS%></td>
<td><%=data[i].CATEGORIE%></td>
<td><%=data[i].VALEUR%></td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's how data looks like:
Data are different, but when I click edit, it shows data only from the first row.
Heres the rendered HTML (for the two rows in my last screenshot) :
<tr>
<td>20</td>
<td>test</td>
<td>1</td>
<td>S</td>
<td>HP</td>
<td>EWE</td>
<td>DFERu</td>
<td>weWE</td>
<td>wesdf</td>
<td>ESFDdddddddddddddddddddddddddddd</td>
<td>Cdeqawed</td>
<td>989</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
<form name = form2 action="/delete" method="post">
<input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
</form>
<!--20-->
<!--<form action="/update" method="put">
<input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
</form>
<form action="" method="post">
<input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
</form>-->
</td>
<!--20-->
</tr>
<tr>
<td>21</td>
<td>r5y</td>
<td>5ry</td>
<td>r5y</td>
<td>y5r</td>
<td>w3</td>
<td>ww3</td>
<td>w3</td>
<td>55</td>
<td>6</td>
<td>7</td>
<td>677</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Can you help me?
Thanks

hm, my first bet would be, that the ids must be unique.
Have you tried to replace id="Input2m" with id="Input2m-<%=i%>"? (That is, adding the loop index to it).

I solved my problem, i modified these :
id="myModal1"
data-target="#myModal1"
to this :
data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

open modal after form submit, i dont know ajax :(

I am trying to send data from a form to a modal to verify the data and after proced to send, but this part of the data needs the post from thr form, and this one is not working when it call the modal, I do not know how to use ajax can someone give me a way to go with this thank you
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<?php
if ($_POST) {
$amount = $_POST['precio']*100;
echo $amount;
$miObj->setParameter("DS_MERCHANT_AMOUNT",$amount);
}
?>
<form data-toggle="modal" data-target="#myModal" method="POST" action="" >
<input name="precio" id="precio" />
<input class="btn btn-info" type="submit" >
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirma tu compra</h4>
</div>
<div class="modal-body">
<div id="imagen">IMAGEN COMPRA</div>
<img src="" alt="mando">
<div class="details-area" id="detailsArea">
<h1 style="color:#007acc">Opciones Seleccionadas</h1>
</div>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="name" class="form-control" id="nombre">
</div>
<div class="form-group">
<label for="apellido">Apellido</label>
<input type="name" class="form-control" id="Apellido">
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="address" class="form-control" id="direccion">
</div>
<div class="form-group">
<label for="telefono">Telefono</label>
<input type="phone" class="form-control" id="telefono">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>
</div>
<div class="modal-footer">
<form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
<input name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
<input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
<input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
<input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
<button type="submit" class="btn btn-default" >Confirmar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="frm" method="POST">
<input name="precio" id="precio" />
<input class="btn btn-info" type="submit" value="Submit" name="submit">
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirma tu compra</h4>
</div>
<div class="modal-body">
<div id="imagen">IMAGEN COMPRA</div>
<img src="" alt="mando">
<div class="details-area" id="detailsArea">
<h1 style="color:#007acc">Opciones Seleccionadas</h1>
</div>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="name" class="form-control" id="nombre">
</div>
<div class="form-group">
<label for="apellido">Apellido</label>
<input type="name" class="form-control" id="Apellido">
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="address" class="form-control" id="direccion">
</div>
<div class="form-group">
<label for="telefono">Telefono</label>
<input type="phone" class="form-control" id="telefono">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>
</div>
<div class="modal-footer">
<form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
<input name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
<input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
<input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
<input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
<button type="submit" class="btn btn-default" >Confirmar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#frm").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $("#frm").serialize(),
url : 'url',
success : function(data){
$("#myModal").modal("show");
}
});
return false;
});
</script>

validated_form.html
<html>
<head>
<script type="text/javascript">
function validate()
{
var error="";
var name = document.getElementById( "name_of_user" );
if( name.value != "" )
{
name = name.value;
document.getElementById( "name" ).innerHTML = name;
return false;
}
}
</script>
</head>
<body>
<form method="POST" action="getdata.php" onsubmit="return validate();">
<input type="text" name="username" id="name_of_user">
<input type="submit" name="submit_form" value="Submit">
</form>
// use id=name in your model form field
<input type="text" id="name" >
</body>
</html>
=====================================
getdata.php
<?php
if( isset( $_POST['submit_form'] ) )
{
validate_data($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = strip_tags($data);
$data = htmlspecialchars($data);
$data = mysqli_real_escape_string($data);
return $data;
}
}
?>

How to use jquery to populate a form from database record on the same page

I have some contact records in a database, I have queried the database and added the contacts in the database to the sidebar of the page. Now I want to see the full details of the contact on the main page in a form when I click on the profile button. I'm finding difficulty using jQuery to get the values from this contact list to the form on the main page.
What I have done is to create some hidden fields to store the values for each records, then use jQuery to add those values to the main form.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<?php
mysql_select_db('****webdb', mysql_connect('*******','****_is***','****'))or die(mysql_error());
$query=mysql_query("SELECT * FROM `w******`");
while( $row=mysql_fetch_array($query))
{
$id=$row['id'];
$name= $row['first_name'].' '.$row['last_name'];
?>
<input type="hidden" name="uname1" id="uname1" value="<?php echo $row['username']; ?>" />
<input type="hidden" name="password1" id="password1" value="<?php echo $row['password']; ?>" />
<input type="hidden" name="fname1" id="fname1" value="<?php echo $row['first_name']; ?>" />
<input type="hidden" name="lname1" id="lname1" value="<?php echo $row['last_name']; ?>" />
<input type="hidden" name="str1" id="str1" value="<?php echo $row['street']; ?>" />
<input type="hidden" name="city1" id="city1" value="<?php echo $row['city']; ?>" />
<input type="hidden" name="pcode1" id="pcode1" value="<?php echo $row['post_code']; ?>" />
<input type="hidden" name="country1" id="country1" value="<?php echo $row['country']; ?>" />
<input type="hidden" name="tel1" id="tel1" value="<?php echo $row['telephone']; ?>" />
<input type="hidden" name="email1" id="email1" value="<?php echo $row['email']; ?>" />
<input type="hidden" name="gsm1" id="gsm1" value="<?php echo $row['gsm']; ?>" />
<input type="hidden" name="jtitle1" id="jtitle1" value="<?php echo $row['job_title']; ?>" />
<input type="hidden" name="company1" id="company1" value="<?php echo $row['company']; ?>" />
<input type="hidden" name="url1" id="url1" value="<?php echo $row['url']; ?>" />
<input type="hidden" name="msn1" id="msn1" value="<?php echo $row['msn']; ?>" />
<input type="hidden" name="skype1" id="skype1" value="<?php echo $row['skype']; ?>" /
<li class="user<?php echo $id ?>">
<a><i class="fa fa-user fa-fw"></i><?php echo $name; ?> <button class="btn btn-info" id="checkClick" onclick="myFunction()">Profile</button></a>
</li>
<?php } ?>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<form id="signUp" class="form-horizontal cmxform" name="signUp" action="">
<div class="form-group"><label class="col-sm-2 control-label" for="username">Username<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="username" class="form-control" name="uname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="password">Password<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="password" class="form-control" name="password" type="password" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="firstname">First Name<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="fname" class="form-control" name="fname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="lastname">Last Name<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="lname" class="form-control" name="lname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="street">Street</label>
<div class="col-sm-10"><input id="str" class="form-control" name="str" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="city">City</label>
<div class="col-sm-10"><input id="city" class="form-control" name="city" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="postcode">Post Code</label>
<div class="col-sm-10"><input id="postcode" class="form-control" name="pcode" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="country">Country<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><select class="form-control" name="country">
<option selected="selected" id="country" ></option>
</select></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="telephone">Telephone<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="tel" class="form-control" name="tel" type="tel" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="email" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="gsm">GSM</label>
<div class="col-sm-10"><input id="gsm" class="form-control" name="gsm" type="tel" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="jobtitle">Job Title</label>
<div class="col-sm-10"><input id="jobtitle" class="form-control" name="jtitle" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="company">Company</label>
<div class="col-sm-10"><input id="company" class="form-control" name="company" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="url">URL</label>
<div class="col-sm-10"><input id="url" class="form-control" name="url" type="url" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="msnmessenger">MSN Messenger</label>
<div class="col-sm-10"><input id="msnmessenger" class="form-control" name="msn" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="skype">Skype</label>
<div class="col-sm-10"><input id="skype" class="form-control" name="skype" type="text" /></div>
</div>
</form>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script>
function myFunction() {
var username = ("#uname1").val();
$("#uname").val(username);
var lname = ("#lname1").val();
$("#lname").val(lname);
var str = ("#str1").val();
$("#str").val(str);
var city = ("#city1").val();
$("#city").val(city);
var pcode = ("#pcode1").val();
$("#pcode").val(pcode);
var country = ("#country1").val();
$("#country").val(country);
var tel = ("#tel1").val();
$("#tel").val(tel);
var email = ("#email1").val();
$("#email").val(email);
var gsm = ("#gsm1").val();
$("#gsm").val(gsm);
var jtitle = ("#jtitle1").val();
$("#jtitle").val(jtitle);
var company = ("#company1").val();
$("#company").val(company);
var url = ("#url").val();
$("#url").val(url);
var msn = ("#msn1").val();
$("#msn").val(msn);
var skype = ("#skype1").val();
$("#skype").val(skype);
}
</script>

There's a couple possible solutions you can do here.
First, you need to switch over to mysqli or PDO instead of mysql.
Since you are already using mysql, mysqli is VERY similar and won't take much effort to make the change.
Second, without knowing the full scope of this project it's hard to determine your best needs.
But, some solutions are as follows.
You could use a $_SESSION variable and hold your results in array
with PHP. Then you could loop over the array's index to produce the
desired "detailed" info on the main page.
You could query the database again when a name is clicked to gather
the more detailed information.
You could use ajax to query the database again and pull the data
asynchronously. Similar to the previous suggestion.

First point of concern is that you have hidden inputs containing sensitive information which is never good. I would populate your sidebar with the information from your initial call like you are doing. After that once the user clicks on that contact on the sidebar do an ajax call to your database to pull all of the contact information.

Unable to print the $length variable? Trying to input data from cloned forms

My code is below. I am have arrays declared in html input tag name field, title[], first_name[], last_name[], email_address[], twitter_handle[].
I have declared them all arrays for the sake of form cloning that I am doing in .js file.
Now, I am trying to enter the data from form in to database.
I am using the foreach to manage the arrays, I also took a $length variable which will give me the number of form cloning worked.
No matter how many times I clone the form, only the first form gets printed.
Please help.
My code is below:
if(isset($_POST['title']) && isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['email_address']) && isset($_POST['twitter_handle'])){
$length=0;
foreach($_POST['title'] as $key=>$value){
$title[$key]=$value;
$length=$length + 1;
echo '$key: '.$key.' '.$length;
//print_r($value);
}
foreach($_POST['first_name'] as $key=>$value){
$first_name[$key]=$value;
}
foreach($_POST['last_name'] as $key=>$value){
$last_name[$key]=$value;
}
foreach($_POST['email_address'] as $key=>$value){
$email_address[$key]=$value;
}
foreach($_POST['twitter_handle'] as $key=>$value){
$twitter_handle[$key]=$value;
}
echo '$lenght : '.$length.' ';
for($i=0;$i<$length;$i++){
print_r($first_name[$i]);
}
}
..................
Just for reference this is my html code:
<form action="<?php $_SERVER['PHP_SELF']?>" method="POST" id="sign-up_area" role="form">
<label class="label_ttl control-label" for="title">Title:</label>
<div class="form-group">
<select class="select_ttl form-control" name="title[]" id="title">
<option value="" selected="selected" disabled="disabled">Select your title</option>
<option value="Dr.">Dr.</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Sir">Sir</option>
</select>
</div>
<!-- Text input-->
<div class="form-group">
<label class="label_fn control-label" for="first_name">First name:</label>
<input id="first_name" name="first_name[]" type="text" placeholder="" class="input_fn form-control" required>
<p class="help-block">This field is required.</p>
</div>
<!-- Text input-->
<div class="form-group">
<label class="label_ln control-label" for="last_name">Last name:</label>
<input id="last_name" name="last_name[]" type="text" placeholder="" class="input_ln form-control">
</div>
<div class="form-group">
<label class="label_email control-label" for="email_address">Email:</label>
<input id="email_address" name="email_address[]" type="text" placeholder="example#example.com" class="input_email form-control">
</div>
<!-- Prepended text-->
<label class="label_twt control-label" for="institution">Enter Institution / Organization:</label>
<div class="input-group form-group">
<input id="twitter_handle" name="twitter_handle[]" class="input_twt form-control" placeholder="" type="text">
</div>
<!-- Text input-->
</div><!-- end #entry1 -->
<!-- Button (Double) -->
<p>
<button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">add section</button>
<button type="button" id="btnDel" name="btnDel" class="btn btn-danger">remove section above</button>
</p>
<!-- Button -->
<p>
<button id="submit_button" name="submit_button" class="btn btn-primary">Submit</button>
</p>
</fieldset>
</form>

<?php
if(isset($_POST['title']) && isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['email_address']) && isset($_POST['twitter_handle'])){
$length=0;
foreach($_POST['title'] as $key=>$value){
$title[$key]=$value;
$length = $length + 1;
//echo '$key: '.$key.' '.$length;
//print_r($value);
}
foreach($_POST['first_name'] as $key=>$value){
$first_name[$key]=$value;
}
foreach($_POST['last_name'] as $key=>$value){
$last_name[$key]=$value;
}
foreach($_POST['email_address'] as $key=>$value){
$email_address[$key]=$value;
}
foreach($_POST['twitter_handle'] as $key=>$value){
$twitter_handle[$key]=$value;
}
echo '$lenght : '.$length.' ';
for($i=0;$i<$length;$i++){
echo ($first_name[$i])."<br/>";
}
}
?>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<form action="<?php $_SERVER['PHP_SELF']?>" method="POST" id="sign-up_area" role="form">
<div class="form" id="form_1">
<label class="label_ttl control-label" for="title">Title:</label>
<div class="form-group">
<select class="select_ttl form-control" name="title[]" id="title">
<option value="" selected="selected" disabled="disabled">Select your title</option>
<option value="Dr.">Dr.</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Sir">Sir</option>
</select>
</div>
<!-- Text input-->
<div class="form-group">
<label class="label_fn control-label" for="first_name">First name:</label>
<input id="first_name" name="first_name[]" type="text" placeholder="" class="input_fn form-control" required>
<p class="help-block">This field is required.</p>
</div>
<!-- Text input-->
<div class="form-group">
<label class="label_ln control-label" for="last_name">Last name:</label>
<input id="last_name" name="last_name[]" type="text" placeholder="" class="input_ln form-control">
</div>
<div class="form-group">
<label class="label_email control-label" for="email_address">Email:</label>
<input id="email_address" name="email_address[]" type="text" placeholder="example#example.com" class="input_email form-control">
</div>
<!-- Prepended text-->
<label class="label_twt control-label" for="institution">Enter Institution / Organization:</label>
<div class="input-group form-group">
<input id="twitter_handle" name="twitter_handle[]" class="input_twt form-control" placeholder="" type="text">
</div>
<!-- Text input-->
</div><!-- end #entry1 -->
<!-- Button (Double) -->
<p>
<button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">add section</button>
<button type="button" id="btnDel" name="btnDel" class="btn btn-danger">remove section above</button>
</p>
<!-- Button -->
<p>
<button id="submit_button" name="submit_button" class="btn btn-primary">Submit</button>
</p>
</fieldset>
</div>
</form>
<script type="text/javascript">
$('#btnAdd').click(function(){
var form_length = $(".form").length;
$('#form_'+form_length).clone().prop({ id: "form_"+parseInt(form_length+1)}).insertAfter('#form_'+form_length);
});
$('#btnDel').click(function(){
var form_length = $(".form").length;
if(form_length == 1){
alert("One form must exist!");
}else{
$('.form').last().remove();
}
});
</script>