form input type text jQuery

Question

I do not know why I cannot get access to the input text when the code does not have any error.

<form action="#">
                <table width="80%" align="center">

                    <tr>
                        <td>Write your name</td>
                        <td><input type="text" name="yourName" placeholder="Name" /></td>

                        <td><input type="button" value="Submit" id="sendName"/></td>
                    </tr>
                </table>

            </form>
            <p />
            <div id="nameResult"></div>

and the js (jQuery):

$(document).ready(function(){

    $('#sendName').click(function(){
            $(document).ready(function(){

                var tag = $('#yourName').val();

                $('<p>Name ' + tag + '</p>').appendTo('#nameResult');

            });
    }); 

})

The output is always undefined. I do not know what I am doing wrong.

Answer 1

You are calling name as if it is an id using # .

Change this

<input type="text" name="yourName" placeholder="Name" />

to this, in which the input control has an id defined:

<input type="text" id="yourName" name="yourName" placeholder="Name" />

If you prefer to stick to name and do not want to define an id , then you can do this as well:

var tag = $('input[name="yourName"]').val();