adding new field onclick

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

adding new field onclick

Post by shiznatix »

i want to have a form that when you click a bottom that says "more" it will show 3 extra fields, thats for each click of the button. its for adding links to a category and each link has 3 parts to it for the db but i don't know how many links are going for each category and it would be annoying to have to refresh the page after each link if you are manually entering in 100 links.

so i need a onclick= create 2 text fields and 1 textarea. how do i do that?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

Here is the basic running code. you may want adding code to track the current no. of fields or you may easily track them in PHP

Code: Select all

<form name="frm">
<input type="button" onclick="createFields()" value="Add New Fields">
</form>
<script>
tf = 0; 
ta = 0;
F = document.frm;
function createFields()
{
 TF1 = document.createElement("INPUT");
 TF1.type = "text";
 TF1.name = "text"+(++tf);
 F.appendChild(TF1);
 TF2 = document.createElement("INPUT");
 TF2.type = "text";
 TF2.name = "text"+(++tf);
 F.appendChild(TF2);
 TA = document.createElement("TEXTAREA");
 TA.cols = "50";
 TA.rows = "10";
 TA.name = "textarea"+(++ta);
 F.appendChild(TA);
}
</script>
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

many thanks. ill give that a try.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

although not working exactly like I wanted, here's the "correct" way of doing it

Code: Select all

<?php
  if($_SERVER['REQUEST_METHOD'] == 'POST') {
    echo '<pre>';
    var_export($_POST);
    echo '</pre>';
  }
?>
<html>
  <head>
    <script language="Javascript">
      var i = 1;
      function addMore() {
        var frm = document.forms['foo'];
        var w = document.createElement('HR');
        var f;
        frm.appendChild(w);
        f = w = document.createElement('INPUT');
        w.setAttribute('type','text');
        w.setAttribute('name','field['+i+'][text1]');
        frm.appendChild(w);
        w = document.createTextNode('  ');
        frm.appendChild(w);
        w = document.createElement('INPUT');
        w.setAttribute('type','text');
        w.setAttribute('name','field['+i+'][text2]');
        frm.appendChild(w);
        w = document.createElement('BR');
        frm.appendChild(w);
        w = document.createElement('TEXTAREA');
        w.setAttribute('name','field['+i+'][textarea]');
        w.setAttribute('cols','35');
        w.setAttribute('rows',(6+i).toString());
        frm.appendChild(w);
        i++;
        f.scrollIntoView(false);
      }
    </script>
  </head>
  <body>
    <form name="foo" action="" method="post">
      <input type="text" name="field[0][text1]" />&nbsp;&nbsp;<input type="text" name="field[0][text2]" /><br /><textarea name="field[0][textarea]" cols="35" rows="6"></textarea>
    </form>
    <a href="#" onclick="addMore()">More&hellip;</a>
    <script language="Javascript">
    	/*
      var frm = document.forms['foo'];
      var c = frm.firstChild;
      while(c) {
        if(c.nodeName == '#text') {
          alert(escape(c.nodeValue));
        }
        c = c.nextSibling;
      }
      */
    </script>
  </body>
</html>
;) I was bored. :)
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

feyd wrote:I was bored. :)
Yeah! I truly understand your feelings :lol:
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

btw, sometimes it very handy to use .cloneNode to copy some 'template row' (for dynamic tables), like this:

Code: Select all

<script type='text/javascript'>
function add_row(tbl) {
  var table, template, section, newRow;

  table = document.getElementById(tbl);
  if(!table) return;
  template = getTemplateRow(table);
  section = template.parentNode;

  newRow = section.appendChild(template.cloneNode(true));
  item.rows.push(newRow);
  newRow.className = '';
}

function getTemplateRow(table) {
	for(var i=0, l=table.rows.length; i<l; i++) {
		if(table.rows[i].className.match(/\brow_template\b/i)) {
			return table.rows[i];
		}
	}
	return false;
}
</script>
<style type='text/css'>
tr.row_template {display:none;}
table {border: solid green 1px;}
</style>
<button onclick="add_row('tbl1');">Click me</button>
<table id="tbl1">
<tr class="row_template"><td><input type="text" name="field[]" /></td><td><img src="img/something.gif" /></td></tr>
</table>
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

holy snap. i wish i was that quick at the fingers 8O thanks a bunch guys. i got it working
Post Reply