How to Generate a List of all Input name="" fields in a form with Javascript/JQuery

Question

I'm sure there's a simple answer to this, but I'm a novice teaching myself Javascript and JQuery and I just don't know enough to figure it out myself. Any help you can provide is greatly appreciated.

I'm building a form that generates HTML emails for my company based on hundreds of different inputs entered by the form user. Rather than copying and pasting each and every input name into a $_POST line in the form's action script to retrieve the input's data, I'm wondering if there's a way to use Javascript/JQuery to generate a list of the name="" fields from each input on the form to make this easier?

For example, from the following slice of the code, how can I automatically generate a list that contains the name values "bottlespecial6image", "bottlespecial6imagewidth", "bottlespecial6imageheight", "bottlespecial6imagelink", and "bottlespecial6includeprice" (with the idea that my form has hundreds (if not thousands) of inputs, so copying/pasting seems inefficient):

<input type="text" name="bottlespecial6image" value=""/>
<input type="text" name="bottlespecial6imagewidth" value=""/>
<input type="text" name="bottlespecial6imageheight" value=""/>
<input type="text" name="bottlespecial6imagelink" value=""/>
<input type="radio" name="bottlespecial6includeprice" value="yes"  checked="checked" />
<input type="radio" name="bottlespecial6includeprice" value="no"  checked="checked" />

I apologize if this has already been covered here -- I searched around here for similar questions, but couldn't find anything.

It's easy to get the name attributes as an array or CSV string, but your stated reason for wanting to do this sounds a bit strange. Or - wait, are you saying you want to do this as a once off exercise to help you write the server-side code without lots of individual copy/paste operations? I would think there's some way your server-side code could be made more modular, e.g., by knowing that each bottlespecial6 group includes an image, imagewidth, imageheight, etc. Are there also sets of bottlespecial1 through bottlespecial5 items? — nnnnnn
– nnnnnn, Commented Jul 27, 2013 at 3:53

adeneo · Accepted Answer · 2013-07-27 03:50:00Z

2

To create a serialized array to submit, you'd use jQuery's serialize()

$('form').serialize();

to just get the names in an array, you can map them:

var inputs = $('form').find('input[name]'); //all inputs with a name in the form

var names  = $.map(inputs, function(el) { return el.name });

FIDDLE

answered Jul 27, 2013 at 3:50

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TMax Over a year ago

This is incredibly helpful. Thank you, adeneo!

ManMohan Vyas · Accepted Answer · 2013-07-27 03:49:58Z

0

$("[name='yourrequiredname']")

will give you list of all elements by same name

answered Jul 27, 2013 at 3:49

ManMohan Vyas

4,0924 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to Generate a List of all Input name="" fields in a form with Javascript/JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related