Inserting .. a href="javascript:void(0)".. with attribute?

i have a problem with my link,

in one page there are 2 forms, form input and form edit, i want to show form input and edit in different time, so i write link script, …a href=“index.php?id=1”…, its works, but when i united with “javascript:void(0)”, it can’t works. can anybody help me?

javascript:void(0) makes the link do nothing, so it simply remove that from your URL. Or do you have a special reason why it’s there?

yes i have, i use …a href=“javascript:void(0)” to to disable my <div id=“input”> and show my <div id=“edit”>, but the problem is when i must show <div id=“edit”>, i must bring an attribut in …a href=“javascript:void(0)”, how to do it?

this is parts of the script…
<td><a href=“agenda_kerja.php?id=<?=1?>;javascript:void(0)” onclick=“document.getElementById(‘light’).style.display=‘none’;document.getElementById(‘fade’).style.display=‘block’;document.getElementById(‘edit’).style.display=‘block’”>edit</a></td>

Okay, let’s get back to simplifying this as much as possible.

First, what happens when no scripting is available?
Even with PHP running before it creates the page, <?=1?> just echos out 1.
I’ve also used a class name here here in case you have multiple edit objects on the page.


<td><a id="edit" href="agenda_kerja.php?id=1">edit</a></td>

When it comes to applying the scripting, we get the object with an id of ‘edit’ and attach to it the scripting that we want to want to occur when the edachieve.

 
document.getElementById('edit').onclick = handleEditClick;

That handleEditClick function is where we specify the commands that we want to occur, and then return false from the event to prevent the web browser’s default behaviour of following the link.


function handleEditClick() {
    document.getElementById('light').style.display = 'none';
    document.getElementById('fade').style.display = 'block';
    document.getElementById('edit').style.display = 'block';
    return false;
}

You can even combine those two parts together, and perhaps even refer to the edit link via the this keyword, which refers to the element that triggered the event.

 
document.getElementById('edit').onclick = function () {
    document.getElementById('light').style.display = 'none';
    document.getElementById('fade').style.display = 'block';
    this.style.display = 'block';
    return false;
};

thank’s mr. paul_wilkins. :slight_smile:

mr., it still doesn’t works…
my <div id=edit></div> didn’t want to show…?!

Can you show us a test page that demonstrates the problem?

i still use it in localhost…

here the link,
<td><a id=“a” href=“javascript:void(0)” onclick=“document.getElementById(‘light’).style.display=‘none’;document.getElementById(‘fade’).style.display=‘block’;document.getElementById(‘edit’).style.display=‘block’”>edit</a></td>

here the div…
<div id=“light” class=“white_content”>
test
</div>
<div id=“edit” class=“white_content”>
form edit page
</div>
<div id=“fade” class=“black_overlay”></div>

i want to bring an attribut in “form edit page” edit my database…

It seems that you’ve ignored what I gave you before. I don’t think that I can be of much further help.

i’ve done your answer mr., but it still doesn’t works…

i write this script…
<script type=“text/javascript”>
document.getElementById(‘a’).onclick = function () {
document.getElementById(‘light’).style.display = ‘none’;
document.getElementById(‘fade’).style.display = ‘block’;
this.style.display = ‘block’;
return false;
};
then i wrote this link,
<td><a id=“edit” href=“agenda_kerja.php?id=<?=$agenda[‘no_job’]?>”>edit</a></td>

but it still doesn’t works…

<script type=“text/javascript”>
document.getElementById(‘edit’).onclick = function () {
document.getElementById(‘light’).style.display = ‘none’;
document.getElementById(‘fade’).style.display = ‘block’;
this.style.display = ‘block’;
return false;
};

This is some simple test code showing how it works.


<html>
<head>
</head>
<body>
<a id="editlink" href="agenda_kerja.php?id=1">edit</a>

<div id="light" class="white_content">
test
</div>
<div id="edit" class="white_content">
form edit page
</div>
<div id="fade" class="black_overlay"></div>
<script>
function handleEditClick() {
    document.getElementById('light').style.display = 'none';
    document.getElementById('fade').style.display = 'block';
    document.getElementById('edit').style.display = 'block';
    return false;
}

document.getElementById('editlink').onclick = handleEditClick;
</script>
</body>
</html>

yes mr., it’s works, but the attribute “id=1” didn’t follow to …

<div id=“edit” class=“white_content”>
form edit page
<?
$id = $_GET[‘id’];
?>
</div>

What relevance does that have?

here my complete <div id=“edit” class=“white_content”></div>

<div id=“edit” class=“white_content”>
<?
$id = $_GET[‘id’];
$edit_agenda_sql=mysql_query(“select * from plan_kerja where ID_PLAN=‘$id’”);
$edit_agenda=mysql_fetch_array($edit_agenda_sql);
?>
<form name=“form” method=“post” id=“third” action=“<?php echo $self;?>” class=“niceform” style=“background-color:#FFFFFF;”>
<h1>* Edit Agenda Kerja</h1>
<label for=“name”><strong><span class=“blue”></span> No Job : </strong></label>
<input id=“name” name=“no_job” type=“text” size=“20” value=“<?=$edit_agenda[‘no_job’]?>” />
<label for=“name”><strong><span class=“blue”>
</span> Tgl Tugas : </strong></label>
<input id=“name” name=“tgl_mulai” type=“text” size=“20” value=“<?=$edit_agenda[‘tgl_tugas’]?>” />
<label for=“name”><strong><span class=“blue”></span> Tgl Selesai : </strong></label>
<input id=“name” name=“tgl_selesai” type=“text” size=“20” value=“<?=$edit_agenda[‘tgl_selesai’]?>” />
<label for=“msg”><strong><span class=“blue”>
</span> Uraian Job : </strong></label><br />
<input id=“name” name=“tgl_selesai” type=“text” size=“20” value=“<?=$edit_agenda[‘uraian_tugas’]?>” />
<label for=“name”><strong><span class=“blue”></span> Catatan : </strong></label>
<input id=“name” name=“note” type=“text” size=“20” value=“<?=$edit_agenda[‘catatan’]?>” />
<label for=“name”><strong><span class=“blue”>
</span> Status : </strong></label>
<input id=“name” name=“note” type=“text” size=“20” value=“<?=$edit_agenda[‘status’]?>” />
<br /><br />
<input type=“submit” name=“login” class=“buttonSubmit” value=“edit” />
<input type=“button” name=“close” class=“buttonSubmit” value=“cancel” onclick=“document.getElementById(‘light’).style.display=‘none’;document.getElementById(‘fade’).style.display=‘none’;document.getElementById(‘edit’).style.display=‘none’” />
</form>
</div>

i want to take the attribute for editing the data in my table base on primary key…

This thread seems to have diverted quite significantly from its original purpose.

Are you wanting to edit the data on the web page, and then to save it back in to the database?

yes, it does. but i have a problem when i united with the javascript code…

What is the problem that you are having?

that i’ve wrote before, i can’t get the attribute “id=$id”…
can you help me mr.?