Here’s a weird thing. One of the forms (the only one I’ve tested, so far) I’ve set so that it will stringify all element values and do an alert. Everything is blank.
Pseudo code:
<input type=“button” onclick=“alert(JSON.stringify(this.form));” />
<input type="text" name="firstName" id="firstName" value="Aloishus" />
<input type="text" name="lastName" id="lastName" value="Smith" />
This is alerting the following:
{“0”:{},“1”:{}}
Shouldn’t they have actual values?
V/r,
A form consists of a number of objects - each of the input tags and whatever other tags are in the form. In your case there are two input tags.
If you want values then you need to specify that you want the value of each object rather than the object itself.
Thanks, @felgall. I’ve never worked with JavaScript JSON, before (CF JSON, I’ve worked with) and I’m slowly learning things along the way.
What I wound up doing was declaring a variable called formData and setting it to {}, then looping through all the form elements to set formData[input.name] = input.value; which seems to work.
The problem with that is that if I have more than one text input with the same name (not ID; those have to be unique), then I am not getting the expected list of all the values.
V/r,
You can loop through the form.elements collection instead, which gives you easy access to them. You will only want to exclude the submit button on most occasions too.
I am looping through the form elements collection.
Actual code:
var formData = {};
var elems = formObj.elements; // formObj is the form object passed to the function
for(var i = 0; i<elems.length; i++){
var input = elems[i];
if(input.name){
formData[input.name] = input.value;
// When more than one input has the same name,
// this overwrites the value with each iteration,
// instead of keeping the comma-delimited list.
}
}
V/r,
If you use jQuery you can do it with:
var data = JSON.stringify($('form').serializeArray())
With serializeArray() you don’t have to worry about things being overwritten, since you’ll get an array of objects…something like:
[
{
name: "a",
value: "1"
},
{
name: "a",
value: "2"
},
{
name: "a",
value: "3"
},
{
name: "b",
value: "4"
},
{
name: "c",
value: "5"
}
]
Sorry, I should have mentioned in my original post - no jQuery, no MooTools, no libraries. This is the first project that I’ve worked on in a LONG time where we aren’t using any JS libraries or frameworks, so I keep forgetting to mention that when I ask questions. But thanks for the suggestion.
V/r,
Oops! I realized that when I read through the posts but ended up posting the jQuery solution anyways lol.
I can’t tell if you’re still working on the overwrite thing or if you’re all set, but just in case, a JS way could be:
var formData = {}
var elems = formObj.elements
for(var i = 0; i < elems.length; i++){
if(input.name){
formData[input.name].push(input.value)
} else {
formData[input.name] = [input.value]
}
}
It simplifies things by making them all arrays (even when they’re not), which saves you a bit of coding later on. Then you can just stringify it with JSON.stringify(formData).
[quote=“OzRamos, post:8, topic:115080”]
It simplifies things by making them all arrays (even when they’re not)
[/quote]GAH! I think this is what I’ve been attempting (and failing) to do. Thanks!
V/r,
UPDATE: Drat… spoke too soon… formData[input.name] does not exist (from the push()).
I think what I’m going to have to do (unless someone can suggest a better alternative) is to give each element that is expected to produce an array-like comma-delimited list of values a unique name and ID (with a number appended) and then create an array on the server-side in order to do the insert.
Which isn’t difficult to do on the front-end. JS is creating the elements, anyway; so I can do some math and append _num to the name/ID of the elements.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.