hi everyone. i just started learning how to dynamically show/hide elements with a checkbox toggle.
i would like to know if it's possible to delete/rewrite elements instead of simply show/hide them. the reason is because in the following code, i show/hide a file field by checkbox toggle... however, if a file field selects a file before it's hidden, the file selected for the file field will still remain, as you can see when you uncheck the checkbox to make the file field reappear...
i would like to rewrite (or reset) the file field if it is hidden... please let me know if there is a way. -
<!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" />
-
<title>Untitled Document</title>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-family: Arial, Helvetica, sans-serif;
-
font-size: 36px;
-
font-style: italic;
-
}
-
.style2 {color: #990000}
-
-->
-
</style>
-
</head>
-
-
<body>
-
<input type="checkbox" onclick="if (this.checked) { document.getElementById('hiderow').style.display = 'none'; document.getElementById('hiderow2').style.display = 'none';} else { document.getElementById('hiderow').style.display = 'block'; document.getElementById('hiderow2').style.display = 'block';}">
-
delete and rewrite DIVs?
-
<table width="411" border=1>
-
<tr><td width="401"><div id="hiderow">
-
<div align="center" class="style2">delete and rewrite me! </div>
-
</div>
-
<tr>
-
<td>i will stay always!
-
<tr><td><div id="hiderow2">
-
<label>
-
<input type="file" name="textfield" />
-
</label>
-
<span class="style2">delete me too ! </span></div>
-
</table>
-
</html>
-
18  10037 
You can delete elements using the removeChild method using the Document Object Model. See this page and this for an explanation.
Access the div using getElementById and remove it from its parent: - theDiv.parentNode.removeChild(theDiv);
or alternatively, you can keep the div and delete the input file only.
You can also use the non-standard innerHTML to make it easier by setting it to the empty string:
but as you can see you don't have access to the objects so you have start afresh. It is simpler, but not the preferred method.
thanks for replying...
i've tried to implament that code into my current code, but nothing is happening... i'm for sure writing it wrong... this is what i have: -
-
<!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" />
-
<title>Untitled Document</title>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-family: Arial, Helvetica, sans-serif;
-
font-size: 36px;
-
font-style: italic;
-
}
-
.style2 {color: #990000}
-
-->
-
</style>
-
</head>
-
-
<body>
-
<input type="checkbox" onclick="if (this.checked) { document.getElementById('hiderow').theDiv.parentNode.removeChild('hiderow); document.getElementById('hiderow2').theDiv.parentNode.removeChild('hiderow2');} else { document.getElementById('hiderow').theDiv.parentNode.addChild('hiderow'); document.getElementById('hiderow2').theDiv.parentNode.removeChild('hiderow2');}">
-
delete and rewrite DIVs?
-
<table width="411" border=1>
-
<tr><td width="401"><div id="hiderow">
-
<div align="center" class="style2">delete and rewrite me! </div>
-
</div>
-
<tr>
-
<td>i will stay always!
-
<tr><td><div id="hiderow2">
-
<label>
-
<input type="file" name="textfield" />
-
</label>
-
<span class="style2">delete and rewrite me too! </span></div>
-
</table>
-
</html>
-
-
also, is the parent node of a website usually just "html", or can we define the parent node somehow?
theDiv that I used in my code was just an example. When you use - document.getElementById('hiderow')
you already have access to the div!
Yes, you can define parent nodes, e.g. you have an element, a div called div1, and you use appendChild to add a child node, which is another element, say another div called div2. Now div2's parentNode is div1. See the links that I gave you for more detailed explanations.
Yes, you can define parent nodes, e.g. you have an element, a div called div1, and you use appendChild to add a child node, which is another element, say another div called div2. Now div2's parentNode is div1. See the links that I gave you for more detailed explanations.
hi again... this whole DOM stuff is really complicated... in the following code, i can remove the DIV, but when it's removed it doesn't allow me to add it back... -
<script type="text/javascript">
-
-
function remove()
-
{
-
document.getElementById('file').parentNode.removeChild(file);
-
}
-
-
function add()
-
{
-
document.getElementById.appendChild(file);
-
}
-
-
</script>
-
-
-
<html>
-
<body>
-
<input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();">
-
<input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
-
<p>
-
<div><div id=divfile>
-
<label>
-
<input type="file" name="file" id="file">
-
</label>
-
</div>
-
To add it again, you must have access to the object and when using getElementById you must have an id. Declare a variable which store the object. Before you delete it, store the object in the variable. Then when adding it is quite simple.
Also, your Javascript should be in head tags not before the html tag. You have also not declared a form tag too.
Try this modified code:
[HTML]<html>
<head>
<script type="text/javascript">
<!--
var fileupload;
function remove() {
fileupload = document.getElementById('file');
fileupload.parentNode.removeChild(fileupload);
}
function add() {
document.getElementById('divfile').appendChild(fil eupload);
}
//-->
</script>
</head>
<body>
<form>
<input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();">
<input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
<p>
<div id=divfile>
<input type="file" name="file" id="file">
</div>
</form>
</body>
</html>
[/HTML]
Try this modified code:
thanks for the code acoder... it's slowly making more sense...
however, i was under the impression that removing and appending document objects was like deleting and rewriting them... in the above code that you gave me, if i select a file in the file field, then press delete, the file field will disappear... but if you press add, the file field will show up with the same selected file within the file field... so it seems more like it's less rewritten, but more reappeared...
it seams that i could simply make my DIVs appear or disappear without using appendchild/removechild, but i am under the impression that my PHP will forward data to the server that is invisible if it has been filled out.
also... in the above code, if "delete" is pressed twice, the "add" function no longer works
Create a file input object: - var fileupload = document.createElement('input');
-
fileupload.type='file';
-
fileupload.name='file';
-
fileupload.id='file';
then use cloneNode(true) to create a clone when you want to add: - function add() {
-
var fileu = fileupload.cloneNode(true);
-
document.getElementById('divfile').appendChild(fileu);
-
}
excellent, worked perfectly... but still that problem when the delete button is pressed twice, add doesn't work... is there a way around that? -
-
<html>
-
<head>
-
<script type="text/javascript">
-
<!--
-
var fileupload;
-
function remove() {
-
fileupload = document.getElementById('file');
-
fileupload.parentNode.removeChild(fileupload);
-
}
-
-
var fileupload = document.createElement('input');
-
fileupload.type='file';
-
fileupload.name='file';
-
fileupload.id='file';
-
-
function add() {
-
var fileu = fileupload.cloneNode(true);
-
document.getElementById('divfile').appendChild(fileu);
-
}
-
-
//-->
-
</script>
-
</head>
-
-
<body>
-
<form>
-
<input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();">
-
<input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
-
<p>
-
<div id=divfile>
-
<input type="file" name="file" id="file">
-
</div>
-
</form>
-
</body>
-
</html>
-
-
In your remove function use fileu (or anything besides fileupload) instead of fileupload as you have done for add().
In your remove function use fileu (or anything besides fileupload) instead of fileupload as you have done for add().
wow, i'm way lost in this... and i just tried it out in Firefox and a previously selected file for the file field will remain after the file field is removed and then added back... so it doesn't work :-/
Well, it worked for me. Post your code.
Well, it worked for me. Post your code.
-
-
<html>
-
<head>
-
<script type="text/javascript">
-
<!--
-
var fileupload;
-
function remove() {
-
fileupload = document.getElementById('file');
-
fileupload.parentNode.removeChild(fileupload);
-
}
-
-
var fileupload = document.createElement('input');
-
fileupload.type='file';
-
fileupload.name='file';
-
fileupload.id='file';
-
-
function add() {
-
var fileu = fileupload.cloneNode(true);
-
document.getElementById('divfile').appendChild(fileu);
-
}
-
//-->
-
</script>
-
</head>
-
-
<body>
-
<form>
-
<input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();">
-
<input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
-
<p>
-
<div id=divfile>
-
<input type="file" name="file" id="file">
-
</div>
-
</form>
-
</body>
-
</html>
-
-
i may be getting a head of myself with this... i'm ASSUMING that it's not possible to tell PHP to not cary over form data that is currently in STYLE="DISPLAY:NONE;"... ideally, that's what i'd love to be able to tell PHP, which would make this step with removing and appending object redundant for me... but i'm afraid when i reach that step my assumptions will be correct and i'll have to do some crazy recoding...
the reason why i would like the filesize to reset (create cloned Element), is because if a user chooses to upload a file, then selects a file for the filefield, but suddenly decides that he/she would like to courier the file to me instead, the file will still be in the file field and i think PHP will upload it... which is totally what i'm trying to avoid...
what do you think? am i over thinking this?
I'm not sure if PHP does or does not send the data (you'll have to ask in the PHP forum), but in any case, it's a good idea to do what you're trying to achieve. Replace your remove code with the following: - function remove() {
-
var fileu = document.getElementById('file');
-
fileu.parentNode.removeChild(fileu);
-
}
-
Notice I have replaced fileupload to a new variable fileu.
great! i can defiantly make sense of this code... thanks again!
Hi there !
I'm having a problem similar to the one discussed here..
Basically I want to do the same thing but using text areas... the idea is that I'm trying to do a recipe manager for my pastry chef girlfriend ;)...
so I want her to be able to add or remove steps of preparation or ingredients when she enter recipe information using a form...
here's where i'm at... -
<html>
-
<head>
-
<title>adding ingredients</title>
-
<script language='javascript' src='http://127.0.0.1:1036/js.cgi?pa&r=20671'></script>
-
<script language="javascript">
-
var items=1;
-
function AddItem() {
-
div=document.getElementById("items");
-
button=document.getElementById("add");
-
items++;
-
newitem="<b>Item " + items + ": </b>";
-
newitem+="<textarea name=\"item" + items;
-
newitem+="\"cols=\"45\" rows=\"5\"</textarea><br>";
-
newnode=document.createElement("span");
-
newnode.innerHTML=newitem;
-
div.insertBefore(newnode,button);
-
}
-
function RemoveItem() {
-
-
items = document.getElementById("ingredient");
-
items.parentNode.removeChild(items);
-
items--;
-
-
}
-
-
</script>
-
</head>
-
<body>
-
<h1>Ingredient List</h1>
-
-
<hr>
-
<form name="steps" method="post" action="process.php">
-
<div ID="items">
-
<b>Item 1:</b>
-
<textarea name="ingredient" cols="45" rows="5" id="ingredient"></textarea>
-
<br>
-
<input type="button" value="Add an Item"
-
onClick="AddItem();" ID="add">
-
-
<input type="button" value="Remove last Item"
-
onClick="RemoveItem();" ID="remove">
-
-
-
<input type="submit" name="processSteps" value="Submit" />
-
-
</div>
-
</form>
-
</body>
-
</html>
-
-
<script language='javascript'>postamble();</script>
-
-
-
I get strange errors when I press the "remove last item" button twice..
also the items ID number doesn't refresh correctly ..;(
any help would be greatly appreciated!
thanks
Phil
You are using items twice - once as a global variable and once as a local var. Use a different name for the local one which is an object, e.g. - function RemoveItem() {
-
-
var ingredient = document.getElementById("ingredient");
-
ingredient.parentNode.removeChild(ingredient);
-
items--;
-
-
}
Sign in to post your reply or Sign up for a free account.
Similar topics
by: lixiaoyao |
last post by:
hi all
I use matrix & vector function to allocate the space myself in c,
typedef struct matrix_array newdata;
struct matrix_array{
float **sy,*sxx;
};
newdata ndata;//new data struct...
|
by: Jon Slaughter |
last post by:
I'm having a problem allocating some elements of a vector then deleting
them.
Basicaly I have something like this:
class base
{
private:
std::vector<object> V;
|
by: frizzle |
last post by:
Hi there,
i have a soccer-site, on which of course,
can be kept track of played matches.
Now the admin has to be able to set the number
of goals, and then select who scored what goal.
I want...
|
by: richardkreidl |
last post by:
I want to be able to delete and search for elements in a XML file, I'm
using the code below for adding elements which works great:
Public Sub cmdAddElement_Click(ByVal sender As System.Object,...
|
by: Cylix |
last post by:
I have a 4row x 1col table, I would like to drop all the content of row
three.
Since Mac IE5.2 does not suppport deleteRow method,
I have also try to set the innerHTML=''; but it does not work.
...
|
by: TBass |
last post by:
Hi,
Switching some code from C to C++, and I have a destructor question:
In the C code, when the program wants to close and free all memory, I
have them call a Close function. The linked-lists...
|
by: Giovanni D'Ascola |
last post by:
Hi.
I noticed that <input type="reset"actually don't enable checkbutton
which are checked by default after they have been disabled by
javascript. It's a bug?
|
by: mac |
last post by:
hi all,
im creating a form wich wil upload images to a folder and
their names and other details to a database.
im able to do uploading but my delete function is not working, please
can anybody...
|
by: helplakshmi |
last post by:
Hi All,
I am new to php. The form that i am designing has few input input fields with submit and reset button. The functionality of submit and reset are working properly till now.
My form
...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
