<div class="grid--cell fl1 lh-lg">
<div class="grid--cell fl1 lh-lg">
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, <a href="/help/reopen-questions">visit the help center</a>.
</div>
</div>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2013-05-29 06:07:48Z" class="relativetime">6 years ago</span>.</div>
</div>
</aside>
I have 4-5 forms which I want to give on my site for the users as an option to use one of them.
I am thinking I'll open a page with screenshots of the forms and if the user clicks on one the form should load using ajax.
I can redirect it to the form but I just want to know is there a way to do it with ajax jquery.
Thanks!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form Validate and Save</title> <link href="style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">
$( document ).ready(function() {
$.ajaxSetup({ cache: false }); });
window.onload = initPage;
function initPage() {
$.getJSON('formData.json', function(Data) {
$("#formName").html( Data.load[0].formName ).html();
$("#fname").html( Data.load[0].fname ).html();
$("#fmail").html( Data.load[0].fmail ).html();
$("#fmobile").html( Data.load[0].fmobile ).html();
$("#fmessage").html( Data.load[0].fmessage ).html();
$("#mailTo").val( Data.load[0].mailTo );
}); }
function sendData() {
var newformName = document.getElementById('formName').innerHTML;
var newfname = document.getElementById('fname').innerHTML;
var newfmail = document.getElementById('fmail').innerHTML;
var newfmobile = document.getElementById('fmobile').innerHTML;
var newfmesage = document.getElementById('fmessage').innerHTML;
var newmailTo = document.getElementById('mailTo').value;
var newData = {
formName: newformName, fname: newfname, fmail: newfmail, fmobile: newfmobile, fmessage: newfmesage, mailTo: newmailTo, file:
'formLoad.json',
};
$.ajax({
type: 'POST',
url: 'save.php',
data: newData,
}).done(function( formData ) {
formData = eval('(' + formData + ')');
$('#formName').html( formData.load[0].formName ).html();
$('#fname').html( formData.load[0].fname ).html();
$('#fmail').html( formData.load[0].fmail ).html();
$('#fmobile').html( formData.load[0].fmobile ).html();
$('#fmessage').html( formData.load[0].fmessage ).html();
$('#mailTo').val( formData.load[0].mailTo );
}); } </script> </head> <body>
<?php
require_once('login.php');
?>
<?php require_once('formLoad.php'); ?>
<!-- JavaScript below! -->
<!-- jQuery via Google + local fallback, see h5bp.com --> <script src="assets/js/jquery-1.7.1.min.js"></script>
<!-- Bootstrap JS --> <script src="assets/js/bootstrap.js"></script>
<!-- Validate plugin --> <script src="assets/js/jquery.validate.min.js"></script>
<!-- Scripts specific to this page --> <script src="script.js"></script>
<!-- <script> // Activate Google Prettify in this page
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
// Add prettyprint class to pre elements
$('pre').addClass('prettyprint linenums');
});
</script>-->
</body> </html>
</div>
It is a rather broad question, but I'll try to answer it.
The following approach enables you to put all the forms in one .html file and just give them different ID. (Say #form1, #form2, #formN.) If a user selects one, you should just figure out the right ID and then do:
$('#elementYouWantTheLoadedFormIn').load('ajax/fileWithTheForms.html #' + formID, function() {
// Optional callback.
});