How to avoid getting the extra special character at the initial text box while using the jquery map function -join(/)

Question

i have the below javascript function.

           function formsubmit()
            {
              var missedReasonCode =$('input[name*="MissedReasonCode"]').map(function()     
           {return $(this.id).val();}).get().join("/") ;
              $("#reasonValue").val(missedReasonCode); 
         alert($("#reasonValue").val());--able to get the list of values as in the format say /a/b/c  
            document.getElementById("frm1").submit();
                  }

        ***and the below is the part of the jsp page code:***


                <form:textarea path="reasonValue"  id="reasonValue" cssClass="textbox width100" cssStyle="visibility:hidden"></form:textarea>                

                </form:form>

             <div id="mask" style="display: none;"></div>

            <div id="adddelTBSec" class="adddelTBSection" style="display: none;">
          <div class="line marT20">Missed Reason Code</div>
         <div class="line">


             <div class="unit width60 padR10 boxSizing marT5">

             <input type="text"  name="MissedReasonCode" maxlength="150" size="50"               value="" class="padR10 boxSizing"/>

                   </div>

      <div class="unit icoPlus marT5" onclick="adddelTBSection(this,   'adddelTBContainer',1)"></div>
    <div class="unit marL10 icoMinus marT5" onclick="adddelTBSection(this,   'adddelTBContainer', 0)"></div>
</div>
             </div>



                 <div id="addNewMisdReasonCode" class="ltBox" style="display: none;">
             <div>
                <div class="ltBoxHdr">
                  Add New "Missed Reason Codes"
                  </div>
             <div class="ltBoxContent" style=" width: 640px;">
                    <div id="adddelTBContainer" style="maxheight:200px;overflow:auto;">  
                        <div>
                          <div class="line">Missed Reason Code</div>
                          <div class="line">


                    <div id="clear" class="unit width60 padR10 boxSizing marT5">
                     <input type="text"  name="MissedReasonCode"           value=""  maxlength="150" size="50"  class="padR10 boxSizing"/>
                    </div>
         <div class="unit icoPlus marT5" onclick="adddelTBSection(this, 'adddelTBContainer', 1)"></div>
                </div>
                </di v>
            < /div>

the code takes the list of values and saves into the database on form submit , i am able to get the list of values and save in the database something like this /a/b/c

but i want to get rid of this initial special character / ,any help is appreciated

Answer 1

You have to takeout the first "/" with .slice() this way:

$("#reasonValue").val(missedReasonCode.slice(1));
//--------------------^^^^^^^^^^^^^^^^^^^^^^^^^--try using this way

From the docs:

Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.

Answer 2

It's a bit hard to tell exactly from you jsp code, but I'm guessing that you have a chunk of HTML that is acting as the template for each newly added item, i.e. logically you've got chunks of html like this:

• new item template (hidden)
• item a
• item b
• item c
• ...

Because of that your $('input[name*="MissedReasonCode"]') selector is grabbing the (empty) template item two, which is being added to the front of your mapped string, hence the initial /. So you've got two options:

1. fix your selector to only include the "real" items (either by ignoring hidden items, or by using a more specific selector based on a container around the real items)
2. after making your mapped string, trim the initial / with substring (i.e. missedReasonCode.substring(1);)