Focus on input field not working with ID

Question

I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <meta charset="UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <title>Testing jQuery on Forms</title>
</head>
<body>
    <div id="form">
    <h3>The form</h3>
        <form name="main_form">
            <fieldset style="width: 300px;">
                <legend>General Information</legend>
                <p>Do you have a name?</p>
                <input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
                <legend for="name_or_yes">Yes</legend>
                <input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
                <legend for="name_or_no">No</legend>
                <br/>
                Name: <input type="text" name="name" id="#name_field">
            </fieldset>
        </form>
        <button id="submit_form">Submit</button>
    </div>
    <div id="results"></div>
</body>
</html>

Here is the JS:

$(document).ready(function() {
    $('#name_or_yes').click(function() {
        $('input[name=name]').focus();
    });

    $('#submit_form').click(function() {
        var toAdd = $("input[name=name]").val();
        $('#results').append("<p>"+toAdd+"</p>");

    });
});

I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#txtfocus").focus();
});
</script>
</head>

 <body>
     <input type="text" id="txtfocus2"><br/>
     This text box is set focused: <input type="text" id="txtfocus">
 </body>

</html>

Any help or advice is appreciated!

score 5 · Answer 1 · answered Sep 11 '14 at 15:35

5

Look at the id here:

<input type="text" name="name" id="#name_field">

Try it like this:

<input type="text" name="name" id="name_field">

The # is the id selector, but should not appear in the HTML.

answered Sep 11 '14 at 15:35

Slippery Pete

2,949
1
10
13

score 1 · Answer 2 · answered Sep 12 '14 at 07:36

1

Thank you both!

These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!

I would like to upvote you however, I do not have sufficient reputation points to do so. :(

answered Sep 12 '14 at 07:36

sebandrei

43
3

score 0 · Accepted Answer · edited Sep 11 '14 at 19:36

0

input's ID should be "name_field" instead of "#name_field":

<input type="text" name="name" id="name_field">

edited Sep 11 '14 at 19:36

Regent

4,986
3
19
34

answered Sep 11 '14 at 15:37

HdezCortes

65
9

Focus on input field not working with ID

3 Answers3