CODEWITHSUNDEEP
jqueryjquery-selectors
dbr
dbr

Reputation: 1047

jQuery select input element with name as array

I Googled this for half an hour and cant find the solution but I think this should be something really simple.

This is my code

<input name="order[name]" id="order[name]" type="text">

<script>
    $(document).ready(function(){
        $("#previewForm").click(function(){
            var orderName = $("input[type=text][name='order[name]']").val();
            $( "#contactCollected" ).text( orderName );
        });
    });
</script>

I want the user to preview the form that he just filled.

Replacing 

$( "#contactCollected" ).text( orderName );

with

$( "#contactCollected" ).text( 'some text' );

works so I think it's the selector problem. I can provide more code if necessary.

EDIT: It appears this works as is, I'm not even sure where in the process I replaced one mistake with another one.

Thanks For all the folks in comments especialy @Barmar and @Jonathan.Brink .

I wouldn't delete the question because of the discussion on naming ID's in input elements but I'm not sure about the rules.

Thank you everyone for your time and I apologise once more for not trying out the jsfiddle right away.

Upvotes: 2

Views: 3112

Answers (4)

lockheart
lockheart

Reputation: 11

I'm practicing thread necromancy here so apologise in advance. This thread is returned in searches but lacks a usable answer so I'm hoping to benefit those that follow.

The select needed for elements with square brackets as above is: $('#order\\[name\\]').val()

Thanks to the following thread: How do I get jQuery to select elements with a . (period) in their ID?

Upvotes: 1

Jonathan.Brink
Jonathan.Brink

Reputation: 25373

Change your "type" from "text" to "input" and remove your explicit "type" declaration:

<input name="order[name]" id="order[name]" />

$("input[type=input][name='order[name]']")

Past that, a note on characters to use for dom attributes:

For pre-HTML5 you will have flaky behavior if you use bracket's in your attributes, such as id and name.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

You may be able to get away with the brackets with an HTML5 doctype though:

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

For more details: What are valid values for the id attribute in HTML?

I would recommend coming up with a different naming scheme for your id's, then your selectors will be more straightforward.

Multi-attribute selector example: https://api.jquery.com/multiple-attribute-selector/

Upvotes: 2

Chesser
Chesser

Reputation: 465

Change - <input name="order[name]" id="order[name]" type="text"> to <input id="order_name" type="text"> -- (square brackets are not allowed here and if specifying an I, you do not need a name - Make sure ID is unique).

Access using - $("input#order_name").val();

Upvotes: -1

HEMANT SUMAN
HEMANT SUMAN

Reputation: 488

try this

<script>
    $(document).ready(function(){
        $(document).on('click',"#previewForm",function(){
            var orderName = $("input[name='order[name]']").val();
            $( "#contactCollected" ).text( orderName );
        });
    });
</script>

Upvotes: 1

Related Questions