HTML form to trigger both php and javascript when submitted

Question

I have a simple html form with just a box for the user to enter their email address.

When the "submit" button is pressed I want the email address submitted to be:

(a) emailed to me

(b) automatically added to a Google form

I can do both of these individually. I can perform (a) using:

<form id="input-form" action="email.php" method="POST">

where "email.php" is:

<?php
    mail('[email protected]', $_POST['email'], "Add to Mailing List");
    header('Location: https://my_website.com/thanks.html');
?>

and I do (b) using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>                           

<script>                                                                                                           
  $('#input-form').on('submit',function(){                                                                       
    var inputq1 = encodeURIComponent($('#email').val());                                                       
    var q1ID = "entry.1047793221";                                                                             
    var baseURL = 'https://docs.google.com/forms/d/e/1FAIpFLSe7dz1sfyEigQF3QGkTfKCieaqb8OgXoGzLOZPmhn6TvjqFg/formResponse?';                                                                                                    
    var submitURL = (baseURL + q1ID + "=" + inputq1);                                                          
    console.log(submitURL);                                                                                    
    $(this)[0].action=submitURL;                                                                               
    $('#input-feedback').text('Thank You!');                                                                   
            location.replace("https://my_website.com/thanks.html")                                     
});                                                                                                            
</script>

When I comment out the javascript, the submitted information is emailed to me as desired and the user is directed to my "thank you" page. But when I include the javascript, now the email doesn't arrive, but the email address that they entered is instead added to the Google form. So the Google form works part works, but it seems to override the sending of the email to myself.

Additionally, when the javascript is included the user no longer is redirected to my "thank you" page. Instead they are just directed to the Google form thank you page:

How can I get both (a) and (b) to happen after submission please?

failedCoder · Accepted Answer · 2019-12-06 15:44:34Z

1

You can use ajax to to activate your email.php script:

<script> 
$('#input-form').on('submit',function(e){
    e.preventDefault(); // this stops the form submit

    var inputq1 = encodeURIComponent($('#email').val());                                                       
    var q1ID = "entry.1047793221";                                                                             
    var baseURL = 'https://docs.google.com/forms/d/e/1FAIpFLSe7dz1sfyEigQF3QGkTfKCieaqb8OgXoGzLOZPmhn6TvjqFg/formResponse?';                                                                                                    
    var submitURL = (baseURL + q1ID + "=" + inputq1);                                                          
    console.log(submitURL);                                                                                    
    $(this)[0].action=submitURL;

   var data = {
        // fill with form input values
        email: $('#email').val(),
   };


    // send ajax request to send your email
    $.ajax({
        url: '/email.php',
        type: 'POST',
        data: data,
        success: function( response ) {
            response = JSON.parse( response );
            // check if email is sent successfuly and respond appropriately
            if (response.status == 'success') {
                $('#input-feedback').text('Thank You!');                                                                   
                location.replace("https://my_website.com/thanks.html")  
            } else {
                $('#input-feedback').text('Ooops! Something went wrong.');  
            }
        },
        error: function (xhr, status, error) {
            console.log( xhr.responseText );
        }
    });
 }); 
 </script>

PHP

<?php
$response = [
    'status' => 'error',
];

// validate input values
if (empty($_POST['email'])) { // this is the most basic validation
    echo json_encode($response); exit();
}

// check if mail was sent successfuly
if( mail('[email protected]', $_POST['email'], "Add to Mailing List") ) {
     $response['status'] = 'success';
     echo json_encode($response); exit();
}
// if email failed to send
echo json_encode($response); exit();

edited Dec 6, 2019 at 15:44

answered Dec 6, 2019 at 15:36

failedCoder

1,4241 gold badge18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1551817 Over a year ago

Thank you. Sorry to be dumb, but does the top section have to be within <script></script> tags?

failedCoder Over a year ago

@user1551817 Yes, all javascript/jquery code has to be either in <script> tags or in a file that has extension .js

user1551817 Over a year ago

So, I do get the email, but instead of going to the thank you page, I get a white page with "{"status":"success"}" and also the message doesn't seem to get sent to my Google form.

failedCoder Over a year ago

Is email.php separate script from the one you have you html and javacript in?

user1551817 Over a year ago

Yes. My html and javascript is in index.html and the php is in email.php

|

Collectives™ on Stack Overflow

HTML form to trigger both php and javascript when submitted

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related