Как исправить сброс формы после публикации - PullRequest
Новая
       23

Как исправить сброс формы после публикации

0 голосов
/ 31 октября 2019

У меня есть эта форма на моем сайте. Форма отправляет данные, но не сбрасывает форму должным образом. Он очищает значения в форме, но не сбрасывает кнопку «отправить», поэтому кнопка остается в нажатом состоянии «загрузка ...».

Я дважды проверил код, ссылки и вызовыдля файлов проверки php и js они одинаковые.

Это HTML-разметка 

<div class="contact-form">
<form id="ortho-form" role="form">

<div class="form-group has-feedback">
<label for="name">Patient Name*</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Patient's Full Name">
<i class="fa fa-user form-control-feedback"></i>
</div>

<div class="form-group has-feedback">
<label for="dob">Date of Birth</label>
<input type="text" class="form-control" id="dob" name="dob" placeholder="dd/mm/yyyy">
<i class="fa fa-birthday-cake form-control-feedback"></i>
</div>

<div class="form-group has-feedback">

<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Patient's Address">
<i class="fa fa-home form-control-feedback"></i>
</div>

<div class="form-group has-feedback">

<label for="pcontact">Contact Number</label>
<input type="text" class="form-control" id="pcontact" name="pcontact" placeholder="xxxxxxxxxx">
<i class="fa fa-phone form-control-feedback"></i>
</div>

<div class="form-group has-feedback">

<label for="mhx">Relevant Medical History</label>
<textarea class="form-control" rows="6" id="mhx" name="mhx" placeholder=""></textarea>
<i class="fa fa-medkit form-control-feedback"></i>
</div>

<div class="form-group has-feedback">

<label for="RFR">Reason for Referral</label>
<textarea class="form-control" rows="6" id="RFR" name="RFR" placeholder="e.g. Open bite, Deep bite, Cross bite"></textarea>
<i class="fa fa-medkit form-control-feedback"></i>
</div>

<div class="form-group has-feedback">
<label for="addc">Additional Comments</label>
<textarea class="form-control" rows="6" id="addc" name="addc" placeholder=""></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
</div>

<div class="form-group has-feedback">
<label for="refdr">Referring Person*</label>
<input type="text" class="form-control" id="refdr" name="refdr" placeholder="Dentist Name">
<i class="fa fa-user-md form-control-feedback"></i>
</div>

<div class="form-group has-feedback">
<label for="dcontact">Contact Number*</label>
<input type="text" class="form-control" id="dcontact" name="dcontact" placeholder="xxxxxxxxxx">
<i class="fa fa-phone form-control-feedback"></i>
</div>

<div class="form-group has-feedback">
<label for="refemail">Email*</label>
<input type="text" class="form-control" id="refemail" name="refemail" placeholder="person@surgery.com">
<i class="fa fa-envelope form-control-feedback"></i>
</div>

<input type="submit" value="Submit" class="btn btn-default btn-lg margin-clear">
</form>

Это PHP-разметка 

<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));

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

// Enter your email address below.
$to = 'email@email.com';

$subject = 'Advantage Access Request';

if($to) {
$name = $_POST['name'];
$email = $_POST['email'];

$fields = array(
    0 => array(
        'text' => 'Name',
        'val' => $_POST['name']
    ),
    1 => array(
        'text' => 'Email address',
        'val' => $_POST['email']
    ),
    2 => array(
        'text' => 'Contact Number',
        'val' => $_POST['phone']
    ),
    3 => array(
        'text' => 'Subject',
        'val' => $_POST['subject']
    ),
    4 => array(
        'text' => 'Message',
        'val' => $_POST['message']
    )

);

$message = "";

foreach($fields as $field) {
    $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br><br>\n";
}

$headers = '';
$headers .= 'From: ' . $name . ' <' . $email . '>' . "\r\n";
$headers .= "Reply-To: " .  $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

if (mail($to, $subject, $message, $headers)){
    $arrResult = array ('response'=>'success');
} else{
    $arrResult = array ('response'=>'error');
}

echo json_encode($arrResult);

} else {

$arrResult = array ('response'=>'error');
echo json_encode($arrResult);

}
?>

Этоскрипт проверки 

/* Contact Forms
*/
    if($("#ortho-form").length>0) {
        $("#ortho-form").validate({
            submitHandler: function(form) {

                var submitButton = $(this.submitButton);
                submitButton.button("loading");

                $.ajax({
                    type: "POST",
                    url: "ortho-form.php",
                    data: {
                        "name": $("#ortho-form #name").val(),
                        "dob": $("#ortho-form #dob").val(),
                        "address": $("#ortho-form #address").val(),
                        "pcontact": $("#ortho-form #pcontact").val(),
                        "mhx": $("#ortho-form #mhx").val(),
                        "RFR": $("#ortho-form #RFR").val(),
                        "addc": $("#ortho-form #addc").val(),
                        "refdr": $("#ortho-form #refdr").val(),
                        "dcontact": $("#ortho-form #dcontact").val(),
                        "refemail": $("#ortho-form #refemail").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.response == "success") {

                            $("#contactSuccess").removeClass("hidden");
                            $("#contactError").addClass("hidden");

                            // Reset Form
                            $("#ortho-form .form-control")
                                .val("")
                                .blur()
                                .parent()
                                .removeClass("has-success")
                                .removeClass("has-error")
                                .find("label")
                                .removeClass("hide")
                                .parent()
                                .find("span.error")
                                .remove();

                            if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){
                                $("html, body").animate({
                                     scrollTop: $("#contactSuccess").offset().top - 80
                                }, 300);
                            }

                        } else {

                            $("#contactError").removeClass("hidden");
                            $("#contactSuccess").addClass("hidden");

                            if(($("#contactError").position().top - 80) < $(window).scrollTop()){
                                $("html, body").animate({
                                     scrollTop: $("#contactError").offset().top - 80
                                }, 300);
                            }

                        }
                    },
                    complete: function () {
                        submitButton.button("reset");
                    }
                });
            },              
            // debug: true,
            errorPlacement: function(error, element) {
                error.insertBefore( element );
            },
            onkeyup: false,
            onclick: false,
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                refemail: {
                    required: true,
                    email: true
                },
                refdr: {
                    required: true
                },
                dcontact: {
                    required: true,
                    minlength: 8
                }
            },
            messages: {
                name: {
                    required: "Please specify patient name",
                    minlength: "Your name must be longer than 2 characters"
                },
                refemail: {
                    required: "We need your email address to contact you",
                    email: "Please enter a valid email address e.g. name@domain.com"
                },
                refdr: {
                    required: "Please provide your name so we can contact you"
                },
                dcontact: {
                    required: "Please enter a correct number",
                    minlength: "Your message must be longer than 10 characters"
                }                   
            },
            errorElement: "span",
            highlight: function (element) {
                $(element).parent().removeClass("has-success").addClass("has-error");
                $(element).siblings("label").addClass("hide"); 
            },
            success: function (element) {
                $(element).parent().removeClass("has-error").addClass("has-success");
                $(element).siblings("label").removeClass("hide"); 
            }
        });
    };
    // End Ortho Form

Не могу понять, почему он отправляет, но не сбрасывает кнопку. Если бы кто-то помог мне разобраться, я был бы очень признателен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...