Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
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>

Open in new window

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.";
}


?>

Open in new window


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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You need to use a <textarea> input if you want to do multi-line inputs.
Avatar of Jazzy 1012
Jazzy 1012

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>';
		}

Open in new window

When I did textarea everything inside went
ASKER CERTIFIED SOLUTION
Avatar of Mukesh Yadav
Mukesh Yadav
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
How can I make the textarea width bigger? just by width?
If so I already have width: 100%
It looks like this now
User generated image
This is because of the table column width, If you want to make textarea bigger in width increase/set column width;
ok thanks