重置表单和变量而不刷新页面

Question

我有一个包含多个文件链接的页面。单击任何链接，将在模式中打开联系表单。成功提交后，文件URL将显示成功消息。

由于我不想为每个链接制作单独的表单，我已将这些文件放在一个文件夹中，所有链接都是＃34;名称＆＃34;完全匹配文件名。 表单和文件链接名称的主题通过javascript分配给php。

当我点击其他文件下载链接时，我想重置表单上的所有值。我已经读过会话是一种方法，但我不知道足够的PHP来正确执行这个。

我很欣赏一些指示

这是我的文件

https://www.dropbox.com/s/jcw88r6np5faw5r/tester.php?dl=0 https://www.dropbox.com/s/a2fw38n1vxkb05n/contact_m1.php?dl=0

Tester.php - 按钮和表单元素

        <div class="col-xs-12">
            <div class="text-xs-center"><a class="btn btn-danger" name="fire_prevention_system"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD  </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="FDSS"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD  </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="Aerosol_Fire_Suppression_Catalogue"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="Aerosol_system"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="company_introduction_2017"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="Twin-Trolley_Trailers_Acc"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD </a> <div class="modal-container"></div></div>
            <div class="text-xs-center"><a class="btn btn-danger" name="how-to-operate-"  onclick="calculate()" href="#myModal" id="modellink" data-toggle="modal"> DOWNLOAD </a> <div class="modal-container"></div></div>
        </div>

        <script type="text/javascript"> 
        function calculate() {
        var x = document.getElementById("modellink").name;
        document.getElementById("subject").value = x;
        }
        </script>

        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                        <h6 class="modal-title">File Download Request</h6>
                    </div>
                    <div class="modal-body">
        <div class="form-style" id="contact_form">
            <div id="contact_results"></div>
            <form id="contact_body" method="post" action="contact_m1.php">
            <input type="text" style="display:none;" id="subject" name="subject" value="">
                <label for="name"><span>Name <span class="required">*</span></span>
                    <input type="text" name="name" data-required="true"/>
                </label>
                <label for="email"><span>Email <span class="required">*</span></span>
                    <input type="email" name="email" data-required="true"/>
                </label>
                <label><span>Mobile <span class="required">*</span></span>
                    <input type="text" name="phone1" maxlength="4" placeholder="+91" data-required="true"/>&mdash;
                    <input type="text" name="phone2" maxlength="15" data-required="true"/>
                </label>
                <label for="company"><span>Organisation <span class="required">*</span></span>
                    <input type="text" name="company" data-required="true"/>
                </label>       
                <label for="message"><span>Message <span class="required">*</span></span>
                    <textarea name="message" data-required="true"></textarea>
                </label>
                <label><span>&nbsp;</span>
                    <button type="submit">Submit</button>
                </label>
            </form>
        </div>
        </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>


        <script type="text/javascript">
        var border_color = "#C2C2C2"; //initial input border color

        $("#contact_body").submit(function(e){
            e.preventDefault(); //prevent default action 
            proceed = true;

//simple input validation
$($(this).find("input[data-required=true], textarea[data-required=true]")).each(function(){
        if(!$.trim($(this).val())){ //if this field is empty 
            $(this).css('border-color','red'); //change border color to red   
            proceed = false; //set do not proceed flag
        }
        //check invalid email
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
            $(this).css('border-color','red'); //change border color to red   
            proceed = false; //set do not proceed flag              
        }   
}).on("input", function(){ //change border color to original
     $(this).css('border-color', border_color);
});

//if everything's ok, continue with Ajax form submit
if(proceed){ 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = new FormData(this); //Creates new FormData object
    var x = void 0;

    $.ajax({ //ajax form submit
        url : post_url,
        type: request_method,
        data : form_data,
        dataType : "json",
        contentType: false,
        cache: false,
        processData:false
    }).done(function(res){ //fetch server "json" messages when done
        if(res.type == "error"){
            $("#contact_results").html('<div class="error">'+ res.text +"</div>");
        }

        if(res.type == "done"){
            $("#contact_results").html('<div class="success">'+ res.text + res.text2 +"</div>");
            $("#contact_form #contact_body").slideUp(); //hide form after success
        }
    });
}
        });
        </script>

CONTACT_M1.php

after assigning recepient email ...
if($_POST){

    $sender_name    = filter_var($_POST["name"], FILTER_SANITIZE_STRING); //capture sender name
    $sender_email   = filter_var($_POST["email"], FILTER_SANITIZE_STRING); //capture sender email
    $country_code   = filter_var($_POST["phone1"], FILTER_SANITIZE_NUMBER_INT);
    $phone_number   = filter_var($_POST["phone2"], FILTER_SANITIZE_NUMBER_INT);
    $company        = filter_var($_POST["company"], FILTER_SANITIZE_STRING);
    $subject        = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
    $message        = filter_var($_POST["message"], FILTER_SANITIZE_STRING); //capture message     
    $link           = $_POST["subject"]; //value carried over from tester.php

...
      $headers = "From:".$from_email."\r\n".
       "Reply-To: ".$sender_email. "\n" .
        "X-Mailer: PHP/" . phpversion();
        $body = $emailText;
   }

    $sentMail = mail($recipient_email, $subject, $body, $headers);
    if($sentMail) //output success or failure messages
    {       
        print json_encode(array('type'=>'done', 'text' => 'Thank you for your email', text2 => '<a href=\testsite/manuals/'.$link.'.pdf \ target=\_blank \><br> FILE DOWNLOAD LINK: '.$link.'</a>'));
    exit;
    }else{
        print json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));  
    exit;
    }