PDA

View Full Version : 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:


<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:


<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:

<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)

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:


<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>