DmitriyRF · July 22, 2024 18:24 · Joeeeeca · Apr 10, 2024 · brettvac · Jul 22, 2024
diff --git a/change.js b/change.js
 /*   To use this example:
     1. Download this html file
     2. Replace the form action url with your own from the MailChimp supplied embed code
     3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
     4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
     5. Open this file in a browser on your local machine
 */



 $("#mc-embedded-subscribe-form").submit(function(e){
 			    e.preventDefault();
 			    submitSubscribeForm($("#mc-embedded-subscribe-form"), $("#subscribe-result"));
 			});
 //$("#mc-embedded-subscribe-form") id form
 //$("#subscribe-result") after form <div id="subscribe-result"></div>

 			function submitSubscribeForm($form, $resultElement) {
 		        $.ajax({
 		            type: "GET",
 		            url: $form.attr("action"),
 		            data: $form.serialize(),
 		            cache: false,
 		            dataType: "jsonp",
 		            jsonp: "c",
 		            contentType: "application/json; charset=utf-8",

 		            error: function(error){},

 		            success: function(data){
 		                if (data.result != "success") {
 		                    var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";

 		                    if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
 		                        message = "You're already subscribed. Thank you.";
 		                    }

 		                    $resultElement.html(message);

 		                } else {
 		                	$resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
 		                	$form.css({
 		                		display: 'none'
 		                	});
 		                }
 		            }
 		        });
 		    }
diff --git a/file.html b/file.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Example ajax/jsonp MailChimp subscribe form</title>
 </head>


 <body>

 <!-- To use this example:
     1. Download this html file
     2. Replace the form action url with your own from the MailChimp supplied embed code
     3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
     4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
     5. Open this file in a browser on your local machine
 -->

 <form
    id="subscribe-form"
    action="http://yourlist.us6.list-manage.com/subscribe/post-json?u=bbbaafd1d12345c57b712345&id=123456789e"
    method="get">

    <h3>Want more great content delivered to your inbox?</h3>

    <p>(no spam ever, unsubscribe at any time)</p>

    <div>
        <input type="email" placeholder="email *" value="" name="EMAIL" >
        <input type="text" placeholder="first name" value="" name="FNAME">
    </div>

    <div>
        <input type="submit" value="Keep Me Updated" name="subscribe">
    </div>

    <div id="subscribe-result">
    </div>

 </form>


 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 <script type="text/javascript">

    $(document).ready(function(){
        ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));

        // Turn the given MailChimp form into an ajax version of it.
        // If resultElement is given, the subscribe result is set as html to
        // that element.
        function ajaxMailChimpForm($form, $resultElement){

            // Hijack the submission. We'll submit the form manually.
            $form.submit(function(e) {
                e.preventDefault();

                if (!isValidEmail($form)) {
                    var error =  "A valid email address must be provided.";
                    $resultElement.html(error);
                    $resultElement.css("color", "red");
                } else {
                    $resultElement.css("color", "black");
                    $resultElement.html("Subscribing...");
                    submitSubscribeForm($form, $resultElement);
                }
            });
        }

        // Validate the email address in the form
        function isValidEmail($form) {
            // If email is empty, show error message.
            // contains just one @
            var email = $form.find("input[type='email']").val();
            if (!email || !email.length) {
                return false;
            } else if (email.indexOf("@") == -1) {
                return false;
            }

            return true;
        }

        // Submit the form with an ajax/jsonp request.
        // Based on http://stackoverflow.com/a/15120409/215821
        function submitSubscribeForm($form, $resultElement) {
            $.ajax({
                type: "GET",
                url: $form.attr("action"),
                data: $form.serialize(),
                cache: false,
                dataType: "jsonp",
                jsonp: "c", // trigger MailChimp to return a JSONP response
                contentType: "application/json; charset=utf-8",

                error: function(error){
                    // According to jquery docs, this is never called for cross-domain JSONP requests
                },

                success: function(data){
                    if (data.result != "success") {
                        var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";
                        $resultElement.css("color", "red");

                        if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
                            message = "You're already subscribed. Thank you.";
                            $resultElement.css("color", "black");
                        }

                        $resultElement.html(message);

                    } else {
                        $resultElement.css("color", "black");
                        $resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
                    }
                }
            });
        }

    });

 </script>

 </body>
 </html>
	/* To use this example:
	1. Download this html file
	2. Replace the form action url with your own from the MailChimp supplied embed code
	3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
	4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
	5. Open this file in a browser on your local machine
	*/



	$("#mc-embedded-subscribe-form").submit(function(e){
	e.preventDefault();
	submitSubscribeForm($("#mc-embedded-subscribe-form"), $("#subscribe-result"));
	});
	//$("#mc-embedded-subscribe-form") id form
	//$("#subscribe-result") after form <div id="subscribe-result"></div>

	function submitSubscribeForm($form, $resultElement) {
	$.ajax({
	type: "GET",
	url: $form.attr("action"),
	data: $form.serialize(),
	cache: false,
	dataType: "jsonp",
	jsonp: "c",
	contentType: "application/json; charset=utf-8",

	error: function(error){},

	success: function(data){
	if (data.result != "success") {
	var message = data.msg \|\| "Sorry. Unable to subscribe. Please try again later.";

	if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
	message = "You're already subscribed. Thank you.";
	}

	$resultElement.html(message);

	} else {
	$resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
	$form.css({
	display: 'none'
	});
	}
	}
	});
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Example ajax/jsonp MailChimp subscribe form</title>
	</head>


	<body>

	<!-- To use this example:
	1. Download this html file
	2. Replace the form action url with your own from the MailChimp supplied embed code
	3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
	4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
	5. Open this file in a browser on your local machine
	-->

	<form
	id="subscribe-form"
	action="http://yourlist.us6.list-manage.com/subscribe/post-json?u=bbbaafd1d12345c57b712345&id=123456789e"
	method="get">

	<h3>Want more great content delivered to your inbox?</h3>

	<p>(no spam ever, unsubscribe at any time)</p>

	<div>
	<input type="email" placeholder="email *" value="" name="EMAIL" >
	<input type="text" placeholder="first name" value="" name="FNAME">
	</div>

	<div>
	<input type="submit" value="Keep Me Updated" name="subscribe">
	</div>

	<div id="subscribe-result">
	</div>

	</form>


	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

	<script type="text/javascript">

	$(document).ready(function(){
	ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));

	// Turn the given MailChimp form into an ajax version of it.
	// If resultElement is given, the subscribe result is set as html to
	// that element.
	function ajaxMailChimpForm($form, $resultElement){

	// Hijack the submission. We'll submit the form manually.
	$form.submit(function(e) {
	e.preventDefault();

	if (!isValidEmail($form)) {
	var error = "A valid email address must be provided.";
	$resultElement.html(error);
	$resultElement.css("color", "red");
	} else {
	$resultElement.css("color", "black");
	$resultElement.html("Subscribing...");
	submitSubscribeForm($form, $resultElement);
	}
	});
	}

	// Validate the email address in the form
	function isValidEmail($form) {
	// If email is empty, show error message.
	// contains just one @
	var email = $form.find("input[type='email']").val();
	if (!email \|\| !email.length) {
	return false;
	} else if (email.indexOf("@") == -1) {
	return false;
	}

	return true;
	}

	// Submit the form with an ajax/jsonp request.
	// Based on http://stackoverflow.com/a/15120409/215821
	function submitSubscribeForm($form, $resultElement) {
	$.ajax({
	type: "GET",
	url: $form.attr("action"),
	data: $form.serialize(),
	cache: false,
	dataType: "jsonp",
	jsonp: "c", // trigger MailChimp to return a JSONP response
	contentType: "application/json; charset=utf-8",

	error: function(error){
	// According to jquery docs, this is never called for cross-domain JSONP requests
	},

	success: function(data){
	if (data.result != "success") {
	var message = data.msg \|\| "Sorry. Unable to subscribe. Please try again later.";
	$resultElement.css("color", "red");

	if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
	message = "You're already subscribed. Thank you.";
	$resultElement.css("color", "black");
	}

	$resultElement.html(message);

	} else {
	$resultElement.css("color", "black");
	$resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
	}
	}
	});
	}

	});

	</script>

	</body>
	</html>