JavaScript dynamicly organize form fields

I everyone Im hoping you can help me with some dynamic onSubmit Javascript...
Im trying to deterine the best way to scrape the values of a form on-the-fly at the submit event and 'map' them so they go across in email in a particular ordered format ...

hoping to just use javascript as simple as possible to do so...

say I have 5 "containers" each with 3 attributes.

but if the user only fills out container 2 and container 4 in the form, I want those values to 'bubbble-up' to the top in the return email as the top 2 spots in the email and not show the other or at the most populate a "" null values for others ... so that containers 1,3 & 5 in this case are underneath the top two listed collections which are populated...

|------------------------------------------------------------|
|          FORM                   |            EMAIL               |
|------------------------------------------------------------|
|   Vendor1 'null'             |    Vendor1 'Disney'      |
|   Vendor2 'Disney'        |    Vendor2 'Nike'          |
|   Vendor3 'null'             |    Vendor3 'null'           |
|   Vendor4 'Nike'            |    Vendor4 'null'           |
|   Vendor5 'null'             |    Vendor5 'null'           |
|------------------------------------------------------------|
|   Item1 'null'                 |    Item1 'Mouse'          |
|   Item2 'Mouse'            |    Item2 'Shoe'             |
|   Item3 'null'                 |    Item3 'null'               |
|   Item4 'Shoe'               |    Item4 'null'               |
|   Item5 'null'                 |    Item5 'null'               |
|------------------------------------------------------------|
|   Qty1 'null'                   |    Qty1 '1'                    |
|   Qty2 '1'                      |    Qty2 '2'                    |
|   Qty3 'null'                   |    Qty3 'null'                |
|   Qty4 '2'                      |    Qty4 'null'                 |
|   Qty5 'null'                   |    Qty5 'null'                 |
|------------------------------------------------------------|


this way I can read the email like so

Vendor1: Disney   Item1:Mouse    Qty1:1
Vendor2: Nike       Item2:Shoe      Qty2:2


Im figuring I can do like a for each  loop thru and if
document.myForm.myField.value>0;
 evaluate if field index Of Vendor || Item || Qty writ ein order somehow...
any thoughts on where to go next with this code ?

thx



function organizeFormValues()
    {
        var str = '';
        var elem = document.getElementById('formname').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "<b>Vendor-</b>" + elem[i].type+ "&nbsp&nbsp";
            str += "<b>Item-</b>" + elem[i].name + "&nbsp;&nbsp;";
            str += "<b>Qty-</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
            str += "<BR>";
        } 
        document.getElementById('lblValues').innerHTML = str;
    }

Open in new window

JAaron AndersonProgramming Architect @ Widener UniversityAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JAaron AndersonProgramming Architect @ Widener UniversityAuthor Commented:
ok So Im trying to wrangle what the user inputs in contract to what format I will push to my email I am sending the Account Manager...

The only BIG think Im missing hoping to have help on is how to autoincrement i++ each String being added into the array e.g.
Vendor(1) = Disney
Vendor(2) = Nike
but say a whole bunch of conditionals skipped, to if statement 30, that would be Vwendor(3)

make sense ?...
once I get that accomplished I think Im good...
Ill just parse the Array as a string and echo that in a hidden form field and send the email with that as the body... the email Im hoping to look like this

Vendor(1) = Disney
Item Description(1) = Mouse
Qty(1) = 1

Vendor(2) = Nike
Item Description(2) = shoe
Qty(2) = 2

function populateFormattedValues()
{

var myFormattedElements = new Array();

//GOAL if a customer has selected 1 or more of this item
//The getElementsByName() method is use to get the element by name. 
//However be aware of the getElementsByName() method always return an array as output.

if( document.getElementsByName("DisneyMouseTotalQty")[0].value > 0 ) ) {
// if statement to execute below code if qty is specified ordered condition is true >0
//The method always return an array, and we have to use [] to access the value.
	//slatedCI 
	myFormElements.push="Vendor = Disney"; // wish this was Vendor([i++])
	myFormElements.push="Item Description = Disney Mouse" // wish this was Item Description([i++])

	myFormElements.push="Qty = "+document.RequestforQuoteForm.DisneyMouseTotalQty.value; // wish this was Qty([i++])

}
	
if( document.getElementsByName("NikeShoeTotalQty")[0].value > 0 ) ) {
// if statement to execute below code if qty is specified ordered condition is true >0
//The method always return an array, and we have to use [] to access the value.
	//slatedCI 
	myFormElements.push="Vendor = Nike"; // wish this was Vendor([i++])
	myFormElements.push="Item Description = Nike Shoe" // wish this was Item Description([i++])

	myFormElements.push="Qty = "+document.RequestforQuoteForm.NikeShoeTotalQty.value; // wish this was Qty([i++])

}

}//end function

//document.write(myFormElements.toString());
</script>
<!-- ###################################################################### -->
<form action="myCDOSYS/path.asp" method="post" 
ID="RequestforQuoteForm" name="RequestforQuoteForm">


 <input name="ComputerDellStandardDesktopTotalQty" id="ComputerDellStandardDesktopTotalQty" type="text" value="0" size="3" maxlength="3" />


<input type="button" value="Submit" onclick="populateFormattedValues();" />

<input type="hidden" id="myFormattedElements" name="myFormattedElements">

</form>

Open in new window

Michel PlungjanIT ExpertCommented:
But this is all supposed to be done on the server - NOT the client

If you want to do it on the client, at least do NOT hardcode a function for each vendor.

If you posted the form we could fix that instead of guessing
JAaron AndersonProgramming Architect @ Widener UniversityAuthor Commented:
yeah I know on the server but dont have the turn-around afforded to me to do it right hoping an onchange or onclick to just reassort field values can pull it off on the front end client request session...

thx for checking it out...
heres my preliminary form...
http://www.widener.edu/webdev/POQR2.htm



//maybe instead of 
.value > 0 ) 
// Im now trying  a NOT NULL approach for field value
// more like so
var EvaluateCDLNwDTotalQty = null;
EvaluateCDLNwDTotalQty = 
document.getElementsByName("CDLNwDTotalQty")[0].value
if(!EvaluateCDLNwDTotalQty) { // if not null
myFormElements.push="Vendor = Dell"; // push works right ?
// would I need an onchange event to update the temp array ?
// or can I (hopefully) collect all fields since everything is within 
// one form at the onclick event of the submit button...

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Michel PlungjanIT ExpertCommented:
I'll take a look later.
Michel PlungjanIT ExpertCommented:
Here is your complete function to gather data

You just need to add the rest of the items to the array at the beginning
var things = [
{"vendor":"Dell","name":"ComputerDellStandardDesktop","desc":"Dell Standard Desktop"},
{"vendor":"Dell","name":"ComputerDellStandardLabClassroomSystem","desc":"Dell Standard Lab Classroom System"},
{"vendor":"Dell","name":"ComputerDellStandardLaptopNotebook","desc":"Dell Standard Laptop Notebook"}
]; // no comma after last item




function populateFormattedValues() {
  var theForm = document.RequestforQuoteForm;
  myFormElements=[];
  for (var i=0;i<things.length;i++) {
    var qty = theForm.elements[things[i].name+"TotalQty"].value;
    if (qty) {
      myFormElements.push("Vendor = "+things[i].vendor);
      myFormElements.push("Item Description = "+things[i].desc);
      myFormElements.push("Qty = "+qty);
    }
  }

//parse joined Array to new String Variable
var finalString = myFormElements.toString();
// populate hidden field for email
document.RequestforQuoteForm.formattedCMDBString.value = finalString;

	
}//end function

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JAaron AndersonProgramming Architect @ Widener UniversityAuthor Commented:
ok Ill try incorporating this element approach this week
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.