使用PHP提交表单

时间:2014-10-10 04:19:42

标签: javascript php jquery ajax forms

请原谅我的无知,但我完全不熟悉PHP。我下载了一个网站模板,当有人点击提交按钮时,我有一个表格要发送到我的电子邮件地址。我怎么做?现有代码复制如下:

function rsvpFormSubmit() {

    // this is the id of the form
    var formID = $("#js-form");

    // submits form with ajax method
    formID.on("submit", function() {

        $.ajax({                
            url: "mailer.php",
            type: "POST",               
            data: formID.serialize(), // serializes the form's elements.

            success: function(data) {
                $(".js-display")
                            .addClass("message-panel")
                            .html(data); // show response from the php script.
            }           

        });

        return true; // avoid to execute the actual submit of the form.

    });

    // Show/Hide RSVP Menu selection on accept/decline
    $(".decline").on("click", function(){
        $(".rsvp-meal-choice").fadeOut();
    }); 
    $(".accept").on("click", function(){
        $(".rsvp-meal-choice").fadeIn();
    }); 

}
rsvpFormSubmit();

以下是表单HTML代码:

<div id="section-6" class="js-form">                
            <div class="section-title-container">               
                <h2 class="section-title">Rsvp</h2>
                <span class="hearts"></span>
            </div>
            <div class="small-12 large-10 large-centered columns">
                <form data-abide method="POST" action="#" class="rsvp-form custom" id="js-form">            
                    <fieldset class="rsvp-details">
                        <!-- Displays a global alert if required fields are missing -->
                        <div class="js-display"></div>
                        <legend>
                            Kindly respond by <strong>March 14, 2014</strong>. We look forward to celebrating with you!
                        </legend>
                        <div class="row">
                            <div class="large-6 columns">
                                <label for="firstname">First Name</label>
                                <input type="text" class="input-field" id="firstname" name="firstname" value="" placeholder="Your first name is required" required>
                                <small class="error">First Name is required.</small>
                            </div>
                            <div class="large-6 columns">
                                <label for="lastname">Last Name</label>
                                <input type="text" class="input-field" id="lastname" name="lastname" value="" placeholder="Your last name is required" required>
                                <small class="error">Last Name is required.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-6 columns">
                                <label for="email">Email</label>
                                <input type="email" class="input-field" id="email" name="email" value="" placeholder="name@yourdomain.com" required>
                                <small class="error">Valid Email is required.</small>
                            </div>
                            <div class="large-6 columns">
                                <label for="phone">Phone</label>
                                <input type="tel" class="input-field" id="phone" name="phone" value="" placeholder="A phone number is optional">
                            </div>
                        </div>                          
                    </fieldset>
                    <fieldset class="rsvp-attendance">
                        <legend>Will you be attending?</legend>
                        <div class="large-6 columns">
                            <label for="radio1">
                                <input name="radio" type="radio" id="radio1" style="display:none;" value="Accepts with Pleasure!" required>
                                <span class="custom radio accept"></span>
                                <span class="radio-label">Accepts with Pleasure!</span>
                            </label>
                        </div>
                        <div class="large-6 columns">
                            <label for="radio2">
                                <input name="radio" type="radio" id="radio2" style="display:none;" value="Declines with Regret." required>
                                <span class="custom radio decline"></span>
                                <span class="radio-label">Declines with Regret.</span>
                            </label>
                        </div>
                    </fieldset>
                    <fieldset class="rsvp-meal-choice">
                        <legend>
                            Please select your meal choices
                        </legend>
                        <div class="row">
                            <div class="large-6 columns">
                              <label for="main-course">Main</label>
                              <select id="main-course" name="main-course">
                                <option selected>None</option>
                                <option>Chicken</option>
                                <option>Beef</option>
                                <option>Vegetarian</option>
                              </select>
                            </div>
                            <div class="large-6 columns">
                              <label for="dessert">Dessert</label>
                              <select id="dessert" name="dessert">
                                <option selected>None</option>
                                <option>Chocolate Cake</option>
                                <option>Lemon Cheesecake</option>
                                <option>Key Lime Pie</option>
                              </select>
                            </div>
                        </div>              
                    </fieldset>     
                    <button type="submit" class="button radius" id="js-submit-btn">
                        <i class="fa fa-envelope"></i> 
                        <span class="btn-label">Send</span>
                    </button>
                </form>

2 个答案:

答案 0 :(得分:0)

<form id="js-form" onsubmit="rsvpFormSubmit()">

调用此函数以及mailer.php

中添加的所有PHP代码

答案 1 :(得分:0)

创建Mailer.php函数后,请将这些代码编入其中

<?php 
if(isset($_POST['submit'])){
    $to = "email@example.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $first_name . " " . $last_name . " wrote the following:" . "\n\n" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    echo "Mail has been Sent. Thank you " . $first_name . ", we will contact you shortly.";

    }
?>

在[结尾]之前不要放任何空格。

我希望代码工作正常...请让我知道存在任何问题 祝你今天愉快 谢谢