Jump to content

JavaScript getElementsByName, cascading drop box problem


Recommended Posts

I have a "Submit" form that I cannot get to work. I think the problem may be in the "getElementsByName" part of the javaScript because I can get the code to work in another form where I can use "getElementById". The other form has a normal dropdown field with a stable id name, unlike the cascading fields that change all the time (hence the getElementsByName usage.

Can anybody spot where the problem may be in the following script?

What it does is...

The cascading dropdown (Company) finds customers related to a salesperson. If they have a new company to add, they bypass the cascading dropdown field and input the new company name in a textfield (New). When they bypass the Customer field, it automatically inputs "Add New Company" into the Company field. I use that as part of my script below. P.S. I can look at the source code and see that the cascading field is a select/options list.

---------------------------------------

function init() {

var form = document.getElementsByName('caspioform');

form.onsubmit = function() {

return processForm();

}

}

function processForm() {

var form = document.getElementsByName('caspioform');

var o_Cust1 = document.getElementsByName("InsertRecordCompany");

var o_CustNew = document.getElementsByName("InsertRecordNew");

if(o_Cust1.value == "Add New Company")

{

o_Cust1.options[0] = new Option(o_CustNew.value, o_CustNew.value, false, true);

}

else

{

o_Cust1.value = o_Cust1.value;

}

return true;

}

window.onload = init;

Link to comment
Share on other sites

Oops, I took another look at the source code and it is not a select/options list.

Here is the source code:

Company

So, does anybody have any suggestions?

Here is my latest attempt without the options part in the code.

-------------------------

function init() {

var form = document.getElementsByName('caspioform');

form.onsubmit = function() {

return processForm();

}

}

function processForm() {

var form = document.getElementsByName('caspioform');

var o_Cust1 = document.getElementsByName("InsertRecordCompany");

var o_CustNew = document.getElementsByName("InsertRecordNew");

if(o_Cust1.value == "Add New Company")

{

o_Cust1.value = o_CustNew.value;

}

else

{

o_Cust1.value = o_Cust1.value;

}

return true;

}

window.onload = init;

Link to comment
Share on other sites

Here's my latest try. In the source code I noticed the name of the form was not "Caspio", but "Appkey".

However the code still does not work. The o_Cust1 element is a cascading dropdown.

-------

function init() {

var form = document.getElementsByName('AppKey');

form.onsubmit = function() {

return processForm();

}

}

function processForm() {

var form = document.getElementsByName('AppKey');

var o_Cust1 = document.getElementsByName("InsertRecordCompany");

var o_CustNew = document.getElementsByName("InsertRecordNew");

if(o_Cust1.value == "Add New Company")

{

o_Cust1.value = o_CustNew.value;

}

else

{

o_Cust1.value = o_Cust1.value;

}

return true;

}

window.onload = init;

Link to comment
Share on other sites

  • 4 weeks later...

Guess what, the solution is not a JavaScript script.

Reason... There are too many wild things happening in cascading drop downs and JavaScript is not the solution, it cannot capture the data in the cascading field. There are work-arounds for what I was trying to do, but they involve passing parameters to other forms and redirecting back to the original form.

I want to thank everybody who tried to help me. But it is time to end this post and move on.

TD Wilson 10/13/2010

Link to comment
Share on other sites

Hi,

I just noticed this post and although it's a little bit late, I still wanted to let you know that it is possible to capture the data in a cascading field by using Javascript.

You are in the correct route of calling the cascading dropdown field by using getElementsByName rather than getElementById method, because the ID of a cascading dropdown is not static, however the name is. Take a closer look of the two methods, it uses getElement for ID but uses getElementS for name. Because it's possible for different elements share the same name and the getElementsByName actually returns an array of elements (https://developer.mozilla.org/en/DOM/do ... entsByName). So to refer to a specific cascading dropdown field, you should use

var o_Cust1 = document.getElementsByName("InsertRecordCompany")[0];

rather than

var o_Cust1 = document.getElementsByName("InsertRecordCompany");

Link to comment
Share on other sites

  • 4 weeks later...

Well,

It still did not work. Actually I remember I tried that method earlier.

One thing I did learn form Caspio support was you should always refer to the Caspio document as: document.getElementById('caspioform');

Not document.getElementsByName('AppKey');

Thanks for the help.

Here is the code for my last try:

function init() {

var form = document.getElementById("caspioform");

form.onsubmit = function() {

return processForm();

}

}

function processForm() {

var form = document.getElementsByName('AppKey');

var o_Cust1 = document.getElementsByName("InsertRecordCompany")[0];

var o_CustNew = document.getElementsByName("InsertRecordNew");

if(o_Cust1.value == "Add New Company")

{

o_Cust1.value = o_CustNew.value;

}

else

{

o_Cust1.value = o_Cust1.value;

}

return true;

}

window.onload = init;

Link to comment
Share on other sites

The cascading dropdown element should be called as:

var o_Cust1 = document.getElementsByName("InsertRecordFIELDNAME");

Since the "getElementsByName" returns an array of elements, to reference the variable in the rest of the code you need to use the syntax below:

o_Cust1[0]

So every line of code you refer to o_Cust1, you need to replace it with o_Cust1[0].

Best,

Bahar M.

Link to comment
Share on other sites

Well... I tried the suggestion and reviewed my code, but still could not get it to work.

I did notice I had my getElementById('caspioform');

wrong. It should have been ('caspioform') not ("caspioform")

Thanks for your help.

Here is the latest....

--------------------------------------------------

function init() {

var form = document.getElementById('caspioform');

form.onsubmit = function() {

return processForm();

}

}

function processForm() {

var form = document.getElementsByName('AppKey');

var o_Cust1 = document.getElementsByName("InsertRecordCompany");

var o_CustNew = document.getElementsByName("InsertRecordNew");

if(o_Cust1[0].value == "Add New Company")

{

o_Cust1[0].value = o_CustNew.value;

}

else

{

o_Cust1[0].value = o_Cust1[0].value;

}

return true;

}

window.onload = init;

Link to comment
Share on other sites

I still see a line that you need to fix:

Wrong:

o_Cust1[0].value = o_CustNew.value;

Correct:

o_Cust1[0].value = o_CustNew[0].value;

I would also remove the line as I dont see its used anywhere:

var form = document.getElementsByName('AppKey');

So the finalized code look like:

<script type="text/javascript">
function init() {
var form = document.getElementById('caspioform');
form.onsubmit = function() {
return processForm();
}
}
function processForm() {
var o_Cust1 = document.getElementsByName("InsertRecordCompany");
var o_CustNew = document.getElementsByName("InsertRecordNew");
if(o_Cust1[0].value == "Add New Company")
{
o_Cust1[0].value = o_CustNew[0].value;
}
else
{
o_Cust1[0].value = o_Cust1[0].value;
}
return true;
}
window.onload = init;
</script>
Link to comment
Share on other sites

Final update on this. I cleaned the script as seen below:

<script type="text/javascript">
var form = document.getElementById('caspioform');
form.onsubmit = function() {
var o_Cust1 = document.getElementsByName("InsertRecordCompany");
var o_CustNew = document.getElementById("InsertRecordNew");
if(o_Cust1[0].options[o_Cust1[0].selectedIndex].text == "Add New Company")
{
o_Cust1[0].options[o_Cust1[0].selectedIndex].text = o_CustNew.value;
}
}
</script>

However programmatic wise it does work because you can not assign a value to a pre-selected option in a dropdown (last line). There is an easier way to achieve this, please go over this article which shows how to add a new option to a dropdown, http://howto.caspio.com/tech-tips/tech- ... boxes.html.

If you still insist on using a JavaScript I suggest if you use a hidden field for the company field on the web form and use a virtual field for the cascading dropdown to list the company names. In this case however you need to reference the virtual field as "cbParamVirtual1".

Best,

Bahar M.

Link to comment
Share on other sites

Hello Bahar,

Thank you for looking at the code; after working on it myself for untold hours, I suspected it may not be possible to assign a value to a pre-selected option in a drop-down. The hidden field idea sounds good. I'll keep that tip in mind for future projects.

Also, a while back I looked into the method to add a new option to a dropdown (via the article you mentioned), but found it would not work for my needs because it clears all previous information.

Here is a note from the article:

"In Internet Explorer, if you are using this method in a submission form, after submitting a new dropdown option any information in the original form will be cleared, for that reason it is a good idea to add a dynamic dropdown link as close to the top of the form as possible."

My final solution was to build and give my users a choice of datapages to use.

One for existing customers and another for adding new customers. It works fine for everybody, however it does cost me a datapage.

Again, thank you for taking the time to work on my code. Best regards, Terry

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...