2

New to Sharepoint 2010, but not new to coding.

I have created a custom list with 4 text input fields and I am trying to target one of the fields called SUID with custom Javascript to modify how the input field behaves. The field is to capture numbers from an ID scanner that acts as a keyboard input, but it displays some unnecessary numbers.

When I go onto my allItems.aspx, click the green plus sign, and inspect the input field for SUID, I get this HTML code:

<input name="ctl00$m$g_0842343c_4653_49c3_b9ec_28682a09dff0$ff01$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_0842343c_4653_49c3_b9ec_28682a09dff0_ff01_ctl00_ctl00_TextField" title="SUID" class="ms-input ms-spellcheck-true">

I want to add some Javascript code so I can change what is inputted into that field so it slices and gets the exact amount of numbers I need.

For instance, this is what the ID scanner outputs: ;708089113=0184?

I am only looking for the 708089113, so I have coded some Javascript to remove the semi-colon (;), and everything from the equal sign (=) and on:

<script type="text/javascript">
var elm = document.getElementById('ctl00_m_g_0842343c_4653_49c3_b9ec_28682a09dff0_ff01_ctl00_ctl00_TextField');

elm.addEventListener('change', function (e) {
 var s = this.value, i = s.indexOf('=');
 if (i !== -1) {
    s = s.slice(1, i);
    this.value = s;
 }
});
</script>

I have tried injecting it into allItems.aspx underneath

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

But I have a feeling that I'm not targeting the right ID. Is there a way to figure out what the ID of this field is? Or is there another method I could try to target this input field? Is it possible I'm not injecting the code in the right area?

  • Use PlaceHolderAdditionalPageHead – Amal Hashim Dec 16 '14 at 15:10
  • @AmalHashim Unfortunately that didn't do the trick, but I'll keep it in mind to place any code in that area. – nicolefdesigns Dec 16 '14 at 15:14
2

JavaScript will not work if you set pagination on the listview. Instead I will suggest to use a Calculated column.

Assume, Column "SUID" has the value ";708089113=0184?"

Create a calculated column and set the following formula...

=RIGHT(LEFT(SUID,INT(FIND("=",SUID)-1)),LEN(LEFT(SUID,INT(FIND("=",SUID)-1)))-1)

This will give you that value 708089113.

Add the calculated column to your listview.

  • I apologize ahead of time, but I am new to Sharepoint completely. In my list, I created a new Calculated column after SUID and put in the formula. Once I saved the list, I went to it on my browser, used the ID scanner to swipe the card into the SUID input field, and from there it seems like it didn't work. I'm just unfamiliar with how the calculated columns are suppose to work. Could you explain this a bit more? – nicolefdesigns Dec 16 '14 at 17:17
  • Thanks for the update. You can manipulate other columns (from the same list) data in Calculated column. In your case if your SUID column has the value ";708089113=0184?" then the calculated column will apply the formula on that value. Then it will extract and store "708089113" in the calculated column. If the value of SUID field changes then the corresponding calculated value will be also changed autometically. Check the link for more details...support.office.com/en-us/article/… – Avijit Sur Dec 16 '14 at 17:28
  • Thank you for explaining that to me. I can see how this works. I created the calculated column called SUID #. Is it possible to not show the original SUID input in the list view after creation of an item? This calculated column works perfectly, but I need to hide SUID and only show SUID # within the list itself. – nicolefdesigns Dec 16 '14 at 18:01
  • You can remove the column from the listview settings. From the page go to Ribbon > List (TAB) and look for modify this view. In the modify view page uncheck SUID column and click Save...this will hide SUID from the view. – Avijit Sur Dec 16 '14 at 18:14
  • This is perfect! Thank you very much for your help :) – nicolefdesigns Dec 16 '14 at 20:52
0

Try to attach the handler on window.onload event. Place following javascript under AdditionalPageHead

<script type="text/javascript">
window.onload = function() {
    var elm = document.getElementById('ctl00_m_g_0842343c_4653_49c3_b9ec_28682a09dff0_ff01_ctl00_ctl00_TextField');

    elm.addEventListener('change', function (e) {
     var s = this.value, i = s.indexOf('=');
     if (i !== -1) {
        s = s.slice(1, i);
        this.value = s;
     }
    });
};
</script>
  • Thank you for your answer, but unfortunately this didn't work either. – nicolefdesigns Dec 16 '14 at 15:20
  • Can you put an alert box and see the event is firing? – Amal Hashim Dec 16 '14 at 15:22
  • I put alert("This works"); after this.value = s; but the alert never appeared so the event isn't firing. – nicolefdesigns Dec 16 '14 at 16:35
0

This is really simple in jQuery if you have that available, make sure this in an AdditionalPageHead control

<script type="text/javascript">
$(document).ready(function(){
 $("input[Title='SUID']").change(function(){
  var elm = this.val();
  var val = elm.split("=")[1];
  //do other stuff
 });
});
</script>

jQuery is really usefuly in Sharepoint as the ID selectors are difficult to work with. jQuery abstracts some of that from you giving you access to much simpler selectors and binding.

  • Thanks for this answer. Unfortunately, I can only edit through Sharepoint Designer and not allowed to have access to much so I'm not sure how to get the jQuery library in there to use this. I have added <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> before my code in the AdditionalPageHead control, but the code is not firing. Do you have any recommendations on how I can insert jQuery into Sharepoint? – nicolefdesigns Dec 16 '14 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.