Ajax Contact表单jquery和用于单选按钮的php验证和选择下拉列表

时间:2015-01-07 18:45:00

标签: javascript php jquery forms validation

我遇到的问题是: 1。让我的表单在提交表单之前验证是否选中了单选按钮。
2。当用户点击提交时重置表单(没有重置按钮),以便用户可以在不刷新页面的情况下提交另一个表单。

我正在尽力找到我面临的问题的解决方案,有很多教程和其他形式我可以尝试,但我想弄清楚如何使用这种特殊方法,因为这种形式对许多人来说效果很好我的项目

过去对我有用的原始表单只有姓名,电子邮件,电话和查询。但是这次我需要添加更多问题,这需要一个下拉选项和一些单选按钮。

我尽力使用在线资源和表单的原始工作来使其工作,但我无法对其进行验证。

如果填写了所有字段,表单会提交。 表单首先检查文本字段和下拉列表是否被选中,然后检查php服务器端错误,如长度,数字等 - 除了单选按钮。

我提出的单选按钮的最佳解决方案是检查字符串长度是否短于2个字母。但这不是正确的方法。

如果一个人想要多次提交查询,他们将无法使用该表格,除非刷新。

请帮助!!!

我尝试使用if(!isset ...)它没有用。 如果我尝试将新字段添加到//检查$ _POST vars已设置,如果有任何缺失则退出,表单中断! 对于其他情况,我无法在堆栈上使用大多数建议,我希望保持这种简单,而不必混合使用两种不同的表单方法。 我对编码的了解仍然很基础,所以我不知道如何解决这个问题。

jquery

            <script type="text/javascript">
            $(document).ready(function() {
                $("#submit_btn").click(function() { 
                    //collect input field values
                var user_location = $('select[name=location]').val();
                var user_chain    = $('input:radio[name=chain]:checked').val();
                var user_number   = $('input:radio[name=number]:checked').val();
                var user_first    = $('input:radio[name=first]:checked').val();
                var user_message    = $('textarea[name=message]').val();


                    //simple validation at client's end
                    //we simply change border color to red if empty field using .css()
                    var proceed = true;
                    if(user_location=="Select Country") {    
                        $('select[name=location]').css('border-color','red'); 
                        proceed = false;
                    }


                    //everything looks good! proceed...
                    if(proceed) 
                    {
                        //data to be sent to server
                        post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userLocation':user_location, 'userChain':user_chain, 'userNumber':user_number, 'userFirst':user_first, 'userMessage':user_message};

                        //Ajax post data to server
                        $.post('contact_me.php', post_data, function(data){  

                            //load success massage in #result div element, with slide effect.       
                            $("#result").hide().html('<div class="success">'+data+'</div>').slideDown();

                            //reset values in all input fields
                            $('#contact_form input').val(''); 
                            $('#contact_form textarea').val('');
                    $('#contact_form select').val(''); 
                            $('#contact_form input[type:radio]').val('');

                        }).fail(function(err) {  //load any error data
                            $("#result").hide().html('<div class="error">'+err.statusText+'</div>').slideDown();
                        }); 
                    }

                });

                //reset previously set border colors and hide all message on .keyup()
                $("#contact_form input, #contact_form textarea, #contact_form select").keyup(function() { 
                    $("#contact_form input, #contact_form textarea, #contact_form select").css('border-color',''); 
                    $("#result").slideUp();
                });

            });
            </script>

PHP服务器端

            <?php
            if($_POST)
            {
                //check if its an ajax request, exit if not
                if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
                    die();
                } 

                $to_Email       = "xyz@gmail.com"; //Replace with recipient email address
                $subject        = 'Enquiry for Contract Packaging'; //Subject line for emails

                //check $_POST vars are set, exit if any missing
                if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userPhone"]) || !isset($_POST["userMessage"]))
                {
                    die();
                }

                //Sanitize input data using PHP filter_var().
                $user_Location    = filter_var($_POST["userLocation"], FILTER_SANITIZE_STRING);
                $user_Chain       = filter_var($_POST["userChain"], FILTER_SANITIZE_STRING);
                $user_Number      = filter_var($_POST["userNumber"], FILTER_SANITIZE_STRING);
                $user_First       = filter_var($_POST["userFirst"], FILTER_SANITIZE_STRING);
                $user_bodymessage ="NAME: ".$user_Name."\n\n";
                $user_bodymessage.="EMAIL: ".$user_Email."\n\n";
                $user_bodymessage.="PHONE: ".$user_Phone."\n\n";
                $user_bodymessage.="LOCATION: ".$user_Location."\n\n";
                $user_bodymessage.="CHAIN: ".$user_Chain."\n\n";
                $user_bodymessage.="QUANTITY: ".$user_Number."\n\n";
                $user_bodymessage.="FIRST TIME: ".$user_First."\n\n";
                $user_bodymessage.="ENQUIRY: ".$user_Message."\n\n";


                //additional php validation
                if(strlen($user_Name)<3) // If length is less than 4 it will throw an HTTP error.
                {
                    header('HTTP/1.1 500 Name is too short or empty!');
                    exit();
                }
                if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
                {
                    header('HTTP/1.1 500 Please enter a valid email!');
                    exit();
                }
                if(!is_numeric($user_Phone)) //check entered data is numbers
                {
                    header('HTTP/1.1 500 Only numbers allowed in phone field');
                    exit();
                }
                if(strlen($user_Chain)<2) // If length is less than 4 it will throw an HTTP error.
                {
                    header('HTTP/1.1 500 Have you missed a few questions?');
                    exit();
                }
                if(strlen($user_Message)<5) //check emtpy message
                {
                    header('HTTP/1.1 500 Too short message! Please enter something.');
                    exit();
                }

0 个答案:

没有答案