Steeds nieuwe velden
Ik wil graag een formulieren maker maken, is niet al te moeilijk. Maar ik wil dat als je aan het einde van je aantal velden zit dat je bij het drukken op "tab" (Voor het volgende veld) dat je dan 1 veld extra er bij krijgt indien er geen meer zijn. Eigenlijk het idee als bij WRTS. Ik wil dat graag, maar weet niet op wat ik moet googelen. Wie kan mij helpen? Alvast bedankt!
Code (php)
1
2
3
4
2
3
4
<form>
<input type="text" name="veld[]">
<input type="text" name="veld[]">
</form>
<input type="text" name="veld[]">
<input type="text" name="veld[]">
</form>
En dan middels Javascript, in dit geval jQuery zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
(function()
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();
Gewijzigd op 19/04/2013 21:45:10 door Roy -
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript" src="newline.js"></script>
<!--script type="text/javascript">
(function()
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();</script>-->
<title>JS_TEST</title>
</head>
<body>
<form method="POST">
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="submit">
</form>
</body>
</html>
<html>
<head>
<script type="text/JavaScript" src="newline.js"></script>
<!--script type="text/javascript">
(function()
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();</script>-->
<title>JS_TEST</title>
</head>
<body>
<form method="POST">
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="text" name="<?php echo $veld[]; ?>"><br>
<input type="submit">
</form>
</body>
</html>
Quote:
er uit sloop.<!--script type="text/javascript">
(function()
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();</script>-->
(function()
{
$('input:last').keyup(function(e)
{
if( e.which == 9 )
{
$(this).parent().append('<input type="text" name="veld[]">');
}
});
}();</script>-->
Toevoeging op 20/04/2013 11:04:52:
Nog wat handige informatie voor jullie, als het nodig is.
Quote:
Request URL:http://127.0.0.1/js_1/newline.js
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utma=96992031.939695083.1361767467.1361767467.1361992939.2; __utmz=96992031.1361767467.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:127.0.0.1
If-Modified-Since:Sat, 20 Apr 2013 08:44:36 GMT
If-None-Match:"c8-4dac6d8776b19"
Referer:http://127.0.0.1/js_1/
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Response Headersview source
Connection:Keep-Alive
Date:Sat, 20 Apr 2013 09:01:20 GMT
ETag:"c8-4dac6d8776b19"
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.2 (Win32) OpenSSL/1.0.1c PHP/5.4.4
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utma=96992031.939695083.1361767467.1361767467.1361992939.2; __utmz=96992031.1361767467.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:127.0.0.1
If-Modified-Since:Sat, 20 Apr 2013 08:44:36 GMT
If-None-Match:"c8-4dac6d8776b19"
Referer:http://127.0.0.1/js_1/
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Response Headersview source
Connection:Keep-Alive
Date:Sat, 20 Apr 2013 09:01:20 GMT
ETag:"c8-4dac6d8776b19"
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.2 (Win32) OpenSSL/1.0.1c PHP/5.4.4
Waarom de <!-- en --> ??
Wat zit er in newline.js?
quote="Roy - op 19/04/2013 21:43:55"]
En dan middels Javascript, in dit geval jQuery zoiets:
[/quote]
Je include ook ergens in je code een link naar jQuery?
Niet dat ik er veel verstand van heb, maar dit viel me op.
- op regel 6 staat geen dollarteken
- op regel 15 staan (), moet dat niet ) zijn
- op regel 15 staat </script>--> , klopt dat?
Groet Pieter
In newline zit die code die was gegeven
@Pieter
Ik ga dat eventjes proberen
Toevoeging op 20/04/2013 11:46:03:
@Pieter
Nog steeds geen effect. Ik heb echter geen foutcodes meer
Gewijzigd op 20/04/2013 11:48:12 door Koen Hollander
Toevoeging op 20/04/2013 12:44:28:
Ook helemaal niks. Ik vind dit echt raar worden
Code (php)
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
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
<html>
<head>
<title>Extra velden</title>
<!--- Jquery inladen doen we zo --->
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--- Wat css --->
<style>
.button:hover {
text-decoration: underline;
color: blue;
}
.button:active {
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<h1> Voeg 3 velden toe! </h1>
<form type="post" id="input">
<input type="text" name="veld[]"><br>
<input type="text" name="veld[]"><br>
<input type="text" name="veld[]"><br>
</form>
<div class="button" name="add" id="add">Klik hier voor 3 extra veld!</div>
<!--- Net voor de sluitingstag van body plaatsen we de javascript. --->
<script>
$("#add").click(function () {
$("#input").append('<input type="text" name="veld[]"> <br><input type="text" name="veld[]"> <br><input type="text" name="veld[]"> <br>');
});
</script>
</body>
</html>
<head>
<title>Extra velden</title>
<!--- Jquery inladen doen we zo --->
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--- Wat css --->
<style>
.button:hover {
text-decoration: underline;
color: blue;
}
.button:active {
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<h1> Voeg 3 velden toe! </h1>
<form type="post" id="input">
<input type="text" name="veld[]"><br>
<input type="text" name="veld[]"><br>
<input type="text" name="veld[]"><br>
</form>
<div class="button" name="add" id="add">Klik hier voor 3 extra veld!</div>
<!--- Net voor de sluitingstag van body plaatsen we de javascript. --->
<script>
$("#add").click(function () {
$("#input").append('<input type="text" name="veld[]"> <br><input type="text" name="veld[]"> <br><input type="text" name="veld[]"> <br>');
});
</script>
</body>
</html>
Obelix en Idefix op 20/04/2013 11:08:09:
Je include ook ergens in je code een link naar jQuery?
Obelix en Idefix op 20/04/2013 14:40:36:
Ja. bovenaan
Obelix en Idefix op 20/04/2013 11:08:09:
Je include ook ergens in je code een link naar jQuery?
Ja. bovenaan