Radio button to mysql with ajax validation

Question

First off: I'm using the mail script made by Jeffrey Way on In the Woods.

I have a simple form, like so:

<form method="post" action="sendEmail.php" id="form_reserveren">
<div id="container">

    <div id="main" style="width: 100%; height: auto; float: left;">
        <div class="left">
            <h3>Uw gegevens</h3>
            <p style="margin-bottom: 30px; height: 40px; width: 100%;">
                <input type="radio" id="zml_geslacht" name="zml0" value="de Heer"/><span style="float: left; margin-top: -5px; height: 25px;">de Heer</span><br />
                <input type="radio" id="zml_geslacht" name="zml0" value="Mevrouw"/><span style="float: left; margin-top: -5px; height: 25px;">Mevrouw</span>
            </p>
            <p>
                <input type="text" id="zml_voornaam" name="zml1" value="Uw voornaam" onblur="if(this.value=='') this.value='Uw voornaam';" onfocus="if(this.value=='Uw voornaam') this.value='';"/>
                <input type="text" id="zml_achternaam" name="zml2" value="Uw achternaam *" onblur="if(this.value=='') this.value='Uw achternaam *';" onfocus="if(this.value=='Uw achternaam *') this.value='';"/>
            </p>
            <p>
                <input type="text" id="zml_email" name="zml3" value="Uw e-mailadres *" onblur="if(this.value=='') this.value='Uw e-mailadres *';" onfocus="if(this.value=='Uw e-mailadres *') this.value='';"/>
            </p>
        </div>

        <div class="right">
            <h3>Uw reservering</h3>
            <p style="height:68px;">
                <textarea name="zml13" id="zml_opmerkingen" rows="12">Opmerkingen</textarea>
            </p>    


            <p><input type="submit" name="submit" id="submit" value="Email Us!" /></p>
            <ul id="response" />
        </div>
    </div><!--end main -->

</div><!-- end container -->
</form>

This goes through ajax, like so:

var zml0 = $('input#zml_geslacht').html( $(':checked').val());
var zml1 = $('input#zml_voornaam').val();
var zml2 = $('input#zml_achternaam').val();
var zml3 = $('input#zml_email').val();
var zml13 = $('textarea#zml_opmerkingen').val();

$.ajax({
    type: 'post',
    url: 'sendEmail.php',
    data: 'zml0=' + zml0 + '&zml1=' + zml1 + '&zml2=' + zml2 + '&zml3=' + zml3 + '&zml13=' + zml13,

    success: function(results) {
        $('#main img.loaderIcon').fadeOut(1000);
        $('ul#response').html(results);
    }
}); // end ajax

And after that it goes to my sendEmail.php to send the form to an e-mailaddress (and store it in a database). The query is:

 $zml0 = $_REQUEST['zml0']; // Geslacht

    // database connection
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);


// query
$sql = "INSERT INTO test (zml0,zml1,zml2) VALUES (:zml0,:zml1,:zml2)";
$q = $conn->prepare($sql);
$q->execute(array(':zml0'=>$zml0,
                  ':zml1'=>$zml1,
                  ':zml2'=>$zml2));

Everthing works.. I also have name, e-mailaddress etc, except for the Gender radio buttons (Gender in Dutch is Geslacht, I name it zml0 to have a little more prevention from spammers). The idea of course is that the user should select Female or Male.

When it gets stored in the database, all it says is [object Object]. Also when I just echo out the input. How can I make this work?

Answer 1

Try this:

var zml0 = $('input[name=zml0]:checked').val();

The other thing you could try, which might make your life a little easier for bigger forms is:

$.ajax({
    type: 'post',
    url: 'sendEmail.php',
    data: $('#form_reserveren').serialize(),

    success: function(results) {
        $('#main img.loaderIcon').fadeOut(1000);
        $('ul#response').html(results);
    }
}); // end ajax

Answer 2

This line is the issue:

var zml0 = $('input#zml_geslacht').html( $(':checked').val());

Appears to be a global variable so if you checked the other box it won't matter. You'd always send the initial value. Well you would if it was correct. The second issue is that you're just grabbing the html? from it, not the actual value. Apparently this is returning an object.

Your ajax call should grab the form input at the time:

$.ajax({
    type: 'post',
    url: 'sendEmail.php',
    data: 'zml0=' + $('input[name=zml0]:checked').val(),

    success: function(results) {
        $('#main img.loaderIcon').fadeOut(1000);
        $('ul#response').html(results);
    }
});