creating a button that will add text boxes

Discussion in 'Javascript' started by Rick, Jan 4, 2006.

  1. Rick

    Rick Guest

    Hello,

    I'm trying to create a javascript function that will allow the user to
    press a button within the html code that will add a text box right
    above the button. If the user presses it a second time it should add a
    second text box right under the previous text box. Any ideas?

    Thanks!

    Rick
     
    Rick, Jan 4, 2006
    #1
    1. Advertising

  2. Rick

    Jonas Raoni Guest

    Rick escreveu:
    > I'm trying to create a javascript function that will allow the user to
    > press a button within the html code that will add a text box right
    > above the button. If the user presses it a second time it should add a
    > second text box right under the previous text box. Any ideas?


    Use insertBefore :)

    <script type="text/javascript">
    function add(o){
    var i = document.createElement("input"), p = o.parentNode;
    i.type = "text", p.insertBefore(i, o),
    p.insertBefore(document.createElement("br"), o);
    }
    </script>

    <input type="button" value="New Input" onclick="add(this)" />


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
     
    Jonas Raoni, Jan 4, 2006
    #2
    1. Advertising

  3. Rick

    Rick Guest

    thanks!

    what if i want to add a row of three text boxes when the button is
    clicked? and my last and final question is how do i assign those
    textboxes as part of a sql based database (aka...i want the first
    textbox to be "date" the second to be assigned as "name" and the last
    to be assigned as "comment")? thank you so much!

    Rick
     
    Rick, Jan 4, 2006
    #3
  4. Rick

    Rick Guest

    maybe this will help:

    the javascript code you posted is great. i want to make it so that
    when the button is pressed it outputs something like this:

    <table>
    <tr>
    <td>Date: <input type="text" name="date"></td>
    <td>Name: <select name="name"> ***this will be a list from the
    database*** </td>
    <td>Comment: <textarea class="formfield" style="width: 300"
    name=comment"></textarea></td>
    </tr>
    </table>

    is there anyway to recreate that html within the javascript script
    function? thanks!

    Rick
     
    Rick, Jan 4, 2006
    #4
  5. Rick

    Rick Guest

    maybe this will help:

    the javascript code you posted is great. i want to make it so that
    when the button is pressed it outputs something like this:

    <table>
    <tr>
    <td>Date: <input type="text" name="date"></td>
    <td>Name: <select name="name"> ***this will be a list from the
    database*** </td>
    <td>Comment: <textarea class="formfield" style="width: 300"
    name=comment"></textarea></td>
    </tr>
    </table>

    is there anyway to recreate that html within the javascript script
    function? thanks!

    Rick
     
    Rick, Jan 4, 2006
    #5
  6. Rick

    Rick Guest

    maybe this will help:

    the javascript code you posted is great. i want to make it so that
    when the button is pressed it outputs something like this:

    <table>
    <tr>
    <td>Date: <input type="text" name="date"></td>
    <td>Name: <select name="name"> ***this will be a list from the
    database*** </td>
    <td>Comment: <textarea class="formfield" style="width: 300"
    name=comment"></textarea></td>
    </tr>
    </table>

    is there anyway to recreate that html within the javascript script
    function? thanks!

    Rick
     
    Rick, Jan 4, 2006
    #6
  7. Rick

    Jonas Raoni Guest

    Rick escreveu:
    > what if i want to add a row of three text boxes when the button is
    > clicked? and my last and final question is how do i assign those
    > textboxes as part of a sql based database (aka...i want the first
    > textbox to be "date" the second to be assigned as "name" and the last
    > to be assigned as "comment")? thank you so much!


    Well, it seems that you want me to do your job hahahaha, but it's ok,
    I'm unemployed and today I really have nothing to do, I'm just playing
    CS :D

    <form id="form">
    <input type="button" name="btnAdd" value="New Input" />
    </form>

    <script type="text/javascript">
    (function(){
    var o, i, btn, count = -1, p = (btn =
    document.forms.form.btnAdd).parentNode;
    btn.onclick = function(){
    for(i in ++count, {date: 0, name: 0, comment: 0}){
    o = document.createElement("input");
    o.type = "text";
    o.value = o.name = i + count;
    p.insertBefore(o, btn);
    }
    p.insertBefore(document.createElement("br"), btn);
    };
    })();
    </script>

    I hope it's what you want...


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
     
    Jonas Raoni, Jan 4, 2006
    #7
  8. Rick

    Jonas Raoni Guest

    Rick escreveu:
    > i want to make it so that when the button is pressed it outputs something like this:
    > <table>
    > :
    > </table>
    >
    > is there anyway to recreate that html within the javascript script
    > function? thanks!


    Sure, take a look at my example and make some modifications on your own
    ;]

    It's very simple, basically you'll just need "newNode =
    document.createElement(tagName)" and
    "parentElement.appendChild(newNode)"...

    But you also can create a html string (I always try to avoid using
    innerHTML, it looks like the eval function...) and write something
    like:

    element.innerHTML = "<b>i've got the power to fly into the wind, the
    power to be free, to die and live again =]</b>";

    Good luck, it's time to eat :]


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
     
    Jonas Raoni, Jan 4, 2006
    #8
  9. Rick

    Rick Guest

    thanks so much for the help jonas!

    im new to this javascript stuff and i thought i could just put my html
    right into the script...bad idea...hahaha

    thanks again!

    rick
     
    Rick, Jan 4, 2006
    #9
  10. Rick

    Rick Guest

    thanks so much for the help jonas!

    im new to this javascript stuff and i thought i could just put my html
    right into the script...bad idea...hahaha

    thanks again!

    rick
     
    Rick, Jan 4, 2006
    #10
  11. Rick

    Rick Guest

    quick question,

    when you say "element.innerHTML", do you mean I can put all the html
    code that I listed to you within the equal signs after that tag?
    thanks!

    rick
     
    Rick, Jan 4, 2006
    #11
  12. Rick

    Jonas Raoni Guest

    Rick escreveu:
    > when you say "element.innerHTML", do you mean I can put all the html
    > code that I listed to you within the equal signs after that tag?


    Yeah, that's it... :)

    If you want to add a "<b>" in the end of an element, you can make
    something like
    element.innerHTML += "<b>aaaa</b>";

    PS: try to not send the same message several times, it takes just a
    little while to appear :]


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
     
    Jonas Raoni, Jan 5, 2006
    #12
  13. JRS: In article <>
    , dated Wed, 4 Jan 2006 18:26:39 local, seen in
    news:comp.lang.javascript, Jonas Raoni <> posted :
    >
    >PS: try to not send the same message several times, it takes just a
    >little while to appear :]
    >


    For everybody, the time is non-zero; but all proper news servers will
    show a posted article almost immediately. When giving advice
    specifically for Google users, please indicate it as such.

    Remember : News has been operating for decades; it has developed
    effective standards and conventions, and newsreaders and servers that
    respect these.

    Upstart web-based systems ignore these, to the disadvantage of those who
    don't realise that they could be using a properly-designed service.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME ©
    Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
    Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
    No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
     
    Dr John Stockton, Jan 6, 2006
    #13
  14. Rick

    Randy Webb Guest

    Dr John Stockton said the following on 1/6/2006 11:54 AM:
    > JRS: In article <>
    > , dated Wed, 4 Jan 2006 18:26:39 local, seen in
    > news:comp.lang.javascript, Jonas Raoni <> posted :
    >
    >>PS: try to not send the same message several times, it takes just a
    >>little while to appear :]
    >>

    >
    >
    > For everybody, the time is non-zero;


    That is, obviously, not true.

    > but all proper news servers will show a posted article almost immediately.


    That is not always true either. The time it takes to show an article is
    based on more than "proper news servers". I use a "proper news servers"
    but it does not always "immediately" show a new article. It depends on
    server traffic among other things.

    And, "almost immediately" is not "non-zero" time.

    > When giving advice specifically for Google users, please indicate it as such.


    That advice applies to other users besides Google users. Even if it is a
    Google user that invokes that advice.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jan 6, 2006
    #14
  15. JRS: In article <>, dated Fri, 6 Jan
    2006 15:15:42 local, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >Dr John Stockton said the following on 1/6/2006 11:54 AM:
    >> JRS: In article <>
    >> , dated Wed, 4 Jan 2006 18:26:39 local, seen in
    >> news:comp.lang.javascript, Jonas Raoni <> posted :
    >>
    >>>PS: try to not send the same message several times, it takes just a
    >>>little while to appear :]
    >>>

    >>
    >>
    >> For everybody, the time is non-zero;

    >
    >That is, obviously, not true.


    The article has to travel to some form of news server and back, and be
    processed on the sending, serving, and receiving machines. That cannot
    happen in zero time.

    >> but all proper news servers will show a posted article almost immediately.

    >
    >That is not always true either. The time it takes to show an article is
    >based on more than "proper news servers".


    I was writing about proper news servers, as can be told from my use of
    those words.

    > I use a "proper news servers"
    >but it does not always "immediately" show a new article. It depends on
    >server traffic among other things.


    I wrote "almost" to allow for such things.


    >And, "almost immediately" is not "non-zero" time.


    Of course it is. "Almost immediately" is slower than "immediately"; and
    "immediately" implies "subsequently", which tales longer than zero time.

    --
    © John Stockton, Surrey, UK. ???@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Check boilerplate spelling -- error is a public sign of incompetence.
    Never fully trust an article from a poster who gives no full real name.
     
    Dr John Stockton, Jan 7, 2006
    #15
  16. Rick

    saer sae Guest

    saer sae, Jan 12, 2006
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Greg
    Replies:
    4
    Views:
    382
  2. Stefan Mueller
    Replies:
    5
    Views:
    12,406
    jamesxa
    Jun 16, 2009
  3. Coleen

    Creating dynamic Text boxes in VB .Net

    Coleen, Nov 8, 2004, in forum: ASP .Net Building Controls
    Replies:
    9
    Views:
    300
    Jim Cheshire [MSFT]
    Nov 11, 2004
  4. ahmed k
    Replies:
    0
    Views:
    1,285
    ahmed k
    Sep 25, 2010
  5. Ramamoorthy Ramasamy

    2 list-boxes with add & remove button

    Ramamoorthy Ramasamy, Feb 4, 2005, in forum: ASP General
    Replies:
    2
    Views:
    420
    craig
    Feb 11, 2005
Loading...

Share This Page