2017-01-27 11 views
0

連絡先フォームを選択メニューから送信するようにしようとしています。入力データはすべて(名前、電話番号、メールアドレス、郊外、ポストコード)送信していますが、選択オプション(状態)は送信していません。私はまた、選択クラスを変更しようとしましたが、これはうまくいきませんでした。連絡先フォームでselectpickerデータを送信する方法

編集:私は変更しようとしました:へ

var state = $(".selectpicker#state").val(); 

<form name="sentMessage" id="contactForm" novalidate> 
         <div class="row"> 
          <div class="col-md-6"> 

           <div class="form-group"> 
            <input type="name" class="form-control" placeholder="Your Name *" name="name" id="name" required data-validation-required-message="Please enter your name."> 
            <p class="help-block text-danger"></p> 
           </div> 

           <div class="form-group"> 
            <input type="phone" class="form-control" placeholder="Your Phone Number *" name="phone" id="phone" required data-validation-required-message="Please enter your phone number."> 
            <p class="help-block text-danger"></p> 
           </div> 

           <div class="form-group"> 
            <input type="email" class="form-control" placeholder="Your Email *" name="email" id="email" required data-validation-required-message="Please enter your email address."> 
            <p class="help-block text-danger"></p> 
           </div> 

            <div class="form-group"> 
            <input type="text" class="form-control" name="suburb" placeholder="Your Suburb *" id="suburb" required data-validation-required-message="Please enter your address."> 
            <p class="help-block text-danger"></p> 
           </div> 

           <div class="select"> 
           <div class="col-sm-6"> 
           <div class="form-group"> 
        <select class="selectpicker" name="state" id="state" data-width="100%" data-height="100%" title="Choose State *" data-style="btn-primary">    
         <option value="QLD">QLD</option> 
         <option value="NSW">NSW</option> 
       </select> 
       </div>  
        </div> 
        </div> 

           <div class="right-form-column"> 
           <div class="col-sm-6"> 
           <div class="form-group"> 
            <input type="number" class="form-control" name="postcode" placeholder="Post Code *" id="postcode" required data-validation-required-message="Please enter your post code."> 
            <p class="help-block text-danger"></p> 
           </div>            
           </div> 
        </div>                       
        </div> 
</form> 

はJavaScript:ここ

を働いていない

var state = $("select#state").val(); 

はHTMLです:

$(function() { 

    $("input,textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     }, 
     submitSuccess: function($form, event) { 
      // Prevent spam click and default submit behaviour 
      $("#btnSubmit").attr("disabled", true); 
      event.preventDefault(); 

      // get values from FORM 
      var name = $("input#name").val(); 
      var email = $("input#email").val(); 
      var phone = $("input#phone").val(); 
      var suburb = $("input#suburb").val(); 
      var state = $(".selectpicker#state").val(); 
      var postcode = $("input#postcode").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: "././mail/contact_me.php", 
       type: "GET", 
       data: { 
        name: name, 
        phone: phone, 
        email: email, 
        suburb: suburb, 
        state: state, 
        postcode: postcode, 
        message: message 
       }, 
       cache: false, 
       success: function() { 
        // Enable button & show success message 
        $("#btnSubmit").attr("disabled", false); 
        $('#success').html("<div class='alert alert-success'>"); 
        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") 
         .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'>×") 
         .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#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($_GET['name'])  || 
    empty($_GET['phone'])  || 
    empty($_GET['email'])  || 
    empty($_GET['suburb'])  || 
    empty($_GET['state'])  || 
    empty($_GET['postcode'])  || 
    empty($_GET['message']) || 
    !filter_var($_GET['email'],FILTER_VALIDATE_EMAIL)) 
    { 
    echo "No arguments Provided!"; 
    return false; 
    } 

$name = $_GET['name']; 
$phone = $_GET['phone']; 
$email_address = $_GET['email']; 
$suburb = $_GET['suburb']; 
$state = $_GET['state']; 
$postcode = $_GET['postcode']; 
$message = $_GET['message']; 

// create email body and send it  
$to = '[email protected]'; // PUT YOUR EMAIL ADDRESS HERE 
$email_subject = "P Services Contact Form: $name"; // EDIT THE EMAIL SUBJECT LINE HERE 
$email_body = "You have received a new message. \n\n".     
        " Here are the details:\n \nName: $name \n ".     
        "Email: $email_address\n Suburb: $suburb\n State: $state\n Post Code: $postcode\n Message \n $message"; 
$headers = "From: [email protected]\n"; 
$headers .= "Reply-To: $email_address"; 
if(mail($to,$email_subject,$email_body,$headers)){ 
echo "Mail sent successfully."; 
} 
else{ echo "Error."; 
}   
?> 

答えて

0

のtry変更

var state = $(".selectpicker#state").val(); 

へ:

var state = $("select#state").val(); 
+0

残念ながらいいです。 – amg63

0

あなたが選択したオプションの値を取得したい場合は、これを試してみてください。

var state = document.getElementById("state"); 
var selectedUser= state.options[state.selectedIndex].value; 

幸運。

関連する問題