PDA

View Full Version : Hiding <span> and putting a different one in its place?



penny94
Oct 17th, 2012, 03:45 PM
I have a page that spits out data, into a <span>, from a mysql table using a php loop:



<?php

while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$about=$row['about'];
$username=$row['username'];

?>
<span id="<?php echo $id; ?>" >

<?php echo $username;
echo $about; ?><b><a onclick="hide('<?php echo $id;?>'); return false;">HIDE</a> </B>
</span>


Then when the user clicks 'HIDE' it removes that specific <span> of data using the following JavaScript:


<script>
function hide(id)
{
document.getElementById(id).style.display="none";
}
</script>


How would I show a different <span> in its place. Say I had a <span> that was automatically hidden with CSS. How could I show that <span> where the old <span> was and also displaying the ID of the old span.. e.g 'You have hid ID #1'?

My overall goal is to hide that <span> containing the data and for a new one to be put in its place with a form with that <spans> specific data in for the user to edit and save. However, I am taking it one step at a time and the above is my next step.

I have played around with my code for a while but can't seem to figure out a solution.

Thanks in advance.

xelawho
Oct 17th, 2012, 03:52 PM
I guess you would give your form an id, hide it with css then add a line to your function:


function hide(id)
{
document.getElementById(id).style.display="none";
document.getElementById("myform").style.display="block";
}


I doubt that you should put an entire form inside a <span> - spans are inline elements and should not contain block elements (which I believe is what a form is).

penny94
Oct 17th, 2012, 04:42 PM
I guess you would give your form an id, hide it with css then add a line to your function:


function hide(id)
{
document.getElementById(id).style.display="none";
document.getElementById("myform").style.display="block";
}


I doubt that you should put an entire form inside a <span> - spans are inline elements and should not contain block elements (which I believe is what a form is).

Thanks for your reply..

I have tried what you said and hid a form with each row of data in. However when, for example, I click the button to show the form for the bottom row of data it shows the form for the first row, at the top.

How could I make it show up in the correct place with the correct data?

Thanks again

xelawho
Oct 17th, 2012, 04:45 PM
you would have to show the code you are using to show the form - it's nearly impossible to guess on the information given (for me, anyway)

penny94
Oct 17th, 2012, 04:52 PM
Well the code I used was this:



<input type="text" name="username" id="myform">" value='<?php echo $username;?>' size="20">


<script>
function hide(id)
{
document.getElementById(id).style.display="none";
document.getElementById("myform").style.display="inline";
}
</script>

But what if I make the form id include the ID of the data like:


<input type="text" name="username" id="myform_<?php echo $id;?>" value='<?php echo $username;?>' size="20">

Then what would I put for the form ID in JavaScript.. Maybe something along the lines of...


<script>
function hide(id)
{
document.getElementById(id).style.display="none";
document.getElementById("myform_+id").style.display="inline";
}
</script>

Thanks for your help

xelawho
Oct 17th, 2012, 04:53 PM
more like

document.getElementById("myform_"+id).style.display="inline";
if I understand correctly

penny94
Oct 17th, 2012, 04:56 PM
more like

document.getElementById("myform_"+id).style.display="inline";
if I understand correctly

Edit:

Yes! This works.. thank you!

penny94
Oct 17th, 2012, 04:57 PM
Oh hang on, I had an extra "!

It's working now!

Thanks a lot for your help!