PHP and HTML form


PHP and HTML form

我试图创建一个表单,当用户填写所有字段时向我发送电子邮件,我按照教程将其组合在一起,这样就可以工作了,但我想实现一个选项,允许人们选择其他。。。情况如下:

我有一个表格,要求你:姓名,电子邮件,类型和信息。

该类型有4个选项:Feedback、Bug Report、Feature Request和other,我希望当点击另一个单选按钮时,文本框必须有一个输入,所以他们不能通过按下other来跳过,但如果他们选择了其他不是的东西,我不希望他们必须在文本框中键入,但无论我尝试什么,它要么根本不起作用,要么即使我没有选择另一个单选按钮,也必须在文本框中输入。。。

问题已经解决,我请求这个主题保持开放,以便其他人可以继续使用这个页面,或者在我破坏了一些东西的情况下。。。谢谢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>

-提前感谢,harry

好的,所以验证在最底层。我用它来验证基本的东西。如果你访问或谷歌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>