使用表单参数onSubmit运行PHP脚本（发送电子邮件）

Question

I'm trying to make a form that uses onSubmit to run a script/pass some data to a PHP page before performing the action and directing away from the site.

The reason I'm doing this is to set up a confirmation email to be sent to someone entering the form, while the form action saves the info they entered through insightly.

I have tried everything I can think of, so I'm sorry for the raggedy code.

This is my form:

<form id="commentForm" action="contactmail.php" method="post" onSubmit="">

    <input type="hidden" name="formId" value="/*InsightlyKeyString*/"/>

    <p class="normal">
        <label for="insightly_firstName">First Name * :<br></label>
        <input id="insightly_firstName" name="FirstName"  type="text" placeholder=" First Name"/>
    </p>

    <p class="normal">
        <label for="insightly_lastName">Last Name :<br></label>
        <input id="insightly_lastName" name="LastName"  type="text" placeholder=" Last Name" />
    </p>
    <p class="normal">
        <input type="hidden" name="emails[0].Label" value="Work"/>
        <label for="emails[0]_Value">E-Mail * :</label>
        <input id="emails[0]_Value" type="email" name="email" class="emails" placeholder=" [e-mail]"/>
    </p>
    <p class="normal">
        <input type="hidden" name="phones[0].Label" value="Work" id="phones"/>
        <label for= "phones[0]_Value">Phone * :</label>
        <input id="phones[0]_Value" name="phones" type="text" placeholder="(incl. Area Code) Contact No. "/>
        <span id="instructions">Fields marked with an * required</span>
    </p>

    <p class="normal">
        <input class="buttoninput" type="submit" value="Submit"/>
    </p>

and here is my javascript:

    var fname = $('#insightly_firstname').val();
var lname = $('#insightly_lastName').val();
var email = $('.emails').val();
var phone = $('.phones').val();

//$.post("contactmail.php", {FirstName: fname, LastName: lname, email: email, phones: phone});
//      From a previous attempt - is it right track?

function sendMail(){          

var fname = $('#insightly_firstName').val();
var lname = $('#insightly_lastName').val();
var email = $('.emails').val();
var phone = $('.phones').val();

function mailUser(email, fname, lname){
    alert('MAILING USER NOW');
    $.ajax({
        type: 'post',
        url: 'contactmail.php',
        data:{
            uemail: email,
            ufname: fname,
            ulname: lname
        },
        success: function(data){
            return true;
        }
    });

}

So basically the way I envision this should work is my form should run sendMail(), use the ajax call to pass the data to contactmail.php (a temp file that just contains an echo and a mail() ) and if it returns true should continue on with normal submission.

When I run it however it never pings contactmail.php (I tried to test it with a quick alert on the page). Is this intended? Can I even get a secondary page to execute in onSubmit? or can only action be used for this?

Answer 1

I don't see an .submit() function where you stop it using return false; so you can fire your ajax request.

$('form').on('submit', function(){
    sendMail();
    return false; //stop the default form submission
});

Now call sendMail() from withi this function.. But it needs to be modified to properly perform the redirect when you receive a true back from the server.

The next issue is that you declare a function within a function, but never actually execute the inner function. I also don't see a need for two functions here, it's totally redundant and unnecessarily verbose

Now we need to modify the send mail function and identify where we wish to redirect once completed.

function sendMail(){          

    $.ajax({
        type: 'post',
        url: 'contactmail.php',
        data:{
            uemail: $('.emails').val(),
            ufname: $('#insightly_lastName').val(),
            ulname: $('#insightly_firstName').val()
        },
        success: function(data){
            if(data == true){
                window.location = 'mysite.com/thank-you.php';
            }
        }
    });
}

Two things to note above. I've removed your variable assignment. Once again, it's overly verbose. There's no need to declare a variable just to be used once. Also, I'm looking for a return true from contactmail.php in your success function. Also, I've used the window.location to redirect to a thank you page when the true.