hidden input from dynamically added field is not visible in DOM
|
View:
New views
3 Messages
—
Rating Filter:
Alert me
|
 |
hidden input from dynamically added field is not visible in DOM
by RobR-3
::
Rate this Message:
I'm a new javascript/jquerier and I'm not sure I'm asking the question
properly. I'm an ops guy, not a developer so please bear with me. I'm adding some markup dynamically using .append and two of the tags are a hidden input containing a value and a link that calls a function that references the hidden input. Essentially, I want to be able to dynamically add "Steps" and within the Steps, I want to be able to dynamically add "Actions". And when I hit submit, all the field should be unique so I can feed them into a database via simply PHP commands. I know this can probably be done with arrays also, but it's still just beyond my capability. However, I can't seem to see that dynamically added hidden input. I've read somewhere that the DOM is created at page rendering time and that dynamically added items using .append don't get added to that DOM. (I've also read the opposite, that dynamically added items get added to the DOM in real time). I wondering if the objects in the "Steps" I'm adding are not being added to the DOM in real time. Perhaps there's something I have to do to "register" the newly add objects in the DOM. Can anyone clarify this issue for me? Also, I'm currently using Firebug on firefox on Mac OSX 10.5. Are there better javascript debuggers available? here's the code (I hard coded "step_id1" in this version): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Test jQuery</title> <script type="text/javascript" src="/js/jquery-latest.js"></script> <script type="text/javascript" src="/js/jquery.highlightFade.js"></ script> <script type="text/javascript" src="/js/jquery-select-change.js"></ script> <script type="text/javascript"> function addStep() { var id = document.getElementById("id").value; $("#divStep").append("<fieldset id='row" + id + "'> \ <table><tr><td><label for='txt" + id + "'>Field " + id + " \ <input type='text' size='20' name='txt[]' id='txt" + id + "'> \ <a href='#' onClick='removeStep(\"#row" + id + "\"); return false;'>Remove Step</a> \ <input type='hidden' name='step_id" + id + "' value='1'> \ <a href='#' onClick='addAction(" + id + "); return false;'>Add Action</a></td> \ <td><div id='divAction" + id + "'></div></td></tr></table> \ </fieldset>"); $('#row' + id).highlightFade({ speed:1000 }); id = (id - 1) + 2; document.getElementById("id").value = id; } function addAction(id) { var act_id = document.getElementById("step_id" + id).value; alert("Step Id " + act_id); } function removeStep(id) { $(id).remove(); } </script> <body> <p><a href="#" onClick="addStep(); return false;">Add Step</a></p> <form action="#" method="get" id="form1"> <input type="hidden" id="id" value="1"> <div id="divStep"></div> <p><input type="submit" value="Submit" name="submit"></p> </form> </body> </html> |
|
|
Re: hidden input from dynamically added field is not visible in DOM
by RobR-3
::
Rate this Message:
I'm such a dope. I didn't set the id attribute for the hidden input
but I was trying to getElementById... On Nov 6, 11:58 am, RobR <rob.rami...@...> wrote: > I'm a new javascript/jquerier and I'm not sure I'm asking the question > properly. I'm an ops guy, not a developer so please bear with me. > > I'm adding some markup dynamically using .append and two of the tags > are a hidden input containing a value and a link that calls a function > that references the hidden input. Essentially, I want to be able to > dynamically add "Steps" and within the Steps, I want to be able to > dynamically add "Actions". And when I hit submit, all the field > should be unique so I can feed them into a database via simply PHP > commands. I know this can probably be done with arrays also, but it's > still just beyond my capability. > > However, I can't seem to see that dynamically added hidden input. > > I've read somewhere that the DOM is created at page rendering time and > that dynamically added items using .append don't get added to that > DOM. (I've also read the opposite, that dynamically added items get > added to the DOM in real time). I wondering if the objects in the > "Steps" I'm adding are not being added to the DOM in real time. > Perhaps there's something I have to do to "register" the newly add > objects in the DOM. > > Can anyone clarify this issue for me? Also, I'm currently using > Firebug on firefox on Mac OSX 10.5. Are there better javascript > debuggers available? > > here's the code (I hard coded "step_id1" in this version): > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> > <html> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=iso-8859-1"> > <title>Test jQuery</title> > > <script type="text/javascript" src="/js/jquery-latest.js"></script> > <script type="text/javascript" src="/js/jquery.highlightFade.js"></ > script> > <script type="text/javascript" src="/js/jquery-select-change.js"></ > script> > > <script type="text/javascript"> > function addStep() { > var id = document.getElementById("id").value; > $("#divStep").append("<fieldset id='row" + id + "'> \ > <table><tr><td><label for='txt" + id + "'>Field " + id + > " \ > <input type='text' size='20' name='txt[]' id='txt" + id + > "'> \ > <a href='#' onClick='removeStep(\"#row" + id + "\"); return > false;'>Remove Step</a> \ > <input type='hidden' name='step_id" + id + "' value='1'> \ > <a href='#' onClick='addAction(" + id + "); return false;'>Add > Action</a></td> \ > <td><div id='divAction" + id + "'></div></td></tr></table> \ > </fieldset>"); > > $('#row' + id).highlightFade({ > speed:1000 > }); > > id = (id - 1) + 2; > document.getElementById("id").value = id; > > } > > function addAction(id) { > var act_id = document.getElementById("step_id" + id).value; > alert("Step Id " + act_id); > > } > > function removeStep(id) { > $(id).remove();} > > </script> > > <body> > > <p><a href="#" onClick="addStep(); return false;">Add Step</a></p> > <form action="#" method="get" id="form1"> > <input type="hidden" id="id" value="1"> > <div id="divStep"></div> > <p><input type="submit" value="Submit" name="submit"></p> > </form> > > </body> > </html> |
|
|
Re: Re: hidden input from dynamically added field is not visible in DOM
by Marcel Araujo
::
Rate this Message:
Use the function LIVE to find element
$("#selector").live('clink', function(){ //your code here });2009/11/6 RobR <rob.ramirez@...> I'm such a dope. I didn't set the id attribute for the hidden input -- Abraços...... Marcel Araujo System Analyst Developer Java/PHP/RIA Linux User #490101 |
| Free embeddable forum powered by Nabble | Forum Help |
