jQuery select input element with name as array

Question

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.

You can just use the name attr to select the input, you dont need the type as well — mcclaskiem, Sep 28 '15 at 19:40
Everyone says it's not allowed, but your selector works for me in every browser and every version of JQuery I tried. — wwwmarty, Sep 28 '15 at 19:49
@mcclaskiem I tried that too but this seemed as "more complete" selector so I did it like this. — dbr, Sep 28 '15 at 20:01
@wwwmarty Can you be more specific on flaky, I'm pretty sure I came up to this solution on SO so I hope this is not an issue. — dbr, Sep 28 '15 at 20:03
Flaky with regards to it not following spec. But there are a trillion differences between browsers and the spec. Might not be an issue especially since @Barmar says that this is a common PHP idiom — Jonathan.Brink, Sep 28 '15 at 20:07
https://jsfiddle.net/barmar/brhcga1z/1/ is your exact code, and it works fine. — Barmar, Sep 28 '15 at 20:25
@Barmar I guess I need a break here because obviously I lost my concentration. Thanks — dbr, Sep 28 '15 at 20:28

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

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/

edited May 23 '17 at 12:14

Community

1
1

answered Sep 28 '15 at 19:43

Jonathan.Brink

23,757
20
73
115

The form is really big and validated in the back and there is really so much to change if I change the name scheme that I really hope there is another option. Isn't document defined as HTML 5 with ` ` or is there something more to it. I'm self taught so it could be that I missed something big here. – dbr Sep 28 '15 at 19:53
@dbr which doctype are you using? Perhaps that could be changed if not HTML5? – Jonathan.Brink Sep 28 '15 at 19:54
I edited my comment above. Just a note in case you haven't seen. – dbr Sep 28 '15 at 19:59
@dbr ok, yep, that's the HTML5 doctype – Jonathan.Brink Sep 28 '15 at 20:01
Brackets have been used commonly in the `name` attribute for ages. It's entrenched in PHP, which automatically translates those parameters to arrays. I've never heard of it being flaky. – Barmar Sep 28 '15 at 20:04
@Barmar If it does than that's great, but it's going against the spec (see linked SO post and http://www.w3.org/TR/html4/types.html#type-id) – Jonathan.Brink Sep 28 '15 at 20:06
Yes, it's against the spec, but it's been a universally-adopted extension for a long time. – Barmar Sep 28 '15 at 20:07
PHP5 simply codified what all browsers had been doing for many years. – Barmar Sep 28 '15 at 20:07
BTW, I'm specifically talking about the `name` attribute. The ID attribute isn't even relevant to this question, because he's not using it in the selector. – Barmar Sep 28 '15 at 20:08
@Barmar gotcha. Probably safe then. Would try to avoid though if starting a new non-PHP project – Jonathan.Brink Sep 28 '15 at 20:08
@dbr at this point, it might be best to try to reproduce the issue in a jsfiddle – Jonathan.Brink Sep 28 '15 at 20:09
@Jonathan.Brink Not just PHP, Perl also follows that naming convention (I'm not sure which did it first). – Barmar Sep 28 '15 at 20:09
@Jonathan.Brink First time creating something in jsfiddle but this is not working. https://jsfiddle.net/4fwcfcqc/3/ – dbr Sep 28 '15 at 20:21
1

@dbr You forgot to load jQuery. Select it from the menu at the top left. – Barmar Sep 28 '15 at 20:23

score 1 · Answer 2 · answered Sep 28 '15 at 19:43

1

try this

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

answered Sep 28 '15 at 19:43

HEMANT SUMAN

478
2
13

This doesn't work even when I change `orderName` to `'some text'`. – dbr Sep 28 '15 at 19:52

score 1 · Answer 3 · answered Mar 12 '21 at 03:49

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?

score -1 · Answer 4 · answered Sep 28 '15 at 19:48

-1

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();

answered Sep 28 '15 at 19:48

Chesser

455
3
9

There is much more to the code than this so changing the name scheme will be the last thing I try because that will be two days of work to fix the validation and who knows what else will come up. – dbr Sep 28 '15 at 19:58
In that case may be you can specify a class for this input element and access using `$("input.myUniqueClass").val();`. Do not touch the existing attributes but at the same time avoid using them for your code. – Chesser Sep 29 '15 at 05:32

jQuery select input element with name as array

4 Answers4