Next steps with Performer

Step 7: Modifying the survey form to use Submitter

Finally we want to make the survey form get submitted without forcing the page to be relaoded. Yes, it's another AJAX function: Submitter. Let's add the Submitter CSS classes:

<form id="surveyform" action="#" method="post" class="submitter targetPage-/next-steps/jazz-survey targetElement-surveyresponse">
	<p>Who is the greatest jazz musician?</p>
	<ul>
		<li><label class="inline" for="option1">Miles Davis</label><input id="option1" name="surveyanswer" type="radio" value="Miles Davis" /></li>
		<li><label class="inline" for="option2">Louis Armstrong</label><input id="option2" name="surveyanswer" type="radio" value="Louis Armstrong" /></li>
		<li><label class="inline" for="option3">Bill Evans</label><input id="option3" name="surveyanswer" type="radio" value="Bill Evans" /></li>
		<li><label class="inline" for="option4">None of the above</label><input id="option4" name="surveyanswer" type="radio" value="None of the above" /></li>
	</ul>
	<p><label for="submitsurvey">Submit</label>
	<button id="submitsurvey">Submit survey</button></p>
	<div id="surveyresponse"></div>
</form>

Here you can see the targetPage is set as /next-steps/jazz-survey, and the targetElement to surveyresponse. I've then added a div element for the response of the survey and given it an id of surveyresponse.

When the form is submitted the data will go to the /next-steps/jazz-survey page, and the response loaded into the surveyresponse element. Take a look at it working here. Finish this little tutorial...

Pages: 1 2 3 4 5 6 7 8