2

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!

0

3 Answers 3

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.

0
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. :(

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.