/    Sign up×
Community /Pin to ProfileBookmark

Capturing Multiple Input Field Values onselect

Copy linkTweet thisAlerts:
Mar 05.2012

Is there a way to gather multiple input field values when the final input field has been selected?

Here’s an example:

[code=html]
Qty: <select name=”qty”>
<option value=”5″>5</option>
<option value=”10″>10</option>
</select>
Color: <select name=”color”>
<option value=”red”>red</option>
<option value=”blue”>blue</option>
</select>
Size: <select name=”size” onselect=”ajaxScript(this.value)”>
<option value=”medium”>medium</option>
<option value=”large”>large</option>
</select>

[/code]

So in other words, when someone selects the size, the variables for qty, color and size are all sent to the ajaxScript. Is this possible?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpMar 06.2012 — Yes, it possible. When you use ajax, you can serialize the data from all the form fields including all the selected value from the "select" fields.
Copy linkTweet thisAlerts:
@NtrimgsauthorMar 06.2012 — Would I just pass the selected values in as their variables in the final select field?

I guess I don't know how to pass the info to the script that will process it. I know how to do it with the single field that is being selected, but not the ones previous to it that have already been selected.
Copy linkTweet thisAlerts:
@holyhttpMar 06.2012 — You can retrieve the selected value of any select field using the same technique you would if you only have one field. Each field is distinguished by it's name or ID (e.g. qty, color, size).

I would however recommend using itemsize and itemcolor in place of size and color because those might conflict with javascript predefined functions/attributes.
×

Success!

Help @Ntrimgs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...