Just nu i M3-nätverket
Gå till innehåll
adib_bin

Hjälp/Tips på PHP formulär [LÖST]

Rekommendera Poster

Postad (redigerade)

Har gjort ett beställningsformulär. Den innehåller flera sidor men jag vill att den inte ska få skicka vidare innan man har fyllt i alla. Om man inte har fyllt i allt så ska det stå att man ska fylla i. Typ en en div ruta bredvid varje "input type".

Så undrar hur jag ska fixa det på ett effektivt sätt.

 

Just nu har jag så här:

<?php
/* VARIABLAR */

$fN = $_POST["firstName"];
$lN = $_POST["lastName"];
$eMail =$_POST["eMail"];
$tfnNr = $_POST["tfnNr"];


if($fN == "" && $lN == "" && $eMail == "" && $tfnNr == ""){
?>
   <form method="post" action="bestallning2.php">
   <div id="nameWrapper">
       <div class="hej">
           <h5>Förnamn:</h5>
           <input name="firstName" style="width:120px;" type="text" />
       </div>    

       <div class="hej">
           <h5>Efternamn:</h5>
           <input name="lastName" style="width:120px;" type="text" />
       </div>
   </div>
   <h5>E-Mail:</h5>
   <input name="eMail" style="width:260px;" type="text" />

   <h5>Telefonnr</h5>
   <input name="tfnNr" type="text" />
   <br /><br />
   <input type="submit" style="width:75px;" value="Nästa"/>
   </form>
<?php 
}
?>
</body>
</html>

och så här:

<?php/* VARIABLAR */

$fN = $_POST["firstName"];
$lN = $_POST["lastName"];
$eMail =$_POST["eMail"];
$tfnNr = $_POST["tfnNr"];


if($fN == "" || $lN == "" || $eMail == "" || $tfnNr == ""){
?>
   <form method="post" action="bestallning2.php">
   <h4>Fyll I alla Uppgifer</h4>
   <div id="nameWrapper">
       <div class="hej">
           <h5>Förnamn:</h5>
           <input name="firstName" style="width:120px;" type="text" />
       </div>    

       <div class="hej">
           <h5>Efternamn:</h5>
           <input name="lastName" style="width:120px;" type="text" />
       </div>
   </div>
   <h5>E-Mail:</h5>
   <input name="eMail" style="width:260px;" type="text" />

   <h5>Telefonnr</h5>
   <input name="tfnNr" type="text" />
   <br /><br />
   <input type="submit" style="width:75px;" value="Nästa"/>
   </form>
<?php 
}else{
?>
<form method="post" action="bestallning3.php">
   <h5>Typ av hår som önska:</h5>

   <input type="radio" name="hairType" value="Rakt" id="Rakt" />
   <label for="Rakt">Rakt</label>

   <input type="radio" name="hairType" value="Vågigt" id="Vågigt" />
   <label for="Vågigt">Vågigt</label>

   <input type="radio" name="hairType" value="Lockigt" id="Lockigt" />
   <label for="Lockigt">Lockigt</label>

   <h5>Önskad Längd:</h5>
   <input name="hariLenght" type="text" />

   <h5>Kvantitet</h5>
   <input name="kvantitet" type="text" />
   <br /><br />
   <input type="button" value="Tillbaka" style="width:75px;" onclick="history.go(-1);return false;">
   <input type="submit" style="width:75px;" value="Nästa"/>    
   </form>
<?php 
}
?>

</body>

</html>

Redigerad av adib_bin
code-taggar tillagda av moderator

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

Blir till att koda lite java skulle jag tro.

Du avser javascript, det är väldigt stor skillnad på java och javaskript. :)

 

Jag har massa formulär hit å dit i html5 på G just nu å använder mig av dubbelkoll genom att lägga in required i html:en och en enkel if-sats i php:n. required är nytt för html5 och stöds inte än av alla browsrar, som vanligt så är det IE, som skiter glatt i å lyda! Men den är supertjusig där den funkar iallafall. PROVA den!

 

<!DOCTYPE HTML>
<html>
<body>

<form action="form.php" method="post">
Name: <input type="text" name="user" required>
<input type="submit">
</form>

</body>
</html>

 

Eftersom alla inte har stöd för javascript påslaget heller, så går det lika lite att lita på js, som på ett html5-element.

if-satsen för ditt första formulär skulle kunna se ut såhär t.ex, observera att jag bytt ut alla dina &&(AND) till ||(OR).

 

<?php
/* VARIABLAR */

$fN = $_POST["firstName"];
$lN = $_POST["lastName"];
$eMail =$_POST["eMail"];
$tfnNr = $_POST["tfnNr"];


if($fN == "" || $lN == "" || $eMail == "" || $tfnNr == "")
{
?>
<!--action går tillbaka till sig själv om allt inte är ifyllt-->
 <form method="post" action="">
 <div id="nameWrapper">
 <div class="hej">
 <h5>Förnamn:</h5>
 <input name="firstName" style="width:120px;" type="text" />
 </div> 

 <div class="hej">
 <h5>Efternamn:</h5>
 <input name="lastName" style="width:120px;" type="text" />
 </div>
 </div>
 <h5>E-Mail:</h5>
 <input name="eMail" style="width:260px;" type="text" />

 <h5>Telefonnr</h5>
 <input name="tfnNr" type="text" />
 <br /><br />
 <input type="submit" style="width:75px;" value="Nästa"/>
 </form>
<?php 
}
else
{
?>
 <form method="post" action="bestallning2.php">
 <div id="nameWrapper">
 <div class="hej">
 <h5>Förnamn:</h5>
 <input name="firstName" style="width:120px;" type="text" />
 </div> 

 <div class="hej">
 <h5>Efternamn:</h5>
 <input name="lastName" style="width:120px;" type="text" />
 </div>
 </div>
 <h5>E-Mail:</h5>
 <input name="eMail" style="width:260px;" type="text" />

 <h5>Telefonnr</h5>
 <input name="tfnNr" type="text" />
 <br /><br />
 <input type="submit" style="width:75px;" value="Nästa"/>
 </form>
<?php
}
?>
</body>
</html>

 

 

Cherrypie!

// Peetra. [edit, la till en kommentar i html:en]

Redigerad av Peetra

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du avser javascript, det är väldigt stor skillnad på java och javaskript. :)

 

Jag har massa formulär hit å dit i html5 på G just nu å använder mig av dubbelkoll genom att lägga in required i html:en och en enkel if-sats i php:n. required är nytt för html5 och stöds inte än av alla browsrar, som vanligt så är det IE, som skiter glatt i å lyda! Men den är supertjusig där den funkar iallafall. PROVA den!

 

<!DOCTYPE HTML>
<html>
<body>

<form action="form.php" method="post">
Name: <input type="text" name="user" required>
<input type="submit">
</form>

</body>
</html>

 

Eftersom alla inte har stöd för javascript påslaget heller, så går det lika lite att lita på js, som på ett html5-element.

if-satsen för ditt första formulär skulle kunna se ut såhär t.ex, observera att jag bytt ut alla dina &&(AND) till ||(OR).

 

<?php
/* VARIABLAR */

$fN = $_POST["firstName"];
$lN = $_POST["lastName"];
$eMail =$_POST["eMail"];
$tfnNr = $_POST["tfnNr"];


if($fN == "" || $lN == "" || $eMail == "" || $tfnNr == "")
{
?>
<!--action går tillbaka till sig själv om allt inte är ifyllt-->
 <form method="post" action="">
 <div id="nameWrapper">
 <div class="hej">
 <h5>Förnamn:</h5>
 <input name="firstName" style="width:120px;" type="text" />
 </div> 

 <div class="hej">
 <h5>Efternamn:</h5>
 <input name="lastName" style="width:120px;" type="text" />
 </div>
 </div>
 <h5>E-Mail:</h5>
 <input name="eMail" style="width:260px;" type="text" />

 <h5>Telefonnr</h5>
 <input name="tfnNr" type="text" />
 <br /><br />
 <input type="submit" style="width:75px;" value="Nästa"/>
 </form>
<?php 
}
else
{
?>
 <form method="post" action="bestallning2.php">
 <div id="nameWrapper">
 <div class="hej">
 <h5>Förnamn:</h5>
 <input name="firstName" style="width:120px;" type="text" />
 </div> 

 <div class="hej">
 <h5>Efternamn:</h5>
 <input name="lastName" style="width:120px;" type="text" />
 </div>
 </div>
 <h5>E-Mail:</h5>
 <input name="eMail" style="width:260px;" type="text" />

 <h5>Telefonnr</h5>
 <input name="tfnNr" type="text" />
 <br /><br />
 <input type="submit" style="width:75px;" value="Nästa"/>
 </form>
<?php
}
?>
</body>
</html>

 

 

Cherrypie!

// Peetra. [edit, la till en kommentar i html:en]

 

Finns det någon bra sida att lära sig att göra det med html5? =) Länka gärna, ska kika lite på de. Men vill gärna att det funkar till alla webbläsare. Och problemet med javascript är att jag inte vill använda alert rutan, det är så himla fult. Vill hellre att det ska ploppa upp en div ruta som jag har gjort innan.

 

Och går det att göra att så att det man har fyllt i följer med. Tex om jag fyller i förnamn men inte efternamn så visas exakt samma hemsida(samma fil) igen med förnamn ifyllt och så dyker t.ex en div-ruta upp i top som står att att man fylla i alla rutor.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Finns det någon bra sida att lära sig att göra det med html5? =) Länka gärna, ska kika lite på de. Men vill gärna att det funkar till alla webbläsare. Och problemet med javascript är att jag inte vill använda alert rutan, det är så himla fult. Vill hellre att det ska ploppa upp en div ruta som jag har gjort innan.

 

Och går det att göra att så att det man har fyllt i följer med. Tex om jag fyller i förnamn men inte efternamn så visas exakt samma hemsida(samma fil) igen med förnamn ifyllt och så dyker t.ex en div-ruta upp i top som står att att man fylla i alla rutor.

 

Du kan använda javascript för att ändra element. fulkodar lite snabbt:

<div id="err" style="display:none"></div>
<script>
// massa kod här

//test failed
e = document.getElementById('err');
e.innerHTML = "<b>Du har glömt fylla i x</b>";
e.style.display = "block";

//mer kod
</script>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du kan använda javascript för att ändra element. fulkodar lite snabbt:

<div id="err" style="display:none"></div>
<script>
// massa kod här

//test failed
e = document.getElementById('err');
e.innerHTML = "<b>Du har glömt fylla i x</b>";
e.style.display = "block";

//mer kod
</script>

 

Tror inte jag förstår dig riktigt... Skulle du kunna utveckla koden lite?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Koden är redan fullständig förutom att meddelandet är olika beroende på vad som är fel.

 

Hur gjorde du den div-popupen innan, menar du?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<span id="err_fname" style="background:#fbb;display:none"></span><br>
Last name: <input type="text" name="lname">
<span id="err_lname" style="background:#fbb;display:none"></span><br>
<input type="submit" value="Submit">

</form>

<script>
function validateForm()
{
var res = true;
var el, elms = document.forms["myForm"].elements;
for(var i = 0; i<elms.length; i++)
{
	el = elms[i];
	if (el.type=="text" && el.value==null || el.value=="")
	{
		e = document.getElementById('err_' + el.name);
		e.innerHTML = "<b>Du har glömt fylla i "+el.name+"</b>";
		e.style.display = "inline";

		res = false;
	}
	else if (el.type=="text")
	{
		document.getElementById('err_' + el.name).style.display = "none";
	}
}
return res;
}
</script>

Redigerad av i3o6

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag hoppas att du fått till det nu, annars så snubblade jag över en lovande guide för validering av formulär i javascript. [...]

Föreslår användning av jquery och lämplig plugin istället.

Se t.ex: http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

 

http://www.google.com/search?q=jquery+form+validation

 

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

 

Asschysst, du vet jag vad jag hur jag ska gå till väga typ. Tack för all hjälp löser nog det här på egen hand när man får tid någon dag då! =)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...