Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > creating a button that will add text boxes

Reply
Thread Tools

creating a button that will add text boxes

 
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
 
 
 
Jonas Raoni
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
 
 
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Jonas Raoni
Guest
Posts: n/a
 
      01-04-2006
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

<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

 
Reply With Quote
 
Jonas Raoni
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
Rick
Guest
Posts: n/a
 
      01-04-2006
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem in running a basic code in python 3.3.0 that includes HTML file Satabdi Mukherjee Python 1 04-04-2013 07:48 PM
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
Dynamically adding Dropdown, Text Box, Add Button and Remove Button Rocky ASP .Net Building Controls 0 11-08-2006 11:20 PM
2 list-boxes with add & remove button Ramamoorthy Ramasamy ASP General 2 02-11-2005 01:52 PM
Creating dynamic Text boxes in VB .Net Coleen ASP .Net Building Controls 9 11-11-2004 03:22 PM



Advertisments