單選按鈕php POST

Question

我正在嘗試爲我的網站創建一個反饋表單，這個表單有單選按鈕供人們排列他們的體驗。

我已經看過堆棧溢出的各種選項來幫助，但我找不到任何有用的東西。像其他形式一樣，像名字這樣的基本名字也起作用。我不能讓單選按鈕提交信息。

當我填寫表格，然後點擊提交，沒有任何反應，但我的網址更改www.whateversite.com?xxx_the_options_selected_on_the_form

任何幫助，因爲在那裏我出了問題或如何解決此問題，將不勝感激。

這是我目前的HTML - 我試圖儘可能清理它並整齊地呈現它。

<form id="feedback-form" name="feedback-form" role="form"> 
      <p>Please rate the following - with 5 being the 
      best</p><label for="exp">Overall Experience:</label> 
      <div class="radio"> 
        <label class="radio-inline" for="exp1"> 
        <input id="exp1" name="exp" type="radio" value="option1">1 
        </label> 
        <label class="radio-inline" for="exp2"> 
        <input id="exp2" name="exp" type="radio" value="option2">2 
        </label> 
        <label class="radio-inline" for="exp3"> 
        <input id="exp3" name="exp" type="radio" value="option3">3 
        </label> 
        <label class="radio-inline" for="exp4"> 
        <input id="exp4" name="exp" type="radio" value="option4">4 
        </label> 
        <label class="radio-inline" for="exp5"> 
        <input id="exp5" name="exp" type="radio" value="option5">5 
        </label> 
      </div><label for="staf">Friendliness of Staff:</label> 
      <div class="radio"> 
        <label class="radio-inline" for="staf1"><input id= 
        "staf1" name="staf" type="radio" value= 
        "option1">1</label> <label class="radio-inline" for= 
        "staf2"><input id="staf2" name="staf" type="radio" 
        value="option2">2</label> <label class="radio-inline" 
        for="staf3"><input id="staf3" name="staf" type="radio" 
        value="option3">3</label> <label class="radio-inline" 
        for="staf4"><input id="staf4" name="staf" type="radio" 
        value="option4">4</label> <label class="radio-inline" 
        for="staf5"><input id="staf5" name="staf" type="radio" 
        value="option5">5</label> 
      </div><label for="clean">Cleanliness of facility:</label> 
      <div class="radio"> 
        <label class="radio-inline" for="clean1"><input id= 
        "clean1" name="clean" type="radio" value= 
        "option1">1</label> <label class="radio-inline" for= 
        "clean2"><input id="clean2" name="clean" type="radio" 
        value="option2">2</label> <label class="radio-inline" 
        for="clean3"><input id="clean3" name="clean" type= 
        "radio" value="option3">3</label> <label class= 
        "radio-inline" for="clean4"><input id="clean4" name= 
        "clean" type="radio" value="option4">4</label> 
        <label class="radio-inline" for="clean5"><input id= 
        "clean5" name="clean" type="radio" value= 
        "option5">5</label> 
      </div><label for="refer">Would you refer a friend?</label> 
      <div class="radio"> 
        <label class="radio-inline" for="refer1"><input id= 
        "refer1" name="refer" type="radio" value= 
        "option1">1</label> <label class="radio-inline" for= 
        "refer2"><input id="refer2" name="refer" type="radio" 
        value="option2">2</label> <label class="radio-inline" 
        for="refer3"><input id="refer3" name="refer" type= 
        "radio" value="option3">3</label> <label class= 
        "radio-inline" for="refer4"><input id="refer4" name= 
        "refer" type="radio" value="option4">4</label> 
        <label class="radio-inline" for="refer5"><input id= 
        "refer4" name="refer" type="radio" value= 
        "option5">5</label> 
      </div><br> 
      <div class="form-group has-feedback"> 
        <p>If you would like our manager to contact you please 
        provide the following information:</p><label for= 
        "name">Full Name*</label> <input class="form-control" 
        id="name" name="name" placeholder="Your Full Name" 
        type="text"> <i class= 
        "fa fa-user form-control-feedback"></i> 
      </div> 
      <div class="form-group has-feedback"> 
        <label for="email">Email*</label> <input class= 
        "form-control" id="email" name="email" placeholder= 
        "e.g. someone@mail.com" type="email"> <i class= 
        "fa fa-envelope form-control-feedback"></i> 
      </div> 
      <div class="form-group has-feedback"> 
        <label for="phone">Contact Number*</label> 
        <input class="form-control" id="phone" name="phone" 
        placeholder="0400000000" type="phone"> <i class= 
        "fa fa-phone form-control-feedback"></i> 
      </div> 
      <div class="form-group"> 
        <label for="subject">Please share your thoughts on how 
        we may improve your experience</label> <input class= 
        "form-control" id="subject" name="subject" placeholder= 
        "Please leave your thoughts here..." type="text"> 
        <i class="fa fa-navicon form-control-feedback"></i> 
      </div><input class="btn btn-default" type="submit" value= 
      "Submit"> 
    </form> 

我目前的PHP是

<?php 
session_cache_limiter('nocache'); 
header('Expires: ' . gmdate('r', 0)); 

header('Content-type: application/json'); 

// Enter your email address below. 
$to = 'smile@smilehawthorn.com.au'; 

$subject = 'Website Feedback Received'; 

if($to) { 
    $name = $_POST['name']; 
    $email = $_POST['email']; 

    $fields = array(
        0 => array(
         'text' => 'Name', 
         'val' => $_POST['name']), 
        1 => array(
         'text' => 'Email address', 
         'val' => $_POST['email']), 
        2 => array(
         'text' => 'Contact Number', 
         'val' => $_POST['phone']), 
        3 => array(
         $exp => $_POST['exp']), 
        4 => array(
         $staf => $_POST['staf']), 
        5 => array(
         $clean => $_POST['clean']), 
        6 => array(
         $refer => $_POST['refer']), 
        7 => array(
         'text' => 'Subject', 
         'val' => $_POST['subject']) 
       ); 

    $message = ""; 

    foreach($fields as $field) { 
     $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n"; 
    } 

    $headers = ''; 
    $headers .= 'From: ' . $name . ' <' . $email . '>' . "\r\n"; 
    $headers .= "Reply-To: " . $email . "\r\n"; 
    $headers .= "MIME-Version: 1.0\r\n"; 
    $headers .= "Content-Type: text/html; charset=UTF-8\r\n"; 

    if (mail($to, $subject, $message, $headers)){ 
     $arrResult = array ('response'=>'success'); 
    } else{ 
     $arrResult = array ('response'=>'error'); 
    } 

    echo json_encode($arrResult); 

} else { 

    $arrResult = array ('response'=>'error'); 
    echo json_encode($arrResult); 
} 
?> 

最後，檢查反饋爲必填字段

// feedback forms validation 
    //-----------------------------------------------  
    if($("#feedback-form").length>0) { 
     $("#feedback-form").validate({ 
      submitHandler: function(form) { 

       var submitButton = $(this.submitButton); 
       submitButton.button("loading"); 

       $.ajax({ 
        type: "POST", 
        url: "php/feedback-form.php", 
        data: { 
         "name": $("#feedback-form #name").val(), 
         "phone": $("#feedback-form #phone").val(), 
         "email": $("#feedback-form #email").val(), 
         "exp": $("#feedback-form #exp").val(), 
         "staf": $("#feedback-form #staf").val(), 
         "clean": $("#feedback-form #clean").val(), 
         "refer": $("#feedback-form #refer").val(), 
         "subject": $("#feedback-form #subject").val() 
        }, 
        dataType: "json", 
        success: function (data) { 
         if (data.response == "success") { 

          $("#contactSuccess").removeClass("hidden"); 
          $("#contactError").addClass("hidden"); 

          // Reset Form 
          $("#feedback-form .form-control") 
           .val("") 
           .blur() 
           .parent() 
           .removeClass("has-success") 
           .removeClass("has-error") 
           .find("label") 
           .removeClass("hide") 
           .parent() 
           .find("span.error") 
           .remove(); 

          if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){ 
           $("html, body").animate({ 
            scrollTop: $("#contactSuccess").offset().top - 80 
           }, 300); 
          } 

         } else { 

          $("#contactError").removeClass("hidden"); 
          $("#contactSuccess").addClass("hidden"); 

          if(($("#contactError").position().top - 80) < $(window).scrollTop()){ 
           $("html, body").animate({ 
            scrollTop: $("#contactError").offset().top - 80 
           }, 300); 
          } 

         } 
        }, 
        complete: function() { 
         submitButton.button("reset"); 
        } 
       }); 
      },    
      // debug: true, 
      errorPlacement: function(error, element) { 
       error.insertBefore(element); 
      }, 
      onkeyup: false, 
      onclick: false, 
      rules: { 
       name: { 
        required: true, 
        minlength: 2 
       }, 
       phone: { 
        required: true, 
        minlength: 10 
       }, 
       email: { 
        required: true, 
        email: true 
       } 
      }, 
      messages: { 
       name: { 
        required: "Please specify your name", 
        minlength: "Your name must be longer than 2 characters" 
       }, 
       phone: { 
        required: "We need your phone number to contact you if required", 
        email: "Please enter a valid contact number 0401001002 or 0390909090" 
       }, 
       email: { 
        required: "We need your email address to contact you", 
        email: "Please enter a valid email address e.g. name@domain.com" 
       }    
      }, 
      errorElement: "span", 
      highlight: function (element) { 
       $(element).parent().removeClass("has-success").addClass("has-error"); 
       $(element).siblings("label").addClass("hide"); 
      }, 
      success: function (element) { 
       $(element).parent().removeClass("has-error").addClass("has-success"); 
       $(element).siblings("label").removeClass("hide"); 
      } 
     }); 
    };  
    //end feedback form 

提前感謝的JS。

Answer 1

如果您正在使用jQuerys AJAX功能發送表單，而不是天然形式標籤使用該工具來獲取選定的單選按鈕（例如爲參考）：

$("input[name='refer']:checked").val() 

Answer 2

因爲我猜你想要的選項值的範圍從行，讓說，1 - 5，其中1是一個可怕的經驗和5是驚人的，我可能會是這樣做的：

HTML：

<form action="page-goes-here" method="POST"> 
    <p> 
    Please rate your experience (1 = horrible, 5 = amazing) 
    </p> 
    <ul class="myList"> 
    <li>1</li> 
    <li><input type="radio" name="userExperience" value="1" /></li> 
    <li><input type="radio" name="userExperience" value="2" /></li> 
    <li><input type="radio" name="userExperience" value="3" /></li> 
    <li><input type="radio" name="userExperience" value="4" /></li> 
    <li><input type="radio" name="userExperience" value="5" /></li> 
    <li>5</li> 
    </ul> 
    <input type="submit" name="submitExperience" value="Submit" /> 
</form> 
<hr /> 

CSS：

.myList li { 
    list-style-type: none; 
    display: inline-table; 
} 

PHP：

if(isset($_POST["submitExperience"])) { 

    $userExperience = $_POST["userExperience"]; // This variable should now contain a value between 1-5, depending on what the user chose 

}