我如何將驗證和郵件代碼更改爲接受下拉框而不是輸入字段？

-2

我想要做的是將靜態電子郵件的表單從一個下拉框中更改爲只能使用名爲主題的新字段選擇預先生成的主題。我如何將驗證和郵件代碼更改爲接受下拉框而不是輸入字段？

即銷售，評論，反饋諸如此類

我的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 haviour 
    // 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("</pre> 
<div class="alert alert-success">"); 
$('#success > .alert-success').html("<button class="close" type="button" data-  dismiss="alert">×") 
.append("</button>"); 
$('#success > .alert-success') 
.append("<strong>Your message has been sent. </strong>"); 
$('#success > .alert-success') 
.append('</div> 
<pre> 
'); 

     //clear all fields 
     $('#contactForm').trigger("reset"); 
     }, 
    error: function() { 
    // Fail message 
    $('#success').html("</pre> 
<div class="alert alert-danger">"); 
$('#success > .alert-danger').html("<button class="close" type="button" data-dismiss="alert">×") 
.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:[email protected]?Subject=Message_Me">[email protected]</a> ? Sorry for the inconvenience!"); 
$('#success > .alert-danger').append('</div> 
<pre> 
'); 
    //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 = '[email protected]'; 
    // put your email 
$email_subject = "Contact form submitted by: $name"; $email_body = "You have received a new message. \n\n".     
       " Here are the details:\n \nName: $name \n ".     
       "Email: $email_address\n Message \n $message"; 
$headers = "From: [email protected]\n"; 
$headers .= "Reply-To: $email_address";  

mail($to,$email_subject,$email_body,$headers); return true;    
?>

來源

2014-09-06 user2513718

爲什麼不使用簡單的選擇選項並通過提交的'$ _POST'變量（即'$ _POST ['subject']'）來訪問它？ http://jsfiddle.net/ru1beLwm/ – Giorgio 2014-09-06 11:51:06

假設你正在使用類似的 '聯繫表' 內部 'UI組件' 從這裏https://github.com/myprogrammingblog/myprogrammingblog.com。你可以下載它。

這裏在html文件中，我在電子郵件字段後添加了主題字段。

<!DOCTYPE html> 
<html lang="eng"> 
<head> 
<title>Contact form for your site by Anatoly Spektor</title> 
<!-- Bootstrap CSS --> 
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen"> 
</head> 
<body> 
<br /> 
<!-- a row has to be in a container --> 
<div class="container"> 
<!-- Contacts --> 
<div id="contacts"> 
<div class="row"> 
<!-- Alignment --> 
<div class="col-sm-offset-3 col-sm-6"> 
    <!-- Form itself --> 
     <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"> 
     <select name="subject" class="form-control" 
         id="subject" required 
        data-validation-required-message="Please select sublect"> 
        <option value "">Choose subject</option> 
     <option>sales</option>  
     <option>Comment</option>  
       </select> 
    </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> 
    </div> 
</div> 
</div> 
</div> 


<!-- JS FILES --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</script> 
<script src="./js/bootstrap.min.js"></script> 
<script src="./js/jqBootstrapValidation.js"></script> 
<script src="./js/contact_me.js"></script> 

</body> 
</html>

，我已經改變了JavaScript文件與受外地工作

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

$("input,select,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 subject = $("select#subject").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, subject: subject}, 
      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:[email protected]?Subject=Message_Me from 
    myprogrammingblog.com'>[email protected]</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文件，你應該改變電子郵件addesses爲您的需要。

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

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

// create email body and send it  
$to = '[email protected]'; // put your email 
$email_subject = "$subject"; 
$email_body = "You have received a new message. \n\n". 
      " Here are the details:\n \nName: $name \n ". 
       "Email: $email_address\n Message \n $message"; 
$headers = "From: [email protected]\n"; 
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers); 
return true;    
?>

來源

2014-09-06 12:20:26

你能告訴我，在代碼中，我仍然在學習js。謝謝 – user2513718 2014-09-06 13:00:55

我已經更新了我的答案，請看一看，讓我知道它是否適合你。 – 2014-09-06 14:30:40

我修改了代碼以更新爲lates bootstrap作爲控件組和控件折舊。非常感謝你，我會緊張地研究這個。 – user2513718 2014-09-06 16:28:33

我如何將驗證和郵件代碼更改爲接受下拉框而不是輸入字段？

回答

相關問題