Моя форма всегда отправляет первый вариант

Question

У меня очень простая HTML-форма. Форма связана с файлом PHP, поэтому он отправляет мне результаты по электронной почте. Но у меня проблема с переключателями. Независимо от того, какой переключатель выбран пользователем, в письме всегда указывается, что пользователь выбрал первый переключатель.

Я провел некоторое исследование, и я думаю, что мне нужно написать «echo $ gender»; в файле PHP где-то. Я пробовал это, и Dreamweaver всегда отмечает это как синтаксическую ошибку.

Здесь важно код:

HTML:

<form> 
<input type="radio" name="gender" id="gender" value="female" /> Female<br> 
<input type="radio" name="gender" id="gender" value="male" checked /> Male<br> 
</form> 

Javascript:

$(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 gender = $("input#gender").val(); 

     $.ajax({ 
      url: "././mail/contact_me.php", 
      type: "POST", 
      data: {gender: gender}, 
      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'>&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, 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"); 
}); 
}); 

PHP:

<?php 
$gender = $_POST['gender']; 
// Create the email and send the message 
$to = 'me@myemailaddress.com'; 
$email_subject = "New message from contact form"; 
$email_body = "Gender: $gender \n\nPress 'reply' to respond to the sender."; 
$headers = "From: me@myemailaddress\n"; 
return true;    
?> 

Answer 1

Я думаю, вы имели в виду jQuery вместо PHP. Кроме того, что вы ищете:

<form> 
    <input type="radio" name="gender" class="gender" value="female" /> Female<br> 
    <input type="radio" name="gender" class="gender" value="male" checked /> Male<br> 
</form> 

var gender = $("input.gender:checked").val(); 

То, что я сделал это изменить id # к class .. Я добавил :checked в ваш селектор jQuery, чтобы он всегда получал выбранный элемент.

Удачи вам!

Answer 2

Оба идентификаторами являются одинаковыми, что приведет к большие проблемы. Идентификаторы всегда должны быть уникальными на странице. Он находит первое, потому что идентификатор привязан к нему первым.

Answer 3

вам нужно использовать код PHP для этого, как $gender = $_REQUEST['gender']; если вы используете JQuery, чтобы получить значение флажка, то вам нужно получить значение проверяемого радиокнопки

Для JQuery вы можете получить так:

var gender = jQuery('input[name="gender"]:checked').val(); 

Answer 4

Пожалуйста, попробуйте ввести следующий код для получения выделенной гендерной кнопки.

$(document).ready(function(){ 
 
    $('input[type=radio][name=gender]').change(function() { 
 
     var c= $("input[name='gender']:checked").val(); 
 
    alert(c) 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="gender" class="gender" value="female" /> Female<br> 
 
    <input type="radio" name="gender" class="gender" value="male" checked /> Male<br> 
 
    </form>