CODEWITHSUNDEEP
jqueryhtml
Hal Clive
Hal Clive

Reputation: 137

Getting a textfield value with jQuery

I've got a registration box working otherwise apart from the fact that it won't send the textfield value to my php script - is .val() the right function? I know there's probably a hundred thins wrong with the way I've done this, but I'd appreciate any input.

$(document).ready(function(){  
                $("form#joinus").submit(function() {
                var gender = $('#gender').attr('value');  
                var age = $('#age').attr('value');
                var gamer = $('#gamer').attr('value');
                var name = $('#name').val();
                console.log("register AJAX input: " + "gender="+ gender +"& age="+ age +"& gamer=" + gamer +"& name=" + name);
                var display = document.getElementById('feedback');
                    $.ajax({  
                        type: "POST",  
                        url: "scripts/register.php",  
                        data: "gender="+ gender +"& age="+ age +"& gamer=" + gamer +"& name=" + name,
                        success: function(msg){  
                            $('form#joinus').hide(function(){$('div.success').fadeIn();});  
                            display.innerHTML = msg;
                        }
                    });
                return false;  
                });  
            });

HTML:

form id="joinus" method="post" action="">
    <fieldset>
        <table style="text-align: left">
            <tr><td>Gender:</td><td><select name="gender" id="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select></td></tr>
            <tr><td>Age:</td><td><select name="age" id="age">
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
                <option value="32">32</option>
                <option value="33">33</option>
                <option value="34">34</option>
                <option value="35">35</option>
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
                <option value="40">40</option>
                <option value="41">41</option>
                <option value="42">42</option>
                <option value="43">43</option>
                <option value="44">44</option>
                <option value="45">45</option>
                <option value="46">46</option>
                <option value="47">47</option>
                <option value="48">48</option>
                <option value="49">49</option>
                <option value="50">50</option>
                <option value="51">51</option>
                <option value="52">52</option>
                <option value="53">53</option>
                <option value="54">54</option>
                <option value="55">55</option>
                <option value="56">56</option>
                <option value="57">57</option>
                <option value="58">58</option>
                <option value="59">59</option>
                <option value="60">60</option>
                <option value="61">61</option>
                <option value="62">62</option>
                <option value="63">63</option>
                <option value="64">64</option>
                <option value="65">65</option>
                <option value="66">66</option>
                <option value="67">67</option>
                <option value="68">68</option>
                <option value="69">69</option>
                <option value="70">70+</option>
            </select></td></tr>
            <tr><td>Would you describe yourself as a "gamer"? (This refers to video games of any sort)</td><td><select name="gamer" id="gamer">
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select></td></tr>
            <tr><td>Enter the name you would like to use for any highscores (this may be seen by other users)</td><td><input type="text" id="name" name="name" />
        </table>
        <button class="button positive"> Submit </button>  
    </fieldset>
</form>

Upvotes: 1

Views: 2256

Answers (3)

Town
Town

Reputation: 14906

I've tried your code in a test project and it works fine.

However, if I add another element further up with an ID of name, then I get the behaviour you describe.

I'd suggest you've got duplicate elements with the same ID.

Upvotes: 2

amit_g
amit_g

Reputation: 31250

Change

data: "gender="+ gender +"& age="+ age +"& gamer=" + gamer +"& name=" + name,

to

data: "gender="+ gender +"&age="+ age +"&gamer=" + gamer +"&name=" + name,

Upvotes: 0

Hogan
Hogan

Reputation: 70513

You don't have a closing </td> or </tr>. I don't think that is your exact problem, but it could not hurt to fix it.

Upvotes: 0

Related Questions