Select tag value not being included in my Ajax script

Question

I have an ajax script that sends data from a contact form to a php script but the problem is that I am not able to get the value from the "select" tag. I am limited in my knowledge of javascript/ajax so please excuse any inappropriate descriptions or phrases as I really can only explain it how I know it.

HTML :

<form action="" method="POST" id="contact">
    <table>
        <tbody>
            <tr>
                <td><h2>First Name: </h2></td>
                <td><h2>Last Name: </td>
                <td><h2>Email Address: </td>
            </tr>
            <tr>
                <td><input type="text" name="first_name"></td>
                <td><input type="text" name="last_name"></td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td><h2>Street Address:</h2></td>
                <td><h2>What's Dirty?</h2></td>
            </tr>
            <tr>
                <td><input type="text" name="address"></td>
                <td>
                    <select name="job" form="contact">
                        <option value="house">House</option>
                        <option value="roof">Roof</option>
                        <option value="garage-shed">Garage/shed</option>
                        <option value="other">Other</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><h2>Message: </h2></td>
            </tr>
        </tbody>
    </table>
    <textarea name="message" cols="80" rows="5"></textarea>

    <input type="submit" id="submit" name="send" value="Send!" class="send-button">

</form>

Ajax

    <script type="text/javascript">
    $("#submit").click(function(e) {
        e.preventDefault();
var data_string = $("form#contact").serializeArray();
$.ajax({
    type: "POST",
    url: "database.php",
    data: data_string,
    success: function(){
    }
});
return false;
    });
    </script>

PHP

  print_r($_POST);
  $fname = $_POST['first_name'];
  $lname = $_POST['last_name'];
  $email = $_POST['email'];
  $address = $_POST['address'];
  $job = $_POST['job']; 
  $message = $_POST['message'];

What I get from the script is this

[first_name] => John
[last_name] => Smith
[email] => [email protected]
[address] => 1234 Jamestown Rd.

Please keep in mind I am very new to this so a simple mistake really isn't all that obvious to me.

jsfiddle.net/6vbdD I tried with fiddle on Google Chrome and it works for me. — Gapipro
– Gapipro, Commented Jun 13, 2013 at 21:11
I also confirm that the job variable is being posted and included in the serialization. jsfiddle.net/JZzsQ However, you have some unclosed <input> and <h2> tags which could cause unpredictable results. — showdev
– showdev, Commented Jun 13, 2013 at 21:15
@showdev I closed the "h2" tags, and to my knowledge, input tags are self closing tags. I added my PHP as that is what seems to be causing the issue. — sanch
– sanch, Commented Jun 13, 2013 at 22:22
You may be right -- I think that depends on your doctype. But in any case, what do you see when you alert(JSON.stringify(data_string, null, 4)); after setting data_string in your click handler? — showdev
– showdev, Commented Jun 13, 2013 at 22:51

sanch · Accepted Answer · 2013-06-14 17:23:56Z

1

I have found the problem to be in a mysterious attribute inside my html.

HTML

<select name="job" form="contact">

was the monkey wrench inside of my code, I removed

form="contact">

and all was working just fine!

Thanks for the help!

answered Jun 14, 2013 at 17:23

sanch

7161 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select tag value not being included in my Ajax script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related