Goedemorgen,

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){}
		});
	}  
};


RESULT PAGINA

<body>
    <div id="begin_framework">
    <strong>Quiz</strong><br /><br />Bedankt voor uw participatie, u kunt hieronder uw score vinden en uw certificaat uitprinten.
    
	<?php
                
        $answer1 = $_POST['vraag1_antwoorden'];
        $answer2 = $_POST['vraag2_antwoorden'];
        
        $totalCorrect = 0;
        
        if ($answer1 == "C") { $totalCorrect++; }
        if ($answer2 == "A") { $totalCorrect++; }
        
        echo "<div id='results'>$totalCorrect / 2 correct</div>";
                
    ?>

    </div>
</body>
wat probeer je nu eigenlijk te doen?
Wat gaat er niet goed?
Wat heb je al gedaan om het op te lossen?
Waar loop je vast?

Iets meer heldere info zou wel helpen.
Hee Erwin,

- Ik probeer mijn score uitslag te tonen op de result pagina

- Het formulier neemt de waarde niet mee naar de result pagina omdat er geen POST functie aan gekoppeld zit. Zodra ik dit doe, moet ik mijn button veranderen naar een submit knop, maar dan werkt mijn javascript niet meer die de data mailt en in een database plaatst..

- Ik heb al geprobeerd: Form action naar result.php en method:post > mailing en database plaatsing werkt niet meer;
- Submit knop verbergen achter de normale knop;
- PHP integreren in het javascript bestand, zonder enig succes.

- Dus mijn vraag is, hoe kan ik de score uitslag (POST FUNCTIE) in mijn javascript bestand hierboven meenemen?

Je kunt de gegevens toch gewoon POSTen naar result.php en daar een mail (advies: swiftmailer of phpmailer) versturen en gegevens invoeren in db? Zou dat niet met javascript doen.

Ten aanzien van je result code:
Waarom kopiëren van variabelen (regel 7+8)?
Je echo: gebruik ' zodat je in HTML " kunt gebruiken. Daarnaast horen variabelen buiten quotes.


Op dit moment hanteer ik onderstaande contact.php voor de afhandeling van de mail en database. Waarin zie je dan die POST functie staan zodat deze getoond wordt op result.php?



<?php
require_once("db.php");					/* Database Class */
require_once('utils/is_email.php');		/* Email Validation Script */

/* Handle Ajax Request */
if(isset($_POST['newcontact'])){
	$contact = new Contact();
	unset($contact);
}
else{
	header('Location: /');
}

/* Class Contact */
class Contact{
	
	private $db; 						/* the database obj */
	
	private $errors 		= array();  /* holds error messages */
	private $num_errors;   				/* number of errors in submitted form */
	
	public function __construct(){
		$this->db = new DB();
		if(isset($_POST['newcontact']))
			$this->processNewMessage();
		else
			header("Location: /");
	}

	public function processNewMessage(){
		
		$contactpersoon		= $_POST['contactpersoon'];		
		$bedrijfsnaam		= $_POST['bedrijfsnaam'];
		$telefoon			= $_POST['telefoon'];
		$email				= $_POST['email'];
		$vraag1_antwoorden	= $_POST['vraag1_antwoorden'];
		$vraag2_antwoorden	= $_POST['vraag2_antwoorden'];
		
			
		/* Server Side Data Validation */
		
		/* Contactpersoon Validation */
		if(!$contactpersoon || mb_strlen($contactpersoon = trim($contactpersoon)) == 0)
			$this->setError('contactpersoon', 'Vul uw contactpersoon in');
		else if(mb_strlen(trim($contactpersoon)) > 120)
			$this->setError('contactpersoon', 'Te lang! 120 karakters max.');
				
		/* Bedrijfsnaam Validation */
			if(!$bedrijfsnaam || mb_strlen($bedrijfsnaam = trim($bedrijfsnaam)) == 0)
			$this->setError('bedrijfsnaam', 'Vul uw bedrijfsnaam in');
		else if(mb_strlen(trim($bedrijfsnaam)) > 120)
			$this->setError('bedrijfsnaam', 'Te lang! 120 karakters max.');
			
			/* Telefoon Validation */
			if(!$telefoon || mb_strlen($telefoon = trim($telefoon)) == 0)
			$this->setError('telefoon', 'Vul uw telefoonnummer in');
		else if(mb_strlen(trim($telefoon)) > 120)
			$this->setError('telefoon', 'Te lang! 120 karakters max.');
			
			/* Vraag 1 Validation */
			if(!$vraag1_antwoorden || mb_strlen($vraag1_antwoorden = trim($vraag1_antwoorden)) == 0)
			$this->setError('vraag1_antwoorden', 'Selecteer een antwoord a.u.b.');
				
			/* Vraag 2 Validation */
			if(!$vraag2_antwoorden || mb_strlen($vraag2_antwoorden = trim($vraag2_antwoorden)) == 0)
			$this->setError('vraag2_antwoorden', 'Selecteer een antwoord a.u.b.');
				
			/* Email Validation */
		if(!$email || mb_strlen($email = trim($email)) == 0)
			$this->setError('email','Vul uw e-mail in');
		else{
			if(!is_email($email))
				$this->setError('email', 'Vul een correct email adres in');
			else if(mb_strlen($email) > 120)
				$this->setError('email', 'Te lang! 120 karakters max.');
		}
	
		/* Errors exist */
		if($this->countErrors() > 0){
			$json = array(
				'result' => -1, 
				'errors' => array(
								array('name' => 'contactpersoon'	,'value' => $this->error_value('contactpersoon')),
								array('name' => 'bedrijfsnaam'	,'value' => $this->error_value('bedrijfsnaam')),
								array('name' => 'email'		,'value' => $this->error_value('email')),								
								array('name' => 'telefoon'	,'value' => $this->error_value('telefoon')),
								array('name' => 'vraag1_antwoorden'	,'value' => $this->error_value('vraag1_antwoorden')),
								array('name' => 'vraag2_antwoorden'	,'value' => $this->error_value('vraag2_antwoorden')),
							)
				);				
			$encoded = json_encode($json);
			echo $encoded;
			unset($encoded);
		}
		/* No errors, insert in db*/
		else{
			if(($ret = $this->db->dbNewMessage($contactpersoon, $bedrijfsnaam, $email, $telefoon, $vraag1_antwoorden, $vraag2_antwoorden)) > 0){
				$json = array('result' 		=> 1); 
				if(SEND_EMAIL)
					$this->sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden);
			}	
			else
				$json = array('result' 		=> -2); /* something went wrong in database insertion  */
			$encoded = json_encode($json);
			echo $encoded;
			unset($encoded);
		}
	}
	
	public function sendEmail($contactpersoon,$bedrijfsnaam,$email,$telefoon,$vraag1_antwoorden,$vraag2_antwoorden){
		/* Just format the email text the way you want ... */
		$message_body	= "<div style=\"font-size:12px; font-weight:normal;\">Hallo,<br><br>"
									."Het volgende bedrijf heeft zich zojuist aangemeld:</div><br>"
									."<table cellpadding=\"1\" cellspacing=\"1\" width=\"550px\"><tr><td style=\"font-size:12px; color:#000000\">Bedrijfsnaam:</td><td style=\"font-size:12px; color:#000000\">".$bedrijfsnaam."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Contactpersoon:</td><td style=\"font-size:12px; color:#000000\">".$contactpersoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Telefoonnummer:</td><td style=\"font-size:12px; color:#000000\">".$telefoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">E-mail:</td><td style=\"font-size:12px; color:#000000\">".$email."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 1:</td><td style=\"font-size:12px; color:#000000\">".$vraag1_antwoorden."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 2:</td><td style=\"font-size:12px; color:#000000\">".$vraag2_antwoorden."</td></tr></table><br>";
		
			// Geef GELDIGE adressen op
			// Een korte benaming voor jouw website
			$website_naam = 'Aanmelding';
			// Jouw eigen geldige emailadres
			$eigen_emailadres = 'EMAIL ADRES';
			// Een geldig emailadres voor errors
			$error_emailadres = 'EMAIL ADRES';
			// De naam van de verzender
			$naam_verzender = ''.$bedrijfsnaam.'';
			// Het geldige emailadres van de afzender
			$email_verzender = ''.$email.'';
			// Een geldig emailadres of helemaal leeg laten
			$bcc_emailadres = '';
			// HTML mail? True/False
			$html = true;
			
			// De headers samenstellen
			$headers	 = 'From: ' . $website_naam . ' <' . $eigen_emailadres . '>' . PHP_EOL;
			$headers	.= 'Reply-To: ' . $naam_verzender . ' <' . $email_verzender . '>' . PHP_EOL;
			$headers	.= 'Return-Path: Mail-Error <' . $error_emailadres . '>' . PHP_EOL;
			$headers	.= ($bcc_emailadres != '') ? 'Bcc: ' . $bcc_emailadres . PHP_EOL : '';
			$headers	.= 'X-Mailer: PHP/' . phpversion() . PHP_EOL;
			$headers	.= 'X-Priority: Normal' . PHP_EOL;
			$headers	.= ($html) ? 'MIME-Version: 1.0' . PHP_EOL : '';
			$headers	.= ($html) ? 'Content-type: text/html; charset=iso-8859-1' . PHP_EOL : '';

		
			mail(EMAIL_TO,MESSAGE_SUBJECT,$message_body,$headers);

	}
	
	public function setError($field, $errmsg){
		$this->errors[$field] 	= $errmsg;
		$this->num_errors 		= count($this->errors);
	}
	
	public function error_value($field){
		if(array_key_exists($field,$this->errors))
			return $this->errors[$field];
		else
			return '';
	}
	
	public function countErrors(){
		return $this->num_errors;
	}
};

?>
Ik ga mee met wat Obelix zegt. Waarom zou je eerst alle info via een Ajax submit willen doen en dan ook nog een submit via een normale POST. Dat is dubbelop. Je moet dan twee keer verbinding maken met je server, terwijl het in 1 keer kan. Ik zie dus twee (logische) oplossingen:
1) form op normale manier submitten en serverside zowel het form behandelen als het resultaat opmaken
2) form submitten via Ajax en na een succes melding van de server via javascript je form hidden en een succes div tonen. Op die manier hoef je dus ook geen tweede submit te doen.
<?php
$contactpersoon = $_POST['contactpersoon'];
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$telefoon = $_POST['telefoon'];
$email = $_POST['email'];
$vraag1_antwoorden = $_POST['vraag1_antwoorden'];
$vraag2_antwoorden = $_POST['vraag2_antwoorden'];
?>
Waarom allemaal kopiëren?


 $message_body    = "<div style=\"font-size:12px; font-weight:normal;\">Hallo,<br><br>"
                                    ."Het volgende bedrijf heeft zich zojuist aangemeld:</div><br>"
                                    ."<table cellpadding=\"1\" cellspacing=\"1\" width=\"550px\"><tr><td style=\"font-size:12px; color:#000000\">Bedrijfsnaam:</td><td style=\"font-size:12px; color:#000000\">".$bedrijfsnaam."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Contactpersoon:</td><td style=\"font-size:12px; color:#000000\">".$contactpersoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Telefoonnummer:</td><td style=\"font-size:12px; color:#000000\">".$telefoon."</td></tr><tr><td style=\"font-size:12px; color:#000000\">E-mail:</td><td style=\"font-size:12px; color:#000000\">".$email."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 1:</td><td style=\"font-size:12px; color:#000000\">".$vraag1_antwoorden."</td></tr><tr><td style=\"font-size:12px; color:#000000\">Antwoord vraag 2:</td><td style=\"font-size:12px; color:#000000\">".$vraag2_antwoorden."</td></tr></table><br>";
 

Obelix en Idefix op 16/08/2012 13:35:11

Je echo: gebruik ' zodat je in HTML " kunt gebruiken. Daarnaast horen variabelen buiten quotes.

Dat geldt ook voor het toekennen van een waarde aan een variabele.
Overigens; inline css is eigenlijk niet meer van deze tijd.

<?php
$email_verzender = ''.$email.'';
?>
Waarom die quotes voor en na de variabele?
Je kunt toch gewoon
<?php
$email_verzender = $email;
?>doen?
Overigens: ook nu is het weer kopiëren van variabele en dus overbodig.
Obelix en Idefix op 16/08/2012 16:35:55

... Overigens; inline css is eigenlijk niet meer van deze tijd. ...


Het lijkt me trouwens een contradictie te zijn. Die tweede s staat voor "sheet".


Erwin H op 16/08/2012 14:35:02

Ik ga mee met wat Obelix zegt. Waarom zou je eerst alle info via een Ajax submit willen doen en dan ook nog een submit via een normale POST. Dat is dubbelop. Je moet dan twee keer verbinding maken met je server, terwijl het in 1 keer kan. Ik zie dus twee (logische) oplossingen:
1) form op normale manier submitten en serverside zowel het form behandelen als het resultaat opmaken
2) form submitten via Ajax en na een succes melding van de server via javascript je form hidden en een succes div tonen. Op die manier hoef je dus ook geen tweede submit te doen.


Hee Erik, ik zou het graag via manier 2 willen oplossen. Dus het form submitten zoals het nu gaat, anders ben ik bang dat ik teveel overhoop moet halen. De succes div en het verbergen van de form werkt. Echter ik zou graag in de succes div de ingevulde waarden uit het formulier en de score uitslag van de twee radio buttons willen zien.
Hoe doe ik dit?

Het is Erwin, maar dat terzijde ;-)

Het uitlezen van een input element kan je met JQuery eenvoudig doen:

var tekst = $('input[name=vraag1_antwoorden]').val();

Vervolgens kan je deze inserten in je div via bijvoorbeeld een span die als placeholder erin zit:

//html
<div id="succes_div">U koos voor antwoord: <span><span></div

//jquery
$('div#succes_div span').html(tekst);

Mijn excuus Erwin :-)

Iedergeval, bedoel je zo?

RESULT.PHP
HEAD GEDEELTE

<script>
var tekst = $('input[name=vraag1_antwoorden]').val(); 
</script>



RESULT.PHP
HET FORMULIER MET DE INGEVOERDE WAARDEN

<form id="ContactForm" action="">
<tr>
<td><div id="succes_div">U koos voor antwoord:<span><span></div><script>$('div#succes_div span').html(tekst);</script></td>
</tr>

</form>

Reageren