Problem with Concatenate in Real Time using onchange

[Accountability]

Having trouble trying to concatenate using onchange. the variables are derived from cascading dropdowns. Would like to see the concatenation results change as the dropdown selections are changed (this is all before submit on a form).

<SCRIPT LANGUAGE="JavaScript">

 function concatenate()
 {
   var one = document.getElementsByName("InsertRecordEmployee_Document_Title").value;
   var two  = document.getElementsByName("InsertRecordEmployee_Document_ID").value;
   var link  = (one+" "+ two);
   document.getElementsByName("InsertRecordEmployee_Document_Link")value = link;
 }

 document.getElementById("caspioform").onchange=concatenate;

</SCRIPT>

 

Also Tried:

<SCRIPT LANGUAGE="JavaScript">

 function concatenate()
 {
   var one = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var two  = document.getElementsByName("InsertRecordEmployee_Document_ID")[0].value;
   var link  = (one+" "+ two);
   document.getElementsById("InsertRecordEmployee_Document_Link")value = link;
 }

 document.getElementById("caspioform").onchange=concatenate;

</SCRIPT>

Unfortunately no luck.

 

There is a report right above this form so I used the following which also didn't work:

<SCRIPT LANGUAGE="JavaScript">

 function concatenate()
 {
   var one = document.forms[2].getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var two  = document.forms[2].getElementsByName("InsertRecordEmployee_Document_ID")[0].value;
   var link  = (one+" "+ two);
   document.forms[2].getElementsById("InsertRecordEmployee_Document_Link")value = link;
 }

 document.getElementById("caspioform").onchange=concatenate;

</SCRIPT>

Would really appreciate if anyone can guide me in the right direction. Thanks

 

[douvega]

It seems you have some typos in your scripts and you should trigger the fields directly instead of the whole Caspio form, this is due you may have more datapages deployed in the same web page and all of them share the same id.

Correct script would be something like this:

<SCRIPT LANGUAGE="JavaScript">
 function concatenate()
 {
   var one = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var two  = document.getElementsByName("InsertRecordEmployee_Document_ID")[0].value;
   var link  = one + " " + two;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

/* Please note that Trigering_Field_ID must be changed for your actual field ID */
document.getElementById("Trigering_Field_ID").onchange = concatenate();

</SCRIPT>

This should work but if you have further issues, you can visit https://www.futuresuite.net so I can further assist you.

[Accountability]

First of all, thank you very much for responding. Very much appreciated.

Tried your suggestion:

<SCRIPT LANGUAGE="JavaScript">
 function concatenate()
 {
   var one = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var two  = document.getElementsByName("InsertRecordEmployee_Document_ID")[0].value;
   var link  = one + " " + two;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

/* Please note that Trigering_Field_ID must be changed for your actual field ID */
document.getElementById("Employee_Document_ID").onchange = concatenate();

</SCRIPT>

Unfortunately did not wok. Because there is a report datpage above this form datapage (on the same html page)I tried:

 document.getElementById("Employee_Document_ID")[1].onchange = concatenate();

also did not work.

I chose the cascading drop-down field Employee_Document_ID for the trigger field because it is the last to be populated once the last drop-down item is selected. Any suggestions ?  Thanks again for helping.

 

[douvega]

Could you provide your website link to take a more in depth look into your issue?

In case you would not like to publish your site, you can also reach me at https://www.futuresuite.net

Look forward to hearing from you.

 

 

[douvega]

After checking your site, please try the following:

 

<script language="JavaScript"> 
function concatenate()
 {
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  = one + " " + two + " " + three;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
</script>

 

[Accountability]

WORKED PERFECTLY... Can not THANK YOU enough. You are a genius. Very sincerely thank you for sharing you time and expertise. 

[Accountability]

1 hour ago, Accountability said:

WORKED PERFECTLY... Can not THANK YOU enough. You are a genius. Very sincerely thank you for sharing you time and expertise. 

Trying to add two Text 255 fields to the above (which worked perfectly before I added the text fields. Added the following and it breaks the script.  See anything out of order ?

<script language="JavaScript"> 
function concatenate()
 {
   var four = document.getElementsById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementsById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  one + " " + two + " " + three + " " + four+ " " + five  
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementsById("InsertRecordEmployee_First_Name").onchange = concatenate;
document.getElementsById("InsertRecordEmployee_Last_Name").onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
</script>

Please advise ? Thank You...

[douvega]

I assume First_Name and Last_Name are text fields, For text field, instead of using .onchange event, you should use .onkeyup.

document.getElementsById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementsById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;

 

[Accountability]

They are going to be hidden received perameters.  Tried onkeyup didn't work. You think it is because they are recieved from exteral perameters ?

[Accountability]

meant to say received but not typed ?

 

[douvega]

Yes, in that case .onkeyup wont work. It is strange, please share the DataPage URL to verify it.

[Accountability]

http://account-ability.net/test/  left the two field unhidden to make sure they were there

 

[douvega]

It is password protected. 

[Accountability]

OOPS... should be fine now.

 

[Accountability]

Had a little FTP issue should be fine this time.

 

[douvega]

There are some typos.

document.getElementById is singular as it can be only one Element with the same ID, whereas document.getElementsByName is plural, that is why you need to specify which object you are referring to with [x] number.

Please try this and advise whether or not it works.

<script>
  function concatenate()
 {
   var four = document.getElementById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  one + " " + two + " " + three + " " + four + " " + five;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;
document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
 </script>

 

[Accountability]

You are the best. Worked just perfectly. I am sincerely grateful that someone of you obvious caliber took your valuable time to help.

[Accountability]

I needed to make the concatenated string unique so I added a date Time stamp. Is it accessed differently ? Tried to figure it out on my own but no success. 

<script>
  function concatenate()
 {
  var six = document.getElementById("InsertRecordDate_Time_Stamp").value 
  var four = document.getElementById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  five + ", " + four +" - " +one + " - " + two + " - " + three +" - "+ six;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
document.getElementById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;
document.getElementById("InsertRecordDate_Time_Stamp").onkeyup = concatenate;
 </script>

Thanks again.

 

[Accountability]

Also Tried (Unsuccessfully) Virtual1 is a Time Stamp field

Used both:

document.getElementById("InsertRecordcbParamVirtual1").onchange = concatenate;
and
document.getElementById("InsertRecordcbParamVirtual1").onkeyup = concatenate;

 

 

<script>
  function concatenate()
 {
  var six = document.getElementById("InsertRecordcbParamVirtual1").value;
  var four = document.getElementById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  five + ", " + four +" - " +one + " - " + two + " - " + three +" - "+ six;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementById("InsertRecordcbParamVirtual1").onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
document.getElementById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;

 </script>

[douvega]

For adding a date, I would suggest you using a system parameter. So, change the link var line for this:

var link  =  five + ", " + four +" - " +one + " - " + two + " - " + three +" - [@cbTimestamp*]";

Then, remove the var six line inside the function and also remove the corresponding triggering field.

[Accountability]

Also Tried (Unsuccessfully) Virtual1 is a Time Stamp field

Used both:

document.getElementById("InsertRecordcbParamVirtual1").onchange = concatenate;
and
document.getElementById("InsertRecordcbParamVirtual1").onkeyup = concatenate;

 

 

<script>
  function concatenate()
 {
  var six = document.getElementById("InsertRecordcbParamVirtual1").value;
  var four = document.getElementById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  five + ", " + four +" - " +one + " - " + two + " - " + three +" - "+ six;
   document.getElementById("InsertRecordEmployee_Document_Link").value = link;
 }

document.getElementById("InsertRecordcbParamVirtual1").onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
document.getElementById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;

 </script>

 

Totally THANKS to DouVega here is the final working script:

<script>
  function concatenate()
 {
  
  var four = document.getElementById("InsertRecordEmployee_First_Name").value;
   var five = document.getElementById("InsertRecordEmployee_Last_Name").value;
   var one = document.getElementsByName("InsertRecordEmployee_HR_Section")[0].value;
   var two = document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].value;
   var three = document.getElementsByName("InsertRecordEmployee_Document_Title")[0].value;
   var link  =  five + ", " + four +" - " +one + " - " + two + " - " + three +" " + "[@cbTimestamp]";
   document.getElementById("InsertRecordEmployee_Scanned_File_Name").value = link;
 }

document.getElementsByName("InsertRecordEmployee_HR_Section")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Origin")[0].onchange = concatenate;
document.getElementsByName("InsertRecordEmployee_Document_Title")[0].onchange = concatenate;
document.getElementById("InsertRecordEmployee_First_Name").onkeyup = concatenate;
document.getElementById("InsertRecordEmployee_Last_Name").onkeyup = concatenate;

 </script>