Jump to content
Accountability

Problem with Concatenate in Real Time using onchange

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×