ik heb een probleem met een twee Radiobuttons in een formulier. Ik wil graag dat op de redirect pagina, de score uitslag verschijnt van de gekozen antwoorden. De originele functie werkt met een PHP POST (bron: http://css-tricks.com/building-a-simple-quiz/) maar in combinatie met mijn javascript bestand, krijg ik het niet werkend..
Heeft iemand een oplossing hierop?
Bedankt voor de moeite..
FORMULIER
<form id="ContactForm" action="">
<section class="st-panel" id="st-panel-2">
<div class="st-deco"></div>
<h2>Toelichting:<br />Neem plaats op de eerste tegel en wek energie op. Zodra de vraag op het scherm verschijnt, kiest u één van de vier volgende antwoorden.</h2>
<div class="sizer">
<label class="label_radio" for="vraag1_A"><input name="vraag1_antwoorden" id="vraag1_A" value="A" type="radio" />A) Geen eis</label>
<label class="label_radio" for="vraag1_B"><input name="vraag1_antwoorden" id="vraag1_B" value="B" type="radio" />B) 0,1 Ohm</label>
<label class="label_radio" for="vraag1_C"><input name="vraag1_antwoorden" id="vraag1_C" value="C" type="radio" />C) 1 Ohm</label>
<label class="label_radio" for="vraag1_D"><input name="vraag1_antwoorden" id="vraag1_D" value="D" type="radio" />D) 10 Ohm</label>
</div>
<span id="vraag1_antwoorden" class="foutmelding_antwoorden" style="display:none;"></span>
</section>
<input type="button" class="button_verzenden black" id="send" value="VERSTUUR" /><input type="hidden" id="newcontact" name="newcontact" value="1"></input></form>
JAVASCRIPT VOOR VERZENDEN MAIL, DATABASE TOEVOEGING
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError,.foutmelding_antwoorden',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#midden').remove();
window.location = "result.php"
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='') {
var elm = $("#"+data.errors[i].name);
// we gaan kijken welk soort element elm is.
// wanneer dat element een span is, moeten we geen nieuwe span meer aanmaken...
switch (elm[0].tagName.toLowerCase()) {
case 'span':
elm.html(data.errors[i].value).fadeIn();
break;
default:
elm.next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
break;
}
}
$("#"+data.errors[i].name).next().html('<span class="foutmelding_antwoorden">'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
De javascript moet in het resultaat van je ajax call. Alleen als de data naar de server is gestuurd, het succesvol is gegaan en je de succesdiv wil tonen haal je de gegevens uit het form en plaats je het in de div.
Geen javascript in je HTML. Niet nodig en gaat waarschijnlijk nog verkeerd ook.
Als ik het goed begrijp is dit het deel van je script na een succesvolle server call:
if(data.result == '1'){
//show success message
$('#midden').remove();
window.location = "result.php"
var tekst = $('input[name=vraag1_antwoorden]').val();
}
De eerste regel snap ik. De tweede al niet meer.... Daar redirect je de gebruiker namelijk mee naar een andere locatie. Dan heeft dat hele succes div gebeuren niet zoveel zin meer.
De derde regel klopt dan wel weer, alleen daarna zou de andere regel moeten komen, waarin je tekst in de span propt. Vervolgens nog de div tonen en het zou moeten kunnen lukken.
Ja, die regel moet natuurlijk nog in dat stuk, anders heeft tekst geen waarde:
if(data.result == '1'){
//show success message
$('#midden').remove();
var tekst = $('input[name=vraag1_antwoorden]').val();
$('#succes_div span').html(tekst);
//ook nog nodig om het echt te tonen?
$('#succes_div').show()
}
//of korter, maar niet per se duidelijker:
if(data.result == '1'){
//show success message
$('#midden').remove();
$('#succes_div span').html($('input[name=vraag1_antwoorden]').val());
$('#succes_div').show()
}
de eerste stap is overwonnen, ik zie data verschijnen.
Alleen het probleem is dat hij de hele tijd antwoord: A laat zien ipv andere antwoord mogelijkheden.
if(data.result == '1'){
//show success message
$('#midden').remove();
var tekst = $('input[name=vraag1_antwoorden]').val();
$('#succes_div span').html(tekst);
//ook nog nodig om het echt te tonen?
$('#succes_div').show()
}
Is het niet makkelijker dat je vraag en antwoord in een database zet? En dan met een while loop de antwoorden ophaald die aan de vraag_id gekoppeld zijn?
Zo kun je ook makkelijker de resulaten opslaan en opvragen van de deelnemers.
Ik ben daar niet zo bekend mee en ik zou het graag in deze situatie willen oplossen. Zie jij een oplossing op bovenstaande post waarin alleen antwoord: A uitgelezen wordt?
Ik denk dat ik iets was vergeten toe te voegen :-)
$('input[name=vraag1_antwoorden]:checked').val()
Zo haal je de checked radio op binnen de groep met radio buttons die dezelfde naam hebben.
...als ik het goed heb, want met deze dingen loop ik altijd te klooien :-)
Probeer het eens.
Anyway, dit werkt ja, top! Alleen mijn vraag is nu of je daar kan aangeven wat je score is zeg maar op basis van een berekening.
Dus bijvoorbeeld:
U koos voor vraag 1 antwoord: C
U koos voor vraag 2 antwoord: B
(Hier komt dan de score berekening)
Alle antwoorden fout = U heeft score ROOD
1 antwoord goed = U heeft score GEEL
2 antwoorden goed = U heeft score GROEN
Waar zou dat vermeld moeten worden?
Antwoorden HTML
<div id="succes_A_div">U koos voor antwoord: <span><span></div><br />
<div id="succes_B_div">U koos voor antwoord: <span><span></div>
JAVASCRIPT
if(data.result == '1'){
//show success message
$('#midden').remove();
var tekst = $('input[name=vraag1_antwoorden]:checked').val();
$('#succes_A_div span').html(tekst);
var tekst = $('input[name=vraag2_antwoorden]:checked').val();
$('#succes_B_div span').html(tekst);
//ook nog nodig om het echt te tonen?
$('#succes_A_div').show() $('#succes_B_div').show()
}
