Converting from Output to Input !

ausgezeichnete · #1 (**permalink**) 12-22-07, 11:11 AM

i want to edit a table but in the same page
when i click on Edit,the output value converts to input to be able to edit it
but i dont know why it didnt work????????
do u think it needs Ajax???
this is my code

PHP Code:


			
<table border="1" align="center">

  <tr>

    <th>Name</th>

  </tr>

  <?php do { ?>

    <tr>

    <?php if(!isset($_POST['Submit'])){?>

      <td><?php echo $row_Recordset1['porto_name']; ?></td>

      <?php }else{?>

      <td><input type=text value=<?php echo $row_Recordset1['porto_name']; ?> /></td>

      <?php }?>

      <td><input name="Submit" type="submit" value="edit"></td>

      

      

      <td><a href="portofolio_delete.php?porto_ID=<?php echo $row_Recordset1['porto_ID']; ?>">Delete</a></td>

      

    </tr>

    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

</table>

Wolf1994 · #2 (**permalink**) 12-28-07, 12:23 PM

First, you have no form to make submit work.
Second, strongly reccomend to use

Code:

$var="value";
<<<HTML
$var
text
HTML;

to make more readable code.
Third, you do not need form neither AJAX here at all. Just use something form JavaScript stuff like:

Code:

<div onclick='this.innerHTML="<input value=\"text\" />"'>text</div>

Did not checked code, so not sure that one really works.

Good luck!

UnrealEd · #3 (**permalink**) 12-30-07, 06:09 AM

Quote:

Originally Posted by Wolf1994

Third, you do not need form neither AJAX here at all.

Actually you do if you want to save the edited data, unless you want to submit the form (causing the page to refresh).

The javascript code Wolf1994 posted will work, but it will not display the actual content in the div, here's one that should do the trick:

Javascript Code:

function setEditable (id) {
  var object = document.getElementById(id);
  var content = object.innerHTML;
  object.innerHTML = '<textarea rows="10" cols="50">' + content + '</textarea>';
}

In your html, you'll have to place this:

HTML Code:

<div id="the_div">content goes here</div>
<button type="button" name="edit" ondblclick="setEditable('the_div')">Edit</button>

End User · #4 (**permalink**) 12-30-07, 07:30 AM

Okay, I'm dense. How would you set that back to non-editable after editing?

UnrealEd · #5 (**permalink**) 12-30-07, 10:16 AM

Using the onblur event of the textarea, or either by adding a "save" button, like so:

Javascript Code:

function setEditable (id) {
  var object = document.getElementById(id);
  var content = object.innerHTML;
  object.innerHTML = '<textarea rows="10" cols="50" onblur="setNonEditable(' + id + ', this)">' + content + '</textarea>';
}
 
function setNonEditable (div_id, textarea) {
  var object = document.getElementById(div_id);
  object.innerHTML = textarea.value;
}

and the html:

HTML Code:

<div id="the_div">content goes here</div>
<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>

End User · #6 (**permalink**) 12-30-07, 12:24 PM

Cool. I'll learn something new every day if I'm not careful.

I had to give the text area an id and modify the save button a little bit to make it work right for me:

<button type="button" name="edit" onclick="setNonEditable('the_div', the_textarea)">Save</button>

Thanks Ed!

ausgezeichnete · #7 (**permalink**) 01-03-08, 02:50 AM

Well,frankly i didnt get it
this is my code

PHP Code:


			


<script type="text/javascript">

function setEditable (id) {

  var object = document.getElementById(id);

  var content = object.innerHTML;

  object.innerHTML = '<textarea rows="10" cols="50" onblur="setNonEditable(' + id + ', this)">' + content + '</textarea>';

}



function setNonEditable (div_id, textarea) {

  var object = document.getElementById(div_id);

  object.innerHTML = textarea.value;

}





</script>



<div id="the_div">

<?php 

$conn=mysql_connect("localhost","root","123456");

$db=mysql_select_db("epic");

$Recordset1=mysql_query("select * from porto");

?>



<table border="1" align="center">

  <tr>

    <th>Name</th>

  <?php do { ?>

      <td><input type=text value=<?php echo $row_Recordset1['porto_name']; ?> /></td>

    </tr>

    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

</table>

</div>

<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>

and i got in my page a table containing the data and a submit button called edit and i click on it the page changes to a text area containing that:

PHP Code:


			


<table align="center" border="1">

  <tbody><tr>

    <th>Name</th>

        <td><input value="/" type="text"></td>

    </tr>

          <tr><td><input value="Web" design="" type="text"></td>

    </tr>

          <tr><td><input value="Web" develop="" type="text"></td>

    </tr>

          <tr><td><input value="maha" type="text"></td>

    </tr>

          <tr><td><input value="Web" type="text"></td>

    </tr>

          <tr><td><input value="Web" type="text"></td>

    </tr>

          <tr><td><input value="maha" type="text"></td>

    </tr>

    </tbody></table>

i dont understand!!

ausgezeichnete · #8 (**permalink**) 01-03-08, 02:51 AM

btw,my value in the table are
Web design
Web develop
maha
web
web
maha

BrianMedley · #9 (**permalink**) 05-05-08, 02:17 PM

I couldn't seem to get this working, I'll post what I had and hopefully somebody will see a mistake made.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="../javascript/table_update.js" type="text/javascript"></script>
<title>Test</title>
</head>

<body>

<div id="the_div">Editable text!</div>
<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>

<button type="button" name="edit" onclick="setNonEditable('the_div', save)">Save</button>

</body>
</html>

here is the javascript file

Javascript Code:

function setEditable (id) {
    var object = document.getElementById(id);
    var content = object.innerHTML;
    object.innerHTML = '<textarea id="save" rows="10" cols="50" onblur="setNonEditable(' + id + ', this)">' + content + '</textarea>';
}
 
function setNonEditable (div_id, textarea) {
    var object = document.getElementById(div_id);
    object.innerHTML = textarea.value;
}

UnrealEd · #10 (**permalink**) 05-06-08, 02:58 AM

This time I tested the code, and it all works fine in FireFox:

Javascript Code:

function setEditable (id) {
    var object = document.getElementById(id);
    var content = object.innerHTML;
    object.innerHTML = '<textarea id="save" rows="10" cols="50" onblur="setNonEditable(\'' + id + '\', \'save\')">' + content + '</textarea>';
}
 
function setNonEditable (div_id, textarea) {
    try {
        var object = document.getElementById(div_id);
        object.innerHTML = document.getElementById(textarea).value;
    } catch (e) {}
}

And the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="../javascript/table_update.js" type="text/javascript"></script>
<title>Test</title>
</head>

<body>

<div id="the_div">Editable text!</div>
<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>

<button type="button" name="edit" onclick="setNonEditable('the_div', 'save')">Save</button>

</body>
</html>

Enjoy!