Formulier input's tellen en weergeven

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

03/12/2013 20:28:40
Quote Anchor link
Ik heb het volgende script:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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?
 
PHP hulp

PHP hulp

01/11/2024 01:03:24
 
- SanThe -

- SanThe -

04/12/2013 00:23:45
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>';
    }
    else
    {
        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>
 

04/12/2013 07:19:37
Quote Anchor link
Woow, bedankt SanThe! Werkt perfect!

Toevoeging op 04/12/2013 09:14:08:

Is er nu ook een makkelijke manier om alles in 1x in de tabel te zetten?

Momenteel is dit de query om de titel, talen etc. neer te zetten:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
$id = rand(0,50000);
$titel = mysql_real_escape_string($_POST['titel']);
$taal_1 = mysql_real_escape_string($_POST['t1']);
$taal_2 = mysql_real_escape_string($_POST['t2']);
$leerj = mysql_real_escape_string($_POST['jaar']);
$vak = mysql_real_escape_string($_POST['vak']);
mysql_query("INSERT INTO woorden_lijsten(lijst_id,klas,gebruiker,titel,taal_1,taal_2,vak,leerjaar,inhoud_1,inhoud_2,first) VALUES ('$id','$klas','$user','$titel','$taal_1','$taal_2','$vak','$leerj','','','1')")or die(mysql_error());
?>


Toevoeging op 04/12/2013 09:30:51:

En nog een ding: Zodra ik extra rijen wil toevoegen worden de oude rijen verwijderd. Hoe blijven deze staan?
 
- SanThe -

- SanThe -

04/12/2013 11:03:52
Quote Anchor link
Welke oude?

Toevoeging op 04/12/2013 12:23:07:

Zo is ie iets gebruiksvriendelijker:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
 

04/12/2013 16:17:53
Quote Anchor link
Ik bedoel dat zodra je op het knopje met Meer velden drukt de waardes uit de oude velden weggaan.
 

05/12/2013 16:42:29
Quote Anchor link
Ik Bump dit topic even omhoog.
 
- SanThe -

- SanThe -

05/12/2013 18:25:46
Quote Anchor link
De velden blijven ingevuld.
Echter ik krijg hier niet meer dan 194 rijen.
Geen foutmelding en eigenlijk ook geen idee waarom dat niet hoger gaat.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form method="post" name="form">
    <table>
        <div id="row0">
        </div>
    </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)
    {
        getid    = 'row'+fields;
        fields += 1;
        putid    = 'row'+fields;
        if(fields < 10)            nummer = '00'+fields;
        else if(fields < 100)    nummer = '0'+fields;
        else                     nummer = fields;
        document.getElementById(getid).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></div><div id="'+putid+'">';
        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>
Gewijzigd op 05/12/2013 18:26:19 door - SanThe -
 

05/12/2013 22:32:58
Quote Anchor link
Bij mij worden de velden toch echt leeg...
Ik heb het even opgenomen.

https://www.youtube.com/watch?v=06VU-zMfvKA
 
- SanThe -

- SanThe -

05/12/2013 22:35:37
Quote Anchor link
Je hebt wel het hele script overgenomen.
Bij mij werkt ie gewoon.
 

05/12/2013 22:53:41
Quote Anchor link
Dat is best vreemd... Hoe kan dat komen?
 
- SanThe -

- SanThe -

06/12/2013 00:36:28
Quote Anchor link
Laat het script eens zien.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

06/12/2013 09:27:55
Quote Anchor link
Frank Martens op 05/12/2013 22:53:41:
Dat is best vreemd... Hoe kan dat komen?


Dan zullen jullie verschillende browers gebruiken.
 

06/12/2013 15:08:07
Quote Anchor link
Aan de scripts ligt het niet, ik heb die van jou letterlijk gekopieerd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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 -

- SanThe -

06/12/2013 15:28:25
Quote Anchor link
Dit is niet het laatste script.
 
Kris Peeters

Kris Peeters

06/12/2013 15:34:18
Quote Anchor link
Ik heb een bacup / restore toegevoegd.

Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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>&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, 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);
Gewijzigd op 06/12/2013 15:35:02 door Kris Peeters
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

06/12/2013 15:47:02
Quote Anchor link
Verander regel 19 in de volgende regels:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
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);

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
element.innerHTML += 'blablabla';

is verkort voor:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
element.innerHTML = element.innerHTML + 'blablabla';

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

06/12/2013 16:08:14
Quote Anchor link
@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

Kris Peeters

06/12/2013 16:21:57
Quote Anchor link
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
 

06/12/2013 16:23:09
Quote Anchor link
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

Kris Peeters

06/12/2013 16:29:09
Quote Anchor link
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
...
foreach($_POST['item'] as $key=>$item) {
  ...
}
?>
 
- SanThe -

- SanThe -

06/12/2013 16:30:52
Quote Anchor link
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.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.