PHP 和 HTML 表单

Question

我正在尝试创建一个表单，以便在用户填写所有字段时向我发送电子邮件，我按照教程将它放在一起，所以有什么用，但我想实现一个允许人们选择其他的选项.. . 事情是这样的：

我有一个表格要求您提供：姓名、电子邮件、类型和消息。

该类型有 4 个选项：反馈、错误报告、功能请求和其他，我希望当单击其他单选按钮时文本框必须有输入，所以他们不能通过按其他来跳过，但是如果他们选择了其他的东西，那么我不希望他们必须在文本框中输入，但无论我尝试什么，它要么根本不起作用，要么必须在文本框中输入，即使我没有选择其他单选按钮...

问题已解决，我请求该主题保持打开状态，以便其他人可以继续使用此页面，或者以防我破坏某些内容...感谢 Rasclatt，您的帮助真是太棒了 :)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<link href="contact/css/contactForm.css" rel="stylesheet">
<title>Contact Us</title>
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
    <?php
    print_r($_POST); 
            // This is where you process the email and display the thank you page
            $to      = 'harryfelton12@gmail.com';
            $subject = 'ALERT! Website Form Submission';
            $message = 'Users Email: '.strip_tags($_POST['Email'])."\n";
            $message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
            $message .= 'Message Type: '.strip_tags($_POST['Type'])."\n";
            $headers = 'From: harrywebsite@form.com' . "\r\n" .
                'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
            // If the mail is successful, display thanks or display failed
            ?>
            <?php if(mail($to, $subject, $message, $headers)): ?>
                // Display the thank you page }
                <div id="comments_form">
                  <h2 style="size:35px;">Thanks For Your Message!</h2>          
                  <p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Will Be Redirected Shortly!</p>           
                  <p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">Expect your message to be responded to within 2 working days</p>
                    <script type="text/javascript">
                      setTimeout('redirectPage()', 3000)
                        function redirectPage() {
                            location.href="index.html"  
                        };
                </script>
            <?php else: ?>
              <div id="comments_form">
                <h2 style="size:35px;">Uh Oh! Your Message Could Not Be Sent</h2>           
                <p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">An Unexpected Error Occured While Trying To Send Your Message</p>           
                <p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Are Being Redirected To The Home Page</p>
                  <script type="text/javascript">
                    setTimeout('redirectPage()', 3000)
                      function redirectPage() {
                        location.href="index.html"  
                       };
                </script>
            <?php endif ?>
    </div>
<?php  else: ?>
<form method="post" id="comments_form">
    <div class="row">
        <div class="label">
            Your Name
        </div>
        <!--.label end-->
        <div class="input">
            <input type="text" id="fullname" class="detail" name="Name"
                value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
            <?php if(in_array('Name', $validation)): ?>
            <span class="error"><?php echo $error_messages['Name']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            e.g. John Smith or Jane Doe
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Your Email
        </div>
        <!--.label end-->
        <div class="input">
            <input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
            <?php if(in_array('Email', $validation)): ?>
            <span class="error"><?php echo $error_messages['Email']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            We wont spam you! We only need this to reply to questions you might pose
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Type Of Message
        </div>
        <!--.label end-->
        <div class="input">
            <input type="radio" name="Type" onChange="GetValue(this)"  value="Feedback" checked="checked" /> 
            Feedback <br />
            <input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
            Feature Request<br>
            <input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
            Bug Report<br>
            <input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
            Other<br />
          <input type="text" style="display:none;" id="option" name="Type" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'option')? 'checked="checked"' : ''; ?> />
          <?php if(in_array('Type', $validation)): ?>
            <span class="error"> <?php echo $error_messages['Type']; ?> </span>
          <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            This is to help us better respond to your message
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Your Message
        </div>
        <!--.label end-->
        <div class="input2">
            <textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
            <?php if(in_array('Comment', $validation)): ?>
            <span class="error"><?php echo $error_messages['Comment']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
    </div>
    <!--.row end-->

    <div class="submit">
        <input type="submit" id="submit" name="Submit" value="Send Message" />
    </div>
</form>
<?php endif; ?>
<script>
    // This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
    var Writing = $(ThisVal).val();
    // This just shows you what is happening via the feedback div
    $('#feederback').html(Writing);
    if (Writing == 'Other') {
        // If other, disable the submit
        $("#submit").prop("disabled", true);
        // Fade in the message textarea
        $('#option').fadeIn('fast');
        // Check the message area to see if there is text in it already.
        // If there is text enable the submit button
        CheckVal();
    } else {
        // If not other, fade out the message
        $('#option').fadeOut('fast');
        // Enable the submit button
        $('#submit').prop("disabled", false);
    }
}

function CheckVal() {
    var SetMess = $('#option').val();
    $('#feedback').html(SetMess);

    if (SetMess !== '')  {
            $('#submit').prop('disabled', false);
        }
    else {
            $('#submit').prop('disabled', true);
        }
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
    CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
    CheckVal();
});

        $(document).ready(function() {
            // validate form
            $("#comments_form").validate({
                // This will allow you to extend the validator functions
                invalidHandler: 
                        function(form, validator) {
                          //  $("#get_online").val("CHECK");
                    },
                rules: {
                    // For every named input that you want to validate,
                    // you create a little set of prefs
                    Name: {
                        required: true,
                    },
                    Email: {
                                required: true,
                                email: true
                            },

                    Type: { required: true },
                    Comment: { required: true },
                    },
                messages: {
                        // Here are just the custom messages you can modify per field
                        Name: {
                                required: 'Please Enter Your Name', 
                            },
                        Email: {
                                required: 'Please Enter An Email',
                                email: 'Email address not valid',
                            },
                        Type: { required: 'Please Select A Type' },
                        Comment: { required: 'Please Enter A Message'},
                    },
            });
        });
</script>

-先谢谢了，哈利

Answer 1

好的，因此验证位于最底部。我有它验证基本的东西。如果您访问或 google jQuery 验证，您可以看到如何验证不同的字段。这很容易。确保在您的 PHP 中过滤 (strip_tags()) 输入，以免被黑客入侵。

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<link href="contact/css/contactForm.css" rel="stylesheet">
<title>Contact Us</title>
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
    <?php
    print_r($_POST); 
            // This is where you process the email and display the thank you page
            $to      = 'harryfelton12@gmail.com';
            $subject = 'ALERT! Website Form Submission';
            $message = 'Users Email: '.strip_tags($_POST['Email'])."\n";
            $message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
            $message .= 'Message Type: ';
            $message .= ($_POST['Type'] !== 'Option')? $_POST['Type']."\n": strip_tags($_POST['option'])."\n";
            $headers = 'From: harrywebsite@form.com' . "\r\n" .
                'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
            // If the mail is successful, display thanks or display failed
            ?>
            <?php if(mail($to, $subject, $message, $headers)): ?>
                // Display the thank you page }
                <div id="comments_form">
                  <h2 style="size:35px;">Thanks For Your Message!</h2>          
                  <p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Will Be Redirected Shortly!</p>           
                  <p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">Expect your message to be responded to within 2 working days</p>
                    <script type="text/javascript">
                      setTimeout('redirectPage()', 3000)
                        function redirectPage() {
                            location.href="index.html"  
                        };
                </script>
            <?php else: ?>
              <div id="comments_form">
                <h2 style="size:35px;">Uh Oh! Your Message Could Not Be Sent</h2>           
                <p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">An Unexpected Error Occured While Trying To Send Your Message</p>           
                <p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Are Being Redirected To The Home Page</p>
                  <script type="text/javascript">
                    setTimeout('redirectPage()', 3000)
                      function redirectPage() {
                        location.href="index.html"  
                       };
                </script>
            <?php endif ?>
    </div>
<?php  else: ?>
<form method="post" id="comments_form">
    <div class="row">
        <div class="label">
            Your Name
        </div>
        <!--.label end-->
        <div class="input">
            <input type="text" id="fullname" class="detail" name="Name"
                value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
            <?php if(in_array('Name', $validation)): ?>
            <span class="error"><?php echo $error_messages['Name']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            e.g. John Smith or Jane Doe
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Your Email
        </div>
        <!--.label end-->
        <div class="input">
            <input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
            <?php if(in_array('Email', $validation)): ?>
            <span class="error"><?php echo $error_messages['Email']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            We wont spam you! We only need this to reply to questions you might pose
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Type Of Message
        </div>
        <!--.label end-->
        <div class="input">
            <input type="radio" name="Type" onChange="GetValue(this)"  value="Feedback" checked="checked" /> 
            Feedback <br />
            <input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
            Feature Request<br>
            <input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
            Bug Report<br>
            <input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
            Other<br />
          <input type="text" style="display:none;" id="option" name="option" <?php echo (isset($_POST['option']))? $_POST['option']: ''; ?> />
          <?php if(in_array('Type', $validation)): ?>
            <span class="error"> <?php echo $error_messages['Type']; ?> </span>
          <?php endif; ?>
        </div>
        <!--.input end-->
        <div class="context">
            This is to help us better respond to your message
        </div>
        <!--end .context-->
    </div>
    <!--.row end-->

    <div class="row">
        <div class="label">
            Your Message
        </div>
        <!--.label end-->
        <div class="input2">
            <textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
            <?php if(in_array('Comment', $validation)): ?>
            <span class="error"><?php echo $error_messages['Comment']; ?></span>
            <?php endif; ?>
        </div>
        <!--.input end-->
    </div>
    <!--.row end-->

    <div class="submit">
        <input type="submit" id="submit" name="Submit" value="Send Message" />
    </div>
</form>
<?php endif; ?>
<script>
    // This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
    var Writing = $(ThisVal).val();
    // This just shows you what is happening via the feedback div
    $('#feederback').html(Writing);
    if (Writing == 'Other') {
        // If other, disable the submit
        $("#submit").prop("disabled", true);
        // Fade in the message textarea
        $('#option').fadeIn('fast');
        // Check the message area to see if there is text in it already.
        // If there is text enable the submit button
        CheckVal();
    } else {
        // If not other, fade out the message
        $('#option').fadeOut('fast');
        // Enable the submit button
        $('#submit').prop("disabled", false);
    }
}

function CheckVal() {
    var SetMess = $('#option').val();
    $('#feedback').html(SetMess);

    if (SetMess !== '')  {
            $('#submit').prop('disabled', false);
        }
    else {
            $('#submit').prop('disabled', true);
        }
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
    CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
    CheckVal();
});

        $(document).ready(function() {
            // validate form
            $("#comments_form").validate({
                // This will allow you to extend the validator functions
                invalidHandler: 
                        function(form, validator) {
                          //  $("#get_online").val("CHECK");
                    },
                rules: {
                    // For every named input that you want to validate,
                    // you create a little set of prefs
                    Name: {
                        required: true,
                    },
                    Email: {
                                required: true,
                                email: true
                            },

                    Type: { required: true },
                    Comment: { required: true },
                    },
                messages: {
                        // Here are just the custom messages you can modify per field
                        Name: {
                                required: 'Please Enter Your Name', 
                            },
                        Email: {
                                required: 'Please Enter An Email',
                                email: 'Email address not valid',
                            },
                        Type: { required: 'Please Select A Type' },
                        Comment: { required: 'Please Enter A Message'},
                    },
            });
        });
</script>