CODEWITHSUNDEEP
jquery
susan
susan

Reputation: 382

Use jQuery to get name from element to be used for another element

I need to pull the name from elements which are hidden to the user (style="display: none") and use it for another element which is in a modal (and is visible to the user when activated).

Modal Fields:

<div class="productAttributeList" style="display: none">
<div class="productAttributeRow productAttributeConfigurableEntryText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">Gift Message:</span>
        </label>
    </div>
    <div class="productAttributeValue">
    <input type="text" class="Field validation productAttributeFluidWidth"
        name="attribute[141]" value=""  />
    </div>
    <div class="cf"></div>
</div>
<div class="productAttributeRow productAttributeConfigurableEntryText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">Delivery Date:</span>
        </label>
    </div>
    <div class="productAttributeValue">
    <input type="text" class="Field validation productAttributeFluidWidth"
        name="attribute[177]" value=""  />
    </div>
    <div class="cf"></div>
</div>

Visible Fields:

<div class="modal hide fade in" id="product-options">                    
<div class="modal-header center">
    <a class="close modal-close l-m" data-dismiss="modal" 
aria-hidden="true">x</a>                
</div>         
<div class="modal-body ll-m r-m">
    <!--- Delivery Date Field --->
    <div id="datepickerDiv">                   
        <label for="datepicker" class="name rl-m">Desired Delivery Date:</label>
        <br />           
        <input type="text" class="Field validation productAttributeFluidWidth 
rl-m" id="datepicker" value="" placeholder="ex. 01/01/2013"/>    
        <div class="cf"></div>                     
        <hr />
    </div>
    <!---- Gift Message ---->
    <div id="GiftMessageOption" class="top-m btm-m">
        <h5>Gift Message</h5>                    
        <label for="giftMsg">
            <small>Please type your desired message (optional)</small>:<br />
        </label>                       
        <textarea class="Field validation productAttributeFluidWidth" 
id="giftMsg" value=""></textarea>                       
        <div class="cf"></div>                    
    </div> 
</div><!-- end of modal body-->   
<div class="modal-footer">                           
    <button id="modalCancel" class="btn btn-small" data-dismiss="modal" 
aria-hidden="true">Cancel</button>        
    <button href="#" id="addtocart" class="btn btn-small btn-warning">
<i class="icon-shopping-cart icon-white"></i>&nbsp;Add To Cart</button>        
</div><!-- end of modal footer -->

From the hidden fields, I want to get the name from the first input[type="text"] and use it for the input[type="text"] id #datepicker in the modal. Also from the hidden fields I want to get the name from the 2nd input[type="text"] and use it for the input[type="text"] id #giftMsg in the modal. I've had a similar issue recently and used jQuery .attr('name') but can't figure out how to apply it here...having a hard time figuring out how to call the values since the labels and inputs for the hidden fields are in different divs sharing the same classes. The hidden fields are generated by a shopping cart server so I cannot alter them whereas I created the modal and the fields therein are totally editable.

Here is what I've attempted unsuccessfully:

<script>      
$("#datepicker").attr('name',
$(".productAttributeConfigurableEntryText span.name:contains('(Standard)') input[type=text]").attr('name')); 

$("#giftMsg").attr('name',
$(".productAttributeConfigurableEntryText span.name:contains('(Gift Message)').productAttributeValue input[type=text]").attr('name')); 
</script>

Fiddle is here: Fiddle

Thank you.

Upvotes: 0

Views: 116

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Here's a more organized approach,knowing that the radios could be incorporated as well:

/* collect all the inputs, radio, textarea and select*/
var originalInputs=$('.productAttributeList  :input');

var newElArray=[
   /* selector , index of original input*/
  ['#datepicker',0],
   ['#giftMsg',1]
   /* add a selector/index for radios*
]

/* now use index of original input to match to modal fields*/
$.each(  newElArray,function(i,arr){
    var newName= getInputName( arr[1])
     $(arr[0]).attr('name', newName);
     /* simple way to test, display name beside elemnt*/
    $(arr[0]).after( newName);
})



function getInputName( index){
     return originalInputs.eq(index).attr('name');
}

Now just go through and add [idSelector,index] to newElArray for each of the inputs you need to name

DEMO

Upvotes: 1

Related Questions