Jump to content

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

 

Link to comment
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.

Link to comment
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.

 

Link to comment
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>

 

Link to comment
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...

Link to comment
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>

 

Link to comment
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.

 

Link to comment
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>

Link to comment
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>

 

 

 

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...
×
×
  • Create New...