Formulier input's tellen en weergeven

Door Onbekende gebruiker op 03-12-2013 20:28

5.832 views

Ik heb het volgende script:


<html>
<head>
<script language="javascript">
fields = 10;
function addInput() {
if (fields != 1000) {
document.getElementById('text').innerHTML += "<tr><td>&nbsp;002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr><br><tr><td>&nbsp;002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr><br><tr><td>&nbsp;002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr><br><tr><td>&nbsp;002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr><br><tr><td>&nbsp;002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr><br>";
fields += 5;
} else {
document.getElementById('text').innerHTML += "<br />Het maximum van 1.000 is bereikt.";
document.form.add.disabled=true;
}
}
</script>
<title></title>
</head>
<body>
<form name="form">
Titel: <input type='text' value='' size="75"/><br>
<table><tr><td>Taal 1:</td><td>Taal 2:</td></tr>
       <tr><td><input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
</table>
Inhoud:<br>
<table><tr><td>001:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>002:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>003:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>004:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>005:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>006:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>007:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>008:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>009:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
<tr><td>010:</td><td> <input type='text' value='' /></td><td><input type='text' value='' /></td></tr>
</table>
<div id="text">
<table>

</table>
</div>
<input type="button" onclick="addInput()" name="add" value="Meer velden toevoegen" /></table></form></body>
</html>

Nu wil ik, dat er inplaats van alleen maar 002 er 011, 012 etc. komt te staan en dat deze ook als name komen te staan bij het veld. Hoe doe ik dit?

Ger van Steenderen

06-12-2013 09:27

Frank Martens op 05/12/2013 22:53:41

Dat is best vreemd... Hoe kan dat komen?

Dan zullen jullie verschillende browers gebruiken.

Onbekende gebruiker

06-12-2013 15:08

Aan de scripts ligt het niet, ik heb die van jou letterlijk gekopieerd:


<form method="post" name="form">
    <table id="row">
    </table>
    <div id="max">
    </div>
    <button type="button" name="add" onclick="addInput(5)">Meer velden toevoegen</button>
    <input type="submit" value="Verzenden"><br />
</form>

<script language="javascript">
function addInput(x)
{
    if(fields < fieldmax)
    {
        fields += 1;
        if(fields < 10)            nummer = '00'+fields;
        else if(fields < 100)    nummer = '0'+fields;
        else                     nummer = fields;
        document.getElementById('row').innerHTML += '<tr><td>&nbsp;'+nummer+':</td><td><input type="text" name="links['+nummer+']" value="" /></td><td><input type="text" name="rechts['+nummer+']" value="" /></td></tr>';
        if(fields == fieldmax)
        {
            document.form.add.disabled=true;
            document.getElementById('max').innerHTML = 'Het maximum van '+fieldmax+' is bereikt.';
        }
    }
    if(x > 1) addInput(x-1);
}

fields        = 0;
fieldmax    = 1000;
addInput(10);
</script>

Ik gebruik Google Chrome Versie 31.0.1650.63 m. Jij?

- SanThe -

06-12-2013 15:28

Dit is niet het laatste script.

Kris Peeters

06-12-2013 15:34 gewijzigd op 06-12-2013 15:35

Ik heb een bacup / restore toegevoegd.

[code lang="js"]
var fieldStore = new Array();
var fieldStoreIndex = 0;

function addInput(x, recursive)
{
if (!recursive) {
// backup values
readValues();
}
if(fields < fieldmax)
{
fields += 1;
if(fields < 10) nummer = '00'+fields;
else if(fields < 100) nummer = '0'+fields;
else nummer = fields;

document.getElementById('row').innerHTML += '<tr><td> '+nummer+':</td><td><input type="text" name="links['+nummer+']" value="" /></td><td><input type="text" name="rechts['+nummer+']" value="" /></td></tr>';
if(fields == fieldmax)
{
document.form.add.disabled=true;
document.getElementById('max').innerHTML = 'Het maximum van '+fieldmax+' is bereikt.';
}
}
if(x > 1) addInput(x-1, true);

if (!recursive) {
// backup terugzetten
restoreValues();
}
}
function readValues() {
var inputs = document.getElementById('row').getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
var value = inputs[i].value;
fieldStore[i] = value;
}
}
function restoreValues() {
for (var i=0; i<fieldStore.length; i++) {
document.getElementById('row').getElementsByTagName('input')[i].value = fieldStore[i];
}
}

fields = 0;
fieldmax = 1000;
addInput(10);
[/code]

Ger van Steenderen

06-12-2013 15:47

Verander regel 19 in de volgende regels:


newRow = document.createElement('tr');
newRow.innerHTML = '<td><input type="text" name="links['+nummer+']" value="" /></td><td><input type="text" name="rechts['+nummer+']" value="" /></td></tr>';
document.getElementById('row').appendChild(newRow);


element.innerHTML += 'blablabla';

is verkort voor:


element.innerHTML = element.innerHTML + 'blablabla';

Betekent dat de gehele inhoud van het element wordt overschreven, terwijl mijn methode er iets aan toevoegd.

Onbekende gebruiker

06-12-2013 16:08

@SanThe:
Oops, foutje. Nu werkt het wel naar behoren! Bedankt!
@Kris:
Werkt bij mij niet...
@Ger:
Bedankt voor de extra uitleg, ik snap het!

Ik wil iedereen bedanken voor de hulp.

Nu het volgende:

Is er een makkelijke manier om dit in een tabel te zetten? Als ik 190x moet controleren hoeveel velden er zijn wordt ik ook niet erg goed van.

Kris Peeters

06-12-2013 16:21

Frank Martens op 06/12/2013 16:08:14

@Kris:
Werkt bij mij niet...

Ligt waarschijnlijk aan getElementsByTagName. Dat heeft geen universele support.

Gebruik sowieso die andere oplossingen maar

Onbekende gebruiker

06-12-2013 16:23

Aah, oke. Nu de andere vraag nog.

(Is er een makkelijke manier om dit in een tabel te zetten? Als ik 190x moet controleren hoeveel velden er zijn wordt ik ook niet erg goed van.)

Kris Peeters

06-12-2013 16:29

Alle gegevens in een database tabel steken, na de submit van de gebruiker. Dat bedoel je?

Ja, wat je dan moet doen: geen de input's een name, met de karakters [] aan het einde.
dus bv.

<input name="item[]">

Wat dan gebeurt bij het verwerken:
$_POST['item'] zal een array zijn.
$_POST['item'][0] is de eerste, $_POST['item'][1] de tweede, ...

Je kan die dus in een foreach steken

<?php
...
foreach($_POST['item'] as $key=>$item) {
...
}
?>

- SanThe -

06-12-2013 16:30

Tabel? Je bedoelt in een database neem ik aan.
Met een foreach() kan je er doorheen lopen.
Eerst even met empty() kijken of het niet leeg is.

Toevoeging op 06/12/2013 16:33:16:

Doe eens print_r($_POST) dan zie je hoe het er uit ziet na het posten.

Reageren

Inloggen om te reageren