Clicky

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


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
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;
    }

asked 04/05/2011 02:14

jandersonwidener's gravatar image

jandersonwidener ♦♦


6 Answers:
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
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
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>
link
jandersonwidener's gravatar image

jandersonwidener

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
link
mplungjan's gravatar image

mplungjan

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


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
//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...
link
jandersonwidener's gravatar image

jandersonwidener

I'll take a look later.
link
mplungjan's gravatar image

mplungjan

Here is your complete function to gather data

You just need to add the rest of the items to the array at the beginning
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
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
link
mplungjan's gravatar image

mplungjan

ok Ill try incorporating this element approach this week
link
jandersonwidener's gravatar image

jandersonwidener

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×4
×2
×16
×125
×3

Asked: 04/05/2011 02:14

Seen: 401 times

Last updated: 06/29/2011 10:33