Mein Formular sendet immer die erste Option

Question

Ich habe ein sehr einfaches HTML-Formular. Das Formular ist mit einer PHP-Datei verbunden und sendet die Ergebnisse per E-Mail an mich. Aber ich habe ein Problem mit Radiobuttons. Unabhängig davon, welches Optionsfeld der Benutzer auswählt, sagt die E-Mail immer, dass der Benutzer das erste Optionsfeld ausgewählt hat.

Ich habe einige Nachforschungen gemacht und ich denke, ich muss schreiben "echo $ gender;" in der PHP-Datei irgendwo. Ich habe es versucht und Dreamweaver markiert es immer als Syntaxfehler.

ist hier der wesentliche Code:

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

Ich denke, du meinst jQuery anstelle von PHP. Auch, was Sie suchen ist:

<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(); 

Was ich getan habe ist die id # zu einem class . ändern. Ich habe einen :checked zu Ihrem jQuery Selector hinzugefügt, so dass es immer das ausgewählte Element erhalten wird.

Viel Glück!

Answer 2

beide IDs sind die gleichen, die bewirkt, dass große Probleme. IDs sollten auf der Seite immer eindeutig sein. Es findet den ersten, weil die ID zuerst daran gebunden ist.

Answer 3

müssen Sie PHP-Code für diese wie $gender = $_REQUEST['gender']; verwenden, wenn Sie jQuery verwenden Wert von Checkbox zu erhalten dann müssen Sie Wert von aufgegebenem Radiobutton

Für jQuery erhalten können Sie wie folgt erhalten:

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

Answer 4

Bitte versuchen Sie folgenden Code für den ausgewählten Geschlecht Radio-Button.

$(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>