将表单中<label>标签中的文本传递给PHP

时间:2016-12-13 21:45:59

标签: php html5

我正在尝试将HTML5中label标签中的值(文本)传递给我的PHP,以便我可以在电子邮件的主题中使用该值。有两个按钮,它们都没有来自用户的任何输入。一切都将是自动的。抱歉这个烂摊子。我还附上了一张照片。 This is a screenshot of what im trying to do

PHP

<?php
    $demo = $_POST['demo_name'];

    // Create the email and send the message
    $to = 'soroush@hotmail.ca'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
    $email_subject = "Client:  $demo";
    $email_body = "START";
    $headers = 'From: soroush.report@gmail.com'; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
    //$headers .= "Reply-To: $email_address";   
    mail($to,$email_subject,$email_body);
    return true;    

    if (mail($to,$email_subject,$email_body)) {
        echo 'Sent';
    }
    else {
        echo 'Not sent';
    }       
?>

HTML

<html>
<head>
    <!-- Contact Form CSS files -->
    <style>
    body {
        padding: 20px;
    }

    button {
        margin-top: 20px;
        margin-right: 10px;
        line-height: 60px;
        font-weight: bold;
        padding: 0 40px;
        background: highlight;
        color: #FFFFFF;
        border: none;
    }

    button:hover {
        background: red;
    }

    .button {
        display: inline-block;
        border-radius: 4px;
        background-color: Highlight;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 28px;
        padding: 10px;
        width: 150px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
    }

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 25px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }

    .hide {
        display: none;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    // Your Client ID can be retrieved from your project in the Google
    // Developer Console, https://console.developers.google.com
    var CLIENT_ID = 'MY CLIENT ID FROM GOOGLE API CALENDER';
    var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"];

    /**
    * Check if current user has authorized this application.
    */
    function checkAuth() {
        gapi.auth.authorize({
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': true
            }, handleAuthResult);
    }

    /**
    * Handle response from authorization server.
    *
    * @param {Object} authResult Authorization result.
    */
    function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
            // Hide auth UI, then load client library.
            authorizeDiv.style.display = 'none';
            loadCalendarApi();
        } else {
            // Show auth UI, allowing the user to initiate authorization by
            // clicking authorize button.
            authorizeDiv.style.display = 'inline';
        }
    }

    /**
    * Initiate auth flow in response to user clicking authorize button.
    *
    * @param {Event} event Button click event.
    */
    function handleAuthClick(event) {
        gapi.auth.authorize(
            {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
            handleAuthResult);
        return false;
    }

    /**
    * Load Google Calendar client library. List upcoming events
    * once client library is loaded.
    */
    function loadCalendarApi() {
        gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }

    /**
    * Print the summary and start datetime/date of the next ten events in
    * the authorized user's calendar. If no events are found an
    * appropriate message is printed.
    */
    function listUpcomingEvents() {
        var request = gapi.client.calendar.events.list({
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime'
        });

        request.execute(function(resp) {
            var events = resp.items;
            appendPre('Upcoming events:');

            if (events.length > 0) {
                for (i = 0; i < events.length; i++) {
                    var event = events[i];
                    var when = event.start.dateTime;

                    if (!when) {
                        when = event.start.date;
                    }
                    appendPre(event.summary + ' (' + when + ')');
                }
            } else {
                appendPre('No upcoming events found.');
            }

            function initButtons() {
                for (j = 0; j < events.length; j++) {
                    var body = document.body, button, j;
                    // ntahoang: event is declared and assigned here:
                    var event = events[j];
                    (function (j) {
                        button = document.createElement("button");
                        button.innerHTML += event.summary;
                        button.value = event.summary;

                        button.addEventListener("click", function (e) {
                            var x = document.createElement("STRONG");
                            var t = document.createTextNode(this.innerHTML);
                            x.appendChild(t);
                            document.getElementById("demo").appendChild(x);

                            //alert(this.innerHTML);
                        }, false);

                        body.appendChild(button);
                    }(j));
                }
            } initButtons();
        });
    }

    function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
    }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
</head>

<body>
    <div id="authorize-div" style="display: none">
        <span>Authorize access to Google Calendar API</span>
        <!--Button for the user to click to initiate auth sequence -->
        <button id="authorize-button" onclick="handleAuthClick(event)">
            Authorize
        </button>
    </div>
    <pre id="output"></pre>

    <form action="../email/start.php" method="POST">
        <label id ="demo">Client: </label>
        <input type="hidden" id="test"/>
        <input class="button" style="vertical-align:middle" id="start" type="submit" value="Start"/>
        <input class="button" style="vertical-align:middle" id="start" type="submit" value="Finish" />
    </form>

    <form action="action_page.php">
        <textarea name="message" rows="30" placeholder="Please write your report..." cols="75"></textarea>
        <br>
        <button class="button" type="submit">Report</button>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

标签不是您可以保存数据的输入,您可以使用输入隐藏或文本代替。

<label id ="demo">[enter image description here][1]Client: </label>
// Use this instead
<input type="text" id="demo" placeholder="[enter image description here][1]Client:"/>