重新输入无效清除表格值

问题描述

我有一个与Recaptcha的联系表，但是当Recaptcha失败时，所有字段数据也会被清除。当然，这不是理想的，当某人填写了一条长消息，然后又以某种方式忘记重新输入时，所有文本都会丢失。我该如何预防？

非常感谢您的帮助！

<form method="POST" action="contact.PHP" id="contactform" name="contact-form" role="form">
                            <div class="messages"></div>
                            <div class="row">
                                <div class="col-sm-5 col-md-4">
                                 
                                    <div class="form-group contact-form-icon">
                                      <label class="sr-only">Naam</label>
                                      <i class="fa fa-user"></i>
                                      <input type="text" placeholder="Naam" id="name" class="form-control" name="name" required>
                                    </div>
                                 
                                    <div class="form-group contact-form-icon">
                                      <label for="email" class="sr-only">Email</label>
                                      <i class="fa fa-envelope"></i>
                                      <input type="email" placeholder="Email" id="email" class="form-control" name="email" required>
                                    </div>
                                  
                                    <div class="form-group contact-form-icon">
                                      <label for="subject" class="sr-only">Onderwerp</label>
                                      <i class="fa fa-pencil"></i>
                                      <input type="text" placeholder="Onderwerp" id="subject" class="form-control" name="subject" required>
                                    </div>
                                </div>
                                <div class="col-sm-7 col-md-8">
                                    <div class="form-group contact-form-icon">
                                      <label for="message" class="sr-only">Bericht</label>
                                      <i class="fa fa-keyboard-o"></i>
                                      <textarea placeholder="Bericht" rows="7" id="message" class="form-control" name="message" required></textarea>  <br/>
                                                                                                                  <div class="g-recaptcha" data-sitekey="XXXXXXX></div>

                                      
                                    </div>
                                </div>
                                <div class="col-sm-5 col-md-4 text-center contact-button-padding">

                                    <button class="btn-primary btn-contact btn-block" name="submit" type="submit"><i class="fa fa-paper-plane"></i> Verzenden</button>

                                </div>
                            </div>
                        </form>

contact.PHP：

<?PHP
// require ReCaptcha class
require('recaptcha-master/src/autoload.PHP');

// configure
// an email address that will be in the From field of the email.
$from = 'Website <me@website.com>';

// an email address that will receive the email with the output of the form
$sendTo = 'Admin <admin@website.com>';

// subject of the email
$subject = 'Nieuw bericht via contactformulier';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name','surname' => 'Surname','phone' => 'Phone','email' => 'Email','message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Bericht goed ontvangen! Ik neem spoedig contact met jou op.';

// If something goes wrong,we will display this message.
$errorMessage = 'Er is iets misgegaan,probeer even opnieuw aub.';

// ReCaptch Secret
$recaptchaSecret = 'XXXXXXXX';

// let's do the sending

// if you are not debugging and don't need error reporting,turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try {
    if (!empty($_POST)) {

        // validate the ReCaptcha,if something is wrong,we throw an Exception,// i.e. code stops executing and goes to catch() block
        
        if (!isset($_POST['g-recaptcha-response'])) {
            throw new \Exception('ReCaptcha is not set.');
        }

        // do not forget to enter your secret key from https://www.google.com/recaptcha/admin
        
        $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret,new \ReCaptcha\RequestMethod\CurlPost());
        
        // we validate the ReCaptcha field together with the user's IP address
        
        $response = $recaptcha->verify($_POST['g-recaptcha-response'],$_SERVER['REMOTE_ADDR']);

        if (!$response->isSuccess()) {
            throw new \Exception('ReCaptcha was niet succesvol.');
        }
        
        // everything went well,we can compose the message,as usually
        
        $emailText = "Nieuw bericht via contactformulier\n=============================\n";

        foreach ($_POST as $key => $value) {
            // If the field exists in the $fields array,include it in the email
            if (isset($fields[$key])) {
                $emailText .= "$fields[$key]: $value\n";
            }
        }
    
        // All the neccessary headers for the email.
        $headers = array('Content-Type: text/plain; charset="UTF-8";','From: ' . $from,'Reply-To: ' . $from,'Return-Path: ' . $from,);
        
        // Send email
        mail($sendTo,$subject,$emailText,implode("\n",$headers));

        $responseArray = array('type' => 'success','message' => $okMessage);
    }
} catch (\Exception $e) {
    $responseArray = array('type' => 'danger','message' => $e->getMessage());
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
} else {
    echo $responseArray['message'];
}

和contact.js：

```$(function () {

    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change');
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change');
    }

    $('#contact-form').validator();

    $('#contact-form').on('submit',function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.PHP";

            $.ajax({
                type: "POST",url: url,data: $(this).serialize(),success: function (data) {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                }
            });
            return false;
        }
    })
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

recaptcha recaptcha