13 2306
You can use my code for deleting a row element in a table, I created this for you. just observed the codes and run it. you can customize it to the fields you want, your way in creating an element is not ok for me, its difficult to delete your elements,,you didnot set a unique id or class or name to your newly created element. :D -
-
<!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=utf-8" />
-
<title>Zick Sample</title>
-
-
<script type="text/javascript">
-
var counter = 1;
-
var collector = "";
-
-
function addfields(indx)
-
{
-
var tbl = document.getElementById('table_id');
-
var newtr = document.createElement('tr');
-
counter = counter + indx;
-
-
//adding of elements
-
//please put a unique id or class or name to newly created elements.
-
-
newtr.setAttribute('id','tr'+counter);//put the new tr element an id
-
-
newtr.innerHTML = '<td><input type="checkbox" name="checkb'+counter+'" id="checkb'+counter+'" value="'+counter+'" onclick="checkme('+counter+')"></td><td><input type="text" name="text'+counter+'"></td><td><textarea name="textarea'+counter+'"></textarea></td>';
-
-
tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
-
}
-
-
function checkme(dx)
-
{
-
//collect the checked elements data
-
collector += dx+",";
-
}
-
-
function deletetherow(indx)
-
{
-
var col = collector.split(",");//split the checked elements data
-
-
for (var i = 0; i < col.length; i++)
-
{
-
var remvelem = document.getElementById('tr'+col[i]);//the element to remove
-
var chckbx = document.getElementById("checkb"+col[i]);
-
-
// if the element is exist with a checked checkbox the delete the row
-
if(remvelem && chckbx.checked)
-
{
-
var tbl = document.getElementById('table_id');
-
tbl.removeChild(remvelem);
-
}
-
}
-
}
-
</script>
-
-
</head>
-
-
<body>
-
-
<table id="table_id">
-
<tr id="tr1" class="trmain">
-
<td>
-
-
</td>
-
<td>
-
<input type="text" name="text1">
-
</td>
-
<td>
-
<textarea name="textarea1"></textarea>
-
</td>
-
</tr>
-
</table>
-
<input type="button" value="Add another" onClick="addfields(1);" />
-
<input type="button" value="Delete row" onclick="deletetherow()" />
-
-
</body>
-
</html>
-
-
-
I hope it helps. :D
Yes, this helps, thank you. However my only problem now is setting variable limit. Let's say I only want to let a user add three rows max var limit = 3;in this instance with a function I am unable to get it to work, Can you assist with this? I am trying all my methods, but the add function will not work as above the user should be alerted if records all can't be deleted and only max 3. By the way, the checkbox only starts appearing after the first row, but that seems fine being they all can't be deleted anyway.
change the addfields() function with this. and put a variable var limit = 5; -
var limit = 5;
-
-
function addfields(indx)
-
{
-
var tbl = document.getElementById('table_id');
-
var newtr = document.createElement('tr');
-
counter = counter + indx;
-
-
//adding of elements
-
//please put a unique id or class or name to newly created elements.
-
-
if(tbl.getElementsByTagName("tr").length < limit)
-
{
-
newtr.setAttribute('id','tr'+counter);//put the new tr element an id
-
-
newtr.innerHTML = '<td><input type="checkbox" name="checkb'+counter+'" id="checkb'+counter+'" value="'+counter+'" onclick="checkme('+counter+')"></td><td><input type="text" name="text'+counter+'"></td><td><textarea name="textarea'+counter+'"></textarea></td>';
-
-
tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
-
}
-
else
-
{
-
alert("You reach the limit to add fields.");
-
}
-
}
-
in here we count the length of tr inside the table and compare it in our limit variable by the use of this if statement if(tbl.getElementsByTagName("tr").length < limit)
I have implemented the limit, works and thanks. On to the next issue. I have a select menu and can't get that to work. I tried to create a function inside the add but it didn't work, I tried to add the <select name="theselectmenuname'+counter+'"></select></td> in various fashions and a div and without a div as innerhtml. It will populate but nothing in the dropdown however from what I am reading I need to use innerText but not able to get that working within same function :( UPDATE ON ABOVE
It does seem to work when I create it inside a form and thus the drop down menu in the form with <select name="theselectmenuname'+counter+'"><option value="one">one</option>option value="two">two</option></select></td> in the js tr ....I have read more and more, a little confused as there is problem with memory leakage or such for this and innerhtml and I test in IE seems ok so far there where people were complaining of. So, any limitations to this if you are aware, I am using php to handle the script. Thank you for all your help so far!
add this td code in your addfields function in the newtr.innerHTML - <td><select id="theselectmenuname'+counter+'" name="theselectmenuname'+counter+'"></select></td>
then put this inside your if statement after the line for tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id - addOption_list('theselectmenuname'+counter);
and finaly copy paste this to your javascript file -
//adding of options in select tag
-
function addOption_list(thename)
-
{
-
var optval = new Array("Select","One","Two","Three");
-
var selbx = document.getElementById(thename);
-
-
for (var i=0; i < optval.length; ++i)
-
{
-
addOption(selbx, optval[i], optval[i]);
-
selbx.options[i];
-
}
-
}
-
-
function addOption(selectbox,text,value)
-
{
-
var optn = document.createElement("OPTION");
-
optn.text = text;
-
optn.value = value;
-
selectbox.appendChild(optn);
-
}
-
-
this is the code for adding select with option value in your row.
i hope it solved your problem now.
I have played around with your code, seems good. I will have to elaborate more and get back to you if any other issues arise. I give you a BIG THANK YOU for your help. I have been working on such for a long time, I first started with nodes using switch statement and create the case with a newcell. Can you please explain why textarea does not work for this, or does it? I sure could never get it to work as my reading states back w3 html textarea not valid markup when created. Or retracting, it did populate but the data would just copy from the first cell regardless if it was cleared function. You seem very knowledgeable, so I ask you out of all my frustration that question.
Hi, we'll working with your code last couple days, so now have been working on error function with this and nothing seems to work. Basically, as your aware I am using php within this. So, when user hits submit button and there are errors, the user data should still be in the fields if there is an error and the message or highlight appear over the field, all that happens well but only the form first row in the table and none of the dynamic rows. Now, I have used - <input type="text" name="something" value="<?php if(isset($_POST['something'])) echo $_POST['something']; ?>" >
as an example, as this is usually how I hold the data, but of course this works in the form on submit but I am not able to add this to the javascript - if(tbl.getElementsByTagName("tr").length < limit)
-
{
-
newtr.setAttribute('id','tr'+counter);//put the new tr element an id
-
newtr.innerHTML = '<td><input type .......
as the php does not work within and I can't get any function to work as should be required. It is in the form element all fields are array, so the prior becomes, - <input type="text" name="something[]" value="<?php if(isset($_POST['something[]'])) echo $_POST['something[]']; ?>" >
and when applied to the above statement the js it just prints Array in the field. The only work around I could find was using HTML5 required, which was tricky with the code from last time, but I got it to work. However required does not work with Safari damnit so now if you will provide a way to make the php into the js for error notice in dynamic part of form a (which I prefer since server side) or if not javascript to do this. There is a Jquery build for this I found, but thee info is so very limited and I couldn't make sense of it and really curious why was not expanded more by their tema, I couldn't find further help.
Dormilich 8,658
Recognized Expert Moderator Expert
and when applied to the above statement the js it just prints Array in the field
of course. you cannot sensibly print an array with echo.
print_r and sorry for confusion as what I mean.
Dormilich 8,658
Recognized Expert Moderator Expert
while you can use print_r() to display an array, does it make sense to display the whole array structure in a single input field?
This is not the case at all. I am not sure if you understand the thread topic here sir/madam? This is about a dynamically generated field error check with js/php. You make no revelation to the core issue here. So, I need the js to error or is there a way to make php do this? As I surely cannot find a way. As far as html5 the required does work for al fields and there is workaround markup for cross browser support I added. So, now I just add an error check if empty and echo and kill script.
Secondly, I can not get an array [i] from the fields to post as an array. I have the js create each field as - name="textarea1[]'+counter+'"
as the same in the html for example.. - <input type="text" name="text2[]"
I can not get the array to post, it will only process and post the first form value not the other multi array of how many fields I add.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: pizzy |
last post by:
INTRO: I tried to clean it up for easy reading. I hope I didn't make
any mistakes.
PROBLEM: WOW, this is some crazy sh!t. I can't get my checkbox (see
"TAGSELECTED") to print my textboxes (see...
|
by: pizzy |
last post by:
I am having a problem with the last results. I can't seem to be able to
get the input2A and input3A to appear. I don't seem to have a problem
with the show and hide after a number is entered and...
|
by: Pat Patterson |
last post by:
I'm having serious issues with a page I'm developing. I just need some
simple help, and was hoping someone might be able to help me out in
here.
I have a form, that consists of 3 pages of...
|
by: CAD Fiend |
last post by:
Hello,
Well, after an initial review of my database by my client, they have
completely changed their minds about how they want their form. As a
result, I'm having to re-think the whole process....
|
by: Alan Silver |
last post by:
Hello,
I have a repeater that has code like this...
<ItemTemplate>
<asp:CheckBox ID="chkDelete" Text="" RunAt="server"/>
.... other stuff goes here
</ItemTemplate>
There is a button below...
| |
by: Derek Basch |
last post by:
I spent several hours struggling with dynamic form fields added with
appendChild or innerHTML not POSTing on submit in Firefox. The only
way I found to make it work is to append any created fields...
|
by: bmallett |
last post by:
First off, i would like to thank everyone for any and all help with this. That being said, I am having a problem retrieving/posting my dynamic form data. I have a form that has multiple options...
|
by: harsh gidra |
last post by:
I am trying to POST dynamic form elements added using javascript but unable to do so. The elements are being shown when I add them but don't see anything on the test.php page.
I have been trying...
|
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: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
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...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |