Jazzy 1012
asked on
Input box gone wrong
<?php
session_start();
$username= $_SESSION['username'];
require "connection.php";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<style>
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below > .nav-tabs > li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
table, th,td {
border: 1px solid;
}
.container{
margin:0px !important
}
.readonly-input {
border: 0;
}
.modal-dialog{
position: relative;
display: table;
overflow-y: scroll;
overflow-x: scroll !important;
width: auto;
min-width: 300px;
}
.modal-open .modal{
overflow-x:scroll !important;
}
input.work{
width: 100%;
}
textarea{
width: 100%;
}
td{
width: auto;
}
</style>
<script>
$(function() {
$('.change').focus(function() {
$(this).removeClass('readonly-input').prop('readonly', false);
});
$('.change').blur(function() {
$(this).addClass('readonly-input').prop('readonly', true);
});
});
</script>
</head>
<body>
<div class="container">
<br>
<a href="logout.php" type="button" class="btn btn-sm btn-danger pull-right"><i class="glyphicon glyphicon-log-out"></i> Logout</a>
<div class="row" style="width:200%">
<div class="col-md-12">
<h3>Welcome <?php echo $username;?>!</h3>
<div class="tabbable-panel">
<div class="tabbable-line">
<div class="tab-pane" id="rsvp">
<p>
RSVP
</p>
<p>
<form action ="rsvp.php" method = "post">
<table class="table table-striped">
<thead>
<tr>
<?php
$query = mysqli_query($conn,"SHOW columns FROM `rsvp`");
// Loop over all result rows
while($row = mysqli_fetch_array($query))
{
if($row["Field"] == 'id')
{
continue;
}
echo '<th>';
echo $row["Field"];
echo '</th>';
}
?>
</thead>
<tbody>
<tr>
<?php
$query2= "SELECT * from `rsvp` WHERE `Gathered By` = '$username'";
$result= mysqli_query($conn, $query2);
while($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
foreach($row as $fieldname => $values)
{
if($fieldname == 'id')
{
continue;
}
if($fieldname == 'Gathered By')
{
echo '<td>';
echo $values;
echo '</td>';
}
else if($fieldname == 'Date')
{
echo '<td>';
echo $values;
echo '</td>';
}
else
{
echo '<td>';
echo '<input class = "change readonly-input" value= "' .$values . '" readonly name="data[' . $row['id'] . '][' . $fieldname . ']" />';
echo '</td>';
}
}
}
echo '</tr>';
?>
</tbody>
</table>
<?php
echo '<input data-original-title="Save this user" data-toggle="tooltip" type="submit" class="btn btn-sm btn-success" id="edit" Value= "Save">';
?>
</form>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my rsvp.php page:<?php
session_start();
$username= $_SESSION['username'];
require "connection.php";
// GET THE DATA FROM POST IF IT EXISTS
$data = isset($_POST['data']) ? $_POST['data'] : false;
// IF IT IS A VALID ARRAY THEN PROCESS IT
if (is_array($data)) {
// LOOP THOUGH EACH SUBMITTED RECORD
foreach($data as $id => $rec) {
// START AN UPDATE STRING
$updatestr = '';
// ADD FIELD / VALUES TO UPDATE STRING
foreach($rec as $fieldname => $value) {
if($fieldname == 'id'){
continue;
}
else{
$value=mysqli_escape_string($conn, $value);
$updatestr .= "`{$fieldname}` = '{$value}',";
}
}
// REMOVE THE TRAILING ,
trim($updatestr, ',');
// CREATE THE UPDATE QUERY USING THE ID OBTAINED FROM
// THE KEY OF THIS data ELEMENT
$query = "UPDATE `rsvp` SET {$updatestr} WHERE id= '$id'";
// SEND IT TO THE DB
$result= mysqli_query($conn, $query);
}
header( "refresh:0.1; url=rsvp1.php" );
echo "<script type='text/javascript'>alert('Your record has been editted!');</script>";
}
else {
echo "Error occurred.";
}
?>
As you can see the "Notes" row is an input that is fine but some notes are more than one line and they do not show when on the page, only the first line shows and when I click on it to "edit" it only gives me that one line, the rest disappears.
You need to use a <textarea> input if you want to do multi-line inputs.
ASKER
I did this
else if($fieldname == 'Notes')
{
echo '<td>';
echo '<textarea class = "change readonly-input" value= "' .$values . '" readonly name="data[' . $row['id'] . '][' . $fieldname . ']"> </textarea>';
echo '</td>';
}
When I did textarea everything inside went
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
How can I make the textarea width bigger? just by width?
ASKER
If so I already have width: 100%
This is because of the table column width, If you want to make textarea bigger in width increase/set column width;
ASKER
ok thanks