Frågan#1
Hej,
jag är ny inom PHP men har relativt bra koll på html och css. Försöker nu utveckla ett quiz, där en fråga är given och användaren endast ska skriva in / kryssa för svarsalternativ. Användarens svar/resultat ska sedan skickas in till en server/liknande.
Jag har kollat på denna sida:
http://prodermbjuderpasolskydd.se/tavla.php och det är ungefär detta jag vill ha.
Deras kod ser ut såhär:
<form name="tavla" id="tavla" method="post" action="insert.php">
<table cellpadding="5" style="margin-top:10px;">
<tr>
<td id="formtxt">Svar</td>
<td><input type="text" name="answer" id="submitData2" class="answer" style="margin-left:16px;"></td>
<td><div id="answerError">« Svaret är för kort</div></td>
</tr>
</tr>
</table>
<div id="spacer"> </div>
<table cellpadding="5">
<tr>
<td id="formtxt">Namn</td>
<td><input type="text" name="name" id="submitData" class="name" value=""></td>
<td> <div id="nameError">« Namnet är för kort</div> </td>
</tr>
<tr>
<td id="formtxt">E-mail</td>
<td><input type="text" name="email" id="submitData" class="email" value=""></td>
<td> <div id="emailError">« Felaktig e-mailadress</div> </td>
</tr>
<tr>
<td id="formtxt">Ort</td>
<td><input type="text" name="district" id="submitData" class="district" value=""></td>
<td> <div id="districtError">« Bostadsorten finns inte</div> </td>
</tr>
<input type="hidden" name="ip" id="ip" value="213.80.64.10" />
<input type="hidden" name="date" id="date" value="11-02-21" />
<input type="hidden" name="detailedDate" id="detailedDate" value="2011-02-21 14:12:43" />
</table>
<div id="showdiv">
<div id="licenseError">Du måste godkänna tävlingsreglerna för att tävla</div>
<br />
<label><input type="checkbox" name="license" id="license" class="license" value="Yes" checked="checked"':'').' /> Jag godkänner</label> <a onClick="showWit();" style="cursor:pointer;">tävlingsreglerna</a>
<noscript><div style="width:250px; margin-top:10px; font-size:11px; font-style:italic">Javascript måste aktiveras i din webbläsare för du ska kunna ta del av Proderms tävlingsregler</div></noscript>
<div id="show">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<input type="image" src="./gfx/submit.png" name="Submit" style="margin-top:15px; margin-left:67px;">
</form>
Och scriptet dom använder sig av ser ut såhär:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// validating input name
$(document).ready(function(){
$("#tavla").submit(function(e){
var doSubmit = true;
$(".name").each(function(){
// changes correct fields to the style below.
$(this).css({border: 'solid 1px #95b00f'});
$(this).css({background: '#d3ffb3'});
$(this).css({color: '#1c4200'});
document.getElementById("nameError").style.display = "none";
// checking if the field is empty
if( $(this).val() == '' || $(this).val().length < 3 ){
doSubmit = false;
// changes incorrect fields to the style below.
$(this).css({border: 'solid 1px #b00f0f'});
$(this).css({background: '#fbb8b8'});
$(this).css({color: '#5c0000'});
document.getElementById("nameError").style.display = "block";
}
});
// send form if all values correct
if( doSubmit ) return true;
// stop otherwise
e.preventDefault();
return false;
});
});
// validating input answer
$(document).ready(function(){
$("#tavla").submit(function(e){
var doSubmit = true;
$(".answer").each(function(){
// changes correct fields to the style below.
$(this).css({border: 'solid 1px #95b00f'});
$(this).css({background: '#d3ffb3'});
$(this).css({color: '#1c4200'});
document.getElementById("answerError").style.display = "none";
// checking if the field is empty
if( $(this).val() == '' || $(this).val().length < 5 ){
doSubmit = false;
// changes incorrect fields to the style below.
$(this).css({border: 'solid 1px #b00f0f'});
$(this).css({background: '#fbb8b8'});
$(this).css({color: '#5c0000'});
document.getElementById("answerError").style.display = "block";
}
});
// send form if all values correct
if( doSubmit ) return true;
// stop otherwise
e.preventDefault();
return false;
});
});
$(document).ready(function(){
$("#tavla").submit(function(e){
var doSubmit = true;
$(".email").each(function(){
// changes correct fields to the style below.
$(this).css({border: 'solid 1px #95b00f'});
$(this).css({background: '#d3ffb3'});
$(this).css({color: '#1c4200'});
document.getElementById("emailError").style.display = "none";
// validating user email
var x=document.forms["tavla"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
doSubmit = false;
// changes incorrect fields to the style below.
$(this).css({border: 'solid 1px #b00f0f'});
$(this).css({background: '#fbb8b8'});
$(this).css({color: '#5c0000'});
document.getElementById("emailError").style.display = "block";
}
});
// send form if all values correct
if( doSubmit ) return true;
// stop otherwise
e.preventDefault();
return false;
});
});
// validating input district
$(document).ready(function(){
$("#tavla").submit(function(e){
var doSubmit = true;
$(".district").each(function(){
// changes correct fields to the style below.
$(this).css({border: 'solid 1px #95b00f'});
$(this).css({background: '#d3ffb3'});
$(this).css({color: '#1c4200'});
document.getElementById("districtError").style.display = "none";
// checking if the field is empty
if( $(this).val() == '' || $(this).val().length < 2 ){
doSubmit = false;
// changes incorrect fields to the style below.
$(this).css({border: 'solid 1px #b00f0f'});
$(this).css({background: '#fbb8b8'});
$(this).css({color: '#5c0000'});
document.getElementById("districtError").style.display = "block";
}
});
// send form if all values correct
if( doSubmit ) return true;
// stop otherwise
e.preventDefault();
return false;
});
});
// validating license agreed
$(document).ready(function(){
$("#tavla").submit(function(e){
var doSubmit = true;
$(".license").each(function(){
// checking if the field is empty
if(!document.tavla.license.checked) {
doSubmit = false;
document.getElementById("licenseError").style.display = "block";
}
});
// send form if all values correct
if( doSubmit ) return true;
// stop otherwise
e.preventDefault();
return false;
});
});
function showWit() {
if (document.getElementById("show").style.display == "none") {
document.getElementById("show").style.display = "block";
} else {
document.getElementById("show").style.display = "none";
}
}
</script>
Vad är det jag måste ändra och hur ska "insert.php" filen se ut som jag ska ladda upp till min server?
Exemplet jag visade ovan funkar så att ägaren får en länk till en excel fil som laddas ner, där namn, mail och svar visas.
Otroligt tacksam för hjälp!