zalary/TrustedForm_trigger.html

## TrustedForm_trigger.html
<!DOCTYPE html>
<html>

<head>
    <title>Trigger TF Snapshot</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        // this line sets the value of an input form in the dom when the input is change
        // TF reads from the dom, so this means later when the function is called
        // any data the user inputs will be availble in the screenshot
        $('input').on('input', function() {
            this.setAttribute("value", $(this).val())
        })

    });


    // this function wraps the standard TrustedForm script in a function
    // this allows us to call/load the script when we need it
    // best if placed outside the document-ready function
    function loadTrustedForm() {
        var field = 'TFCert';
        var provideReferrer = false;
        var tf = document.createElement('script');
        tf.type = 'text/javascript';
        tf.async = true;
        tf.src = 'http' + ('https:' == document.location.protocol ? 's' : '') +
            '://api.trustedform.com/trustedform.js?provide_referrer=' + escape(provideReferrer) + '&field=' + escape(field) + '&l=' + new Date().getTime() + Math.random();
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(tf, s);
    }


    // this is the function that triggers both TF and the modal window
    function Confirm() {
        loadTrustedForm();
        ShowModelPopup('#confirmation_modal', 400);
    }

    // this function shows our popup message.
    function ShowModelPopup(filter, width) {
        var dialogValidationSummary = $(filter);
        dialogValidationSummary.dialog({
            modal: true,
            width: width
        });
    }

    function btnContinue_Click() {
        $("#example_form").submit();
    }

    function btnCancel_Click() {
        $("#confirmation_modal").dialog("close");
    }

    </script>

    <style>
    body {
        margin: auto;
    }
    form#example_form {
        margin: 20px auto;
        width: 400px;
    }
    #example_form div label {
        width: 200px;
        display: block;
        float: left;
    }
    </style>

</head>

<body>
    <!-- This is the form.  In this example we have a form action that will submit when we call form.submit() and we have a data-ajax call that shows the modal popup when the user clicks submit -->
    <form action="http://requestb.in/1lnsbgx1" id="example_form" method="post">
        <div id="main">
            <label for="First_Name" width="200px">First Name</label>
            <input maxlength="100" name="First_Name" type="text" value="">
            <label for="Last_Name" width="200px">Last Name</label>
            <input axlength="100" name="Last_Name" type="text" value="">

            <label for="Email_Address" width="200px">Email Address</label>
            <input maxlength="255" name="Email_Address" type="text" value="">
            <label for="Phone_Number" width="200px">Phone Number</label>
            <input maxlength="255" name="Phone_Number" type="text" value="">
            <br />
            <br />
            <!-- our submit button triggers a modal that confirms the user's intent -->
            <input type="button" value="Submit Request" id="confirm" class="btn_red" onclick="Confirm();">
        </div>
    </form>

    <div id="confirmation_modal" class="popup" style="text-align: center; width: 400px; display: none;">

        <p>
            I consent to have be contacted at the number I provided even if that number is a wireless number. I understand, responses to this request may include the use of autodialing and/or pre-recorded messaging technology. This consent is not a condition of purchase.
        </p>
        <br>
        <p align="center">
            <input type="button" name="btnOk" value="Continue" onclick="btnContinue_Click();" id="btnOk">&nbsp;
            <input type="button" name="btnHide" value="Cancel" onclick="btnCancel_Click()" id="btnHide">
        </p>
    </div>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Trigger TF Snapshot</title>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
	<script>
	$(document).ready(function() {
	// this line sets the value of an input form in the dom when the input is change
	// TF reads from the dom, so this means later when the function is called
	// any data the user inputs will be availble in the screenshot
	$('input').on('input', function() {
	this.setAttribute("value", $(this).val())
	})

	});


	// this function wraps the standard TrustedForm script in a function
	// this allows us to call/load the script when we need it
	// best if placed outside the document-ready function
	function loadTrustedForm() {
	var field = 'TFCert';
	var provideReferrer = false;
	var tf = document.createElement('script');
	tf.type = 'text/javascript';
	tf.async = true;
	tf.src = 'http' + ('https:' == document.location.protocol ? 's' : '') +
	'://api.trustedform.com/trustedform.js?provide_referrer=' + escape(provideReferrer) + '&field=' + escape(field) + '&l=' + new Date().getTime() + Math.random();
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(tf, s);
	}


	// this is the function that triggers both TF and the modal window
	function Confirm() {
	loadTrustedForm();
	ShowModelPopup('#confirmation_modal', 400);
	}

	// this function shows our popup message.
	function ShowModelPopup(filter, width) {
	var dialogValidationSummary = $(filter);
	dialogValidationSummary.dialog({
	modal: true,
	width: width
	});
	}

	function btnContinue_Click() {
	$("#example_form").submit();
	}

	function btnCancel_Click() {
	$("#confirmation_modal").dialog("close");
	}

	</script>

	<style>
	body {
	margin: auto;
	}
	form#example_form {
	margin: 20px auto;
	width: 400px;
	}
	#example_form div label {
	width: 200px;
	display: block;
	float: left;
	}
	</style>

	</head>

	<body>
	<!-- This is the form. In this example we have a form action that will submit when we call form.submit() and we have a data-ajax call that shows the modal popup when the user clicks submit -->
	<form action="http://requestb.in/1lnsbgx1" id="example_form" method="post">
	<div id="main">
	<label for="First_Name" width="200px">First Name</label>
	<input maxlength="100" name="First_Name" type="text" value="">
	<label for="Last_Name" width="200px">Last Name</label>
	<input axlength="100" name="Last_Name" type="text" value="">

	<label for="Email_Address" width="200px">Email Address</label>
	<input maxlength="255" name="Email_Address" type="text" value="">
	<label for="Phone_Number" width="200px">Phone Number</label>
	<input maxlength="255" name="Phone_Number" type="text" value="">
	<br />
	<br />
	<!-- our submit button triggers a modal that confirms the user's intent -->
	<input type="button" value="Submit Request" id="confirm" class="btn_red" onclick="Confirm();">
	</div>
	</form>

	<div id="confirmation_modal" class="popup" style="text-align: center; width: 400px; display: none;">

	<p>
	I consent to have be contacted at the number I provided even if that number is a wireless number. I understand, responses to this request may include the use of autodialing and/or pre-recorded messaging technology. This consent is not a condition of purchase.
	</p>
	<br>
	<p align="center">
	<input type="button" name="btnOk" value="Continue" onclick="btnContinue_Click();" id="btnOk">
	<input type="button" name="btnHide" value="Cancel" onclick="btnCancel_Click()" id="btnHide">
	</p>
	</div>