form action
Stel ik heb een formulier : zoek04.php dat er zo uit ziet:
echo "<form action='zoek05.php?' method='post'>";
echo "Zoeken op:<br>";
echo "Artikel Naam :<input type='text' name='naam'><br>";
echo "<input type='submit' name='submit' value='zoeken'>";
echo "</form>";
als ik in dit (simpele) formulier de knop zal aanklikken zal het resultaat worden weer gegeven in zoek05.php (action=zoek05.php). Ik wil nu als ik het text veld leeg laat en toch submit inklik NIET naar zoek05.php gaan..... weet iemand HOE?
Alvast bedankt.
Hi Ger, Dit is me nog niet helemaal duidelijk....
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// jouw formulier, nu zonder onnodige echo's; gebruik van " en <label>...
echo '
<form action="zoek05.php" method="post" onsubmit="checkInput(this.form); return false;">
<p>Zoeken op:</p>
<label for="naam">Artikel naam</label><input type="text" name="naam"><br>
<label for="submit" id="verzendknop">Verzenden</label><input type="submit" name="submit" value="zoeken">
</form>';
// het Javascript wat er voor zorgt dat het formulier niet wordt verzonden, tenzij de waarde van het zoekveld NIET leeg is.
echo '
<script>
function checkForm(f) {
if (f.elements["naam"].value != "")
{
f.submit();
}
</script>';
?>
// jouw formulier, nu zonder onnodige echo's; gebruik van " en <label>...
echo '
<form action="zoek05.php" method="post" onsubmit="checkInput(this.form); return false;">
<p>Zoeken op:</p>
<label for="naam">Artikel naam</label><input type="text" name="naam"><br>
<label for="submit" id="verzendknop">Verzenden</label><input type="submit" name="submit" value="zoeken">
</form>';
// het Javascript wat er voor zorgt dat het formulier niet wordt verzonden, tenzij de waarde van het zoekveld NIET leeg is.
echo '
<script>
function checkForm(f) {
if (f.elements["naam"].value != "")
{
f.submit();
}
</script>';
?>
Toevoeging op 05/09/2012 10:00:03:
Persoonlijk zou ik voor deze oplossing gaan, mocht je jQuery gebruiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
// hier staat vast wat code? Zo niet, kan dit hele PHP-blok weg
?>
<!-- jouw formulier, nu zonder onnodige echo's; gebruik van " en <label>...-->
<form action="zoek05.php" method="post">
<p>Zoeken op:</p>
<label for="naam">Artikel naam</label><input type="text" name="naam"><br>
<label for="submit">Verzenden</label><input type="submit" name="submit" value="zoeken">
</form>';
<!-- het Javascript wat er voor zorgt dat het formulier niet kan worden verzonden, als de waarde van het zoekveld leeg is.-->
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
<?php
// rest van code?
?>
// hier staat vast wat code? Zo niet, kan dit hele PHP-blok weg
?>
<!-- jouw formulier, nu zonder onnodige echo's; gebruik van " en <label>...-->
<form action="zoek05.php" method="post">
<p>Zoeken op:</p>
<label for="naam">Artikel naam</label><input type="text" name="naam"><br>
<label for="submit">Verzenden</label><input type="submit" name="submit" value="zoeken">
</form>';
<!-- het Javascript wat er voor zorgt dat het formulier niet kan worden verzonden, als de waarde van het zoekveld leeg is.-->
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
<?php
// rest van code?
?>
Gewijzigd op 05/09/2012 10:00:38 door Eddy E
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
function formcheck(form) {
return (form.elements['naam'].value != '');
// geeft terug: true => de input is ingevuld. True wordt teruggegeven aan onSubmit => submit wordt uitgevoerd
// false => niets ingevuld; (onSubmit = false) houdt het submitten tegen
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="submit" name="submit" value="zoeken">
</form>
function formcheck(form) {
return (form.elements['naam'].value != '');
// geeft terug: true => de input is ingevuld. True wordt teruggegeven aan onSubmit => submit wordt uitgevoerd
// false => niets ingevuld; (onSubmit = false) houdt het submitten tegen
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="submit" name="submit" value="zoeken">
</form>
Ongetwijfeld werken alle oplossingen die je hier ziet.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
session_start();
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
session_start();
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
</script>
<!-- jouw formulier, nu zonder onnodige echo's; gebruik van " en <label>...-->
<form action="zoek05.php" method="post">
<p>Zoeken op:</p>
<label for="naam">Artikel naam</label><input type="text" name="naam"><br>
<label for="submit">Verzenden</label><input type="submit" name="submit" value="zoeken">
</form>
<!-- het Javascript wat er voor zorgt dat het formulier niet kan worden verzonden, als de waarde van het zoekveld leeg is.-->
maar bij inklikken en leeg veld gaat het toch naar zoek05.php.....???
Ja, inderdaad. Bij dit soort dingen kan je beter controleren via het evenement 'onSubmit', en niet te veel focusen op de submit knop.
Toevoeging op 05/09/2012 10:17:01:
Dit is het werkelijke zoek formulier (inclusief radio buttons....) hoe moet het er dan uit zien?
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
/*<div id="zoek_outer">
<h1>Afhaaleten bestellen :</h1>
<table class="choices">
<form action="index.php" method="post">
<tr >
<td>
<input type="radio" name="radio_01" value="afhalen"/>Afhalen
<input type="radio" name="radio_01" value="bezorgen" />Bezorgen
</td>
</tr>
<tr><td style="color:#d90000; font-size:12px;">{$melding}</td></tr>
<tr>
<td><input type="text" name="gegevens_rest" value="Postcode, adres of naam?" size="50" class="clear-it"/></td>
</tr>
<tr>
<td><input type="submit" class="button_search" value="Zoeken" name="zoeken" /></td>
</tr>
</form>
</table>
</div>*/
?>
/*<div id="zoek_outer">
<h1>Afhaaleten bestellen :</h1>
<table class="choices">
<form action="index.php" method="post">
<tr >
<td>
<input type="radio" name="radio_01" value="afhalen"/>Afhalen
<input type="radio" name="radio_01" value="bezorgen" />Bezorgen
</td>
</tr>
<tr><td style="color:#d90000; font-size:12px;">{$melding}</td></tr>
<tr>
<td><input type="text" name="gegevens_rest" value="Postcode, adres of naam?" size="50" class="clear-it"/></td>
</tr>
<tr>
<td><input type="submit" class="button_search" value="Zoeken" name="zoeken" /></td>
</tr>
</form>
</table>
</div>*/
?>
Dan zet in de head van je document dit stukje javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
function checkInput(f) {
if (f.elements['naam'].value != '') {
return true;
}
else {
alert("A.u.b. uw naam invullen");
return false;
}
}
</script>
function checkInput(f) {
if (f.elements['naam'].value != '') {
return true;
}
else {
alert("A.u.b. uw naam invullen");
return false;
}
}
</script>
Dit zorgt ervoor dat het formulier niet verstuurd wordt, als de naam niet is ingevuld.
Overigens doe ik tegenwoordig ook met jQuery en AJAX.
Gewijzigd op 05/09/2012 10:20:04 door Ger van Steenderen
alvast bedankt...
Toevoeging op 05/09/2012 10:34:21:
PS. Als je jQuery gebruikt moet je natuurlijk wel jQuery.js toevoegen in je document ;-)
Toevoeging op 05/09/2012 11:14:32:
Ger krijg die van jou niet aan de praat.....
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkInput(f) {
if (f.elements['naam'].value != '') {
return true;
}
else {
alert("A.u.b. uw naam invullen");
return false;
}
}
</script>
</head>
<body>
<?php
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
<form name="aForm" action="zoek05.php" method="post" onsubmit="checkInput(this.form); return false;"">
Zoeken op:</br>
Artikel Naam :<input type="text" name="naam"></br>
<input type="submit" name="submit" value="zoeken">
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkInput(f) {
if (f.elements['naam'].value != '') {
return true;
}
else {
alert("A.u.b. uw naam invullen");
return false;
}
}
</script>
</head>
<body>
<?php
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
<form name="aForm" action="zoek05.php" method="post" onsubmit="checkInput(this.form); return false;"">
Zoeken op:</br>
Artikel Naam :<input type="text" name="naam"></br>
<input type="submit" name="submit" value="zoeken">
</form>
</body>
</html>
<form name="aForm" action="zoek05.php" onsubmit="return checkInput(this.form);">
mis hierin ook method="post"
Toevoeging op 05/09/2012 11:41:32:
Eigenlijk zou ik van onderstaand formulier een eenvoudige code willen weten als text leeg is of radio buttons niet "aangevinkt" er een melding lomt dat er iets vergeten is....
hoop dat iemand me kan helpen..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
session_start();
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
<script>
function formcheck(form) {
return (form.elements['naam'].value != '');
// geeft terug: true => de input is ingevuld. True wordt teruggegeven aan onSubmit => submit wordt uitgevoerd
// false => niets ingevuld; (onSubmit = false) houdt het submitten tegen
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="radio" name="radio_01" value="af"/>Af
<input type="radio" name="radio_01" value="op" />Op
<input type="submit" name="submit" value="zoeken">
</form>
session_start();
include ("../../controller/include/config.php");
include ("../../controller/include/connect.php");
?>
<script>
function formcheck(form) {
return (form.elements['naam'].value != '');
// geeft terug: true => de input is ingevuld. True wordt teruggegeven aan onSubmit => submit wordt uitgevoerd
// false => niets ingevuld; (onSubmit = false) houdt het submitten tegen
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="radio" name="radio_01" value="af"/>Af
<input type="radio" name="radio_01" value="op" />Op
<input type="submit" name="submit" value="zoeken">
</form>
Nee, want de knop is toch gedisabled....? Heb je wel je jQuery erin?
Zie http://jsfiddle.net/nKBHE/1/
Gewijzigd op 05/09/2012 14:37:22 door Eddy E
Hi Eddy, zou je het ook eens kunnen laten zien met radio buttons?
Waarom vraag je daar gelijk niet naar?
En wat let je om op jsFiddle zelf iets te proberen?
verder had ik het al gevraagd, op het later moment en toen werd de vraag onduidelijk en toen had ik opnieuw een topic aan gemaakt en toen werd ozzie boos en in de nieuwe topic staat eigenlijk precies mijn vraag... snappie
Maar goed: wat is de html-code van je radio-dingen?
Liefst gooi je het even op jsfiddle: hoe werkt dat?
1) Ga naar jsFiddle.com
2) Type in de diverse vakken de code (je kan ook de mijne 'forken')
3) Druk op RUN: werkt het zoals je wilt of kan je niet verder:
4) Druk op SAVE: de URL verandert... kopieer die en plak die hier.
Ik ben nog eenmaal eigenwijs en geef je hierbij wat ik heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function formcheck(form) {
return (form.elements['naam'].value != '');
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="radio" name="radio_01" value="af"/>Af
<input type="radio" name="radio_01" value="op" />Op
<input type="submit" name="submit" value="zoeken">
</form>
function formcheck(form) {
return (form.elements['naam'].value != '');
}
</script>
<form action="zoek05.php?" method="post" onsubmit="return formcheck(this);">
Zoeken op:<br>
Artikel Naam :<input type="text" name="naam"><br>
<input type="radio" name="radio_01" value="af"/>Af
<input type="radio" name="radio_01" value="op" />Op
<input type="submit" name="submit" value="zoeken">
</form>
dit script en html staat in zoek04.php :
Als ik het text veld leeg laat het klik op zoeken gebeurt er niets. De radio buttons werken niet, ik bedoel of je ze nu gebruikt of niet het heeft geen functie. Dit zou ik net als bij het text veld ook willen; Dus leeg text veld of geen radio button mag er niets gebeuren wel zou ik dan een melding willen met dat er niets is ingevuld en/of geen radio button geselecteerd.
Hoop dat je me hiermee wilt helpen,
met vriendelijke groet, David