将<option>所选属性添加到php联系表单并进行验证

时间:2015-07-12 21:29:55

标签: php jquery

我需要一点帮助,通过验证为简单的联系表单创建一个php代码。到目前为止,它按预期工作,但我无法添加2个选定的属性才能正常工作。

HTML代码

<form name="sentMessage" class="well" id="contactForm"  novalidate>
       <legend>Contact me</legend>
     <div class="control-group">
                <div class="controls">
        <input type="text" class="form-control" 
               placeholder="Full Name" id="name" required
                   data-validation-required-message="Please enter your name" />
          <p class="help-block"></p>
       </div>
         </div>     
            <div class="control-group">
              <div class="controls">
        <input type="email" class="form-control" placeholder="Email" 
                        id="email" required
                   data-validation-required-message="Please enter your email" />
    </div>
    </div>  

           <div class="control-group">
             <div class="controls">
             <textarea rows="10" cols="100" class="form-control" 
                   placeholder="Message" id="message" required
           data-validation-required-message="Please enter your message" minlength="5" 
                   data-validation-minlength-message="Min 5 characters" 
                    maxlength="999" style="resize:none"></textarea>
    </div>
           </div>        
     <div id="success"> </div> <!-- For success/fail messages -->
    <button type="submit" class="btn btn-primary pull-right">Send</button><br />
      </form>

Js代码

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs 
  */
$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
     submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
       // get values from FORM
       var name = $("input#name").val();  
       var email = $("input#email").val(); 
       var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
       firstName = name.split(' ').slice(0, -1).join(' ');
         }        
     $.ajax({
                url: "./bin/contact_me.php",
                type: "POST",
                data: {name: name, email: email, message: message},
                cache: false,
                success: function() {  
                // Success message
                   $('#success').html("<div class='alert alert-success'>");
                   $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append( "</button>");
                  $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
          $('#success > .alert-success')
            .append('</div>');

          //clear all fields
          $('#contactForm').trigger("reset");
          },
       error: function() {      
        // Fail message
         $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                 .append( "</button>");
                $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='mailto:me@example.com?Subject=Message_Me from myprogrammingblog.com'>me@example.com</a> ? Sorry for the inconvenience!");
            $('#success > .alert-danger').append('</div>');
        //clear all fields
        $('#contactForm').trigger("reset");
        },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });

      $("a[data-toggle=\"tab\"]").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show");
        });
  });


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() {
     $('#success').html('');
  });

最后PHP如下

<?php
// check if fields passed are empty
if(empty($_POST['name'])        ||
   empty($_POST['email'])       ||
   empty($_POST['message']) ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

// create email body and send it    
$to = 'receipt@gmail.com'; // put your email
$email_subject = "Contact form submitted by:  $name";
$email_body = "You have received a new message. Here are the details:\n \n".
                  "Name: $name \n".
                  "Email: $email_address \n".
                  "Message: \n \n $message";
$headers = "From: contacts@myprogrammingblog.com\n";
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
return true;            
?>

1 个答案:

答案 0 :(得分:0)

下拉菜单在HTML中显示如下:

<select name="dropdown" id="dropdown">
    <option value="" selected style="display:none;">-- Choose from this list --</option>
    <option value="value1">This is value 1</option>
    <option value="value2">This is value 2</option>
    <option value="value3">This is value 3</option>
</select>

要获取在PHP中选择的值,请运行此POST:

$dropdown= $_POST["dropdown"];
PHP中的

$dropdown将返回HTML表单中的值(因此在这种情况下,“value1”,value2“或”value3“)。