adding tow inputs dinamic

**JorgeCetina** · 09-01-2008, 05:57 PM

Hi; I'd like with a button add two child inputs, I think this can do it throuht javascript.

sample:

PHP Code:


<input type="text" name="gasto" id="gasto"><input type="text" name="factura" id="factura">

<input type="button" name="AddNewSet" Value="Add New Set" onclick="AddNewSet()"

I´d like to do the function AddNewSet

Somebody can help me?

**jlizarraga** · 09-01-2008, 07:50 PM

Probably not what you're looking for, but maybe it'll send you in the right direction:

Code:

<div id="someDiv">

    <input type="text" name="gasto" id="gasto" />
    <input type="text" name="factura" id="factura" />
    <input type="button" name="AddNewSet" Value="Add New Set" onclick="AddNewSet()" />
	
</div>

<script type="text/javascript">

var oDiv = document.getElementById("someDiv");

function AddNewSet(){
	oDiv.innerHTML += "<br /><br />" + "<input type=\"text\" /> <input type=\"text\" />";
}

</script>

**JorgeCetina** · 09-02-2008, 12:33 AM

I can't do it, maybe i need more help

**JorgeCetina** · 09-02-2008, 01:42 AM

I can do this with google search:

Code:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones2.js" 

type="text/javascript"></script>
</head>
<body>
<form name="myform" action=#>
<input type=text 
name="gasto" 
value="">

<input type=text 
name="factura" 
value="">
</form>

<button onclick="doIt()">do it</button>

<script>
function doIt()
{
var doc = document;
var f = doc.getElementById('myForm');

// show hidden
var el = f.elements.gasto;
el.style.display = "";

// create/insert new
el = doc.createElement("input");
el = f.appendChild(el);
el.name = "newinput";
el.type = "text";
el.value = "";
}

</script>


</body>
</html>

it works with one input field but with the second fiel it doesn't work

this is the funciones2.js (javascript code)

HTML Code:

function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  
  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);

  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
  cellRightSel.appendChild(sel);
}

**JorgeCetina** · 09-02-2008, 03:11 PM

I get the code, just I'd like to know, are there way to improve it? maybe some sentences are innecesaries, This is the code I have:

Code:

<html>
<head>
<title>Problema</title>

</head>
<body>
<form name="myform" action=#>
<input type=text 
name="gasto" 
value="">

<input type=text 
name="factura" 
value="">
</form>

<button onclick="doIt()">do it</button>

<script>
function doIt()
{
var doc = document;
var f = doc.getElementById('myForm');

// show hidden
var el = f.elements.gasto;
el.style.display = "";
var es = f.elements.factura;
es.style.display = "";

// create/insert new
el = doc.createElement("input");
el = f.appendChild(el);
el.name = "newinput";
el.type = "text";
el.value = "";

es = doc.createElement("input");
es = f.appendChild(es);
es.name = "newinput";
es.type = "text";
es.value = "";


}

</script>


</body>
</html>

Thread: adding tow inputs dinamic

Thread Tools

Search Thread

adding tow inputs dinamic

I can do it!!

Bookmarks

Bookmarks

Posting Permissions