CODEWITHSUNDEEP
javascriptjquery
CodeForGood
CodeForGood

Reputation: 749

Accessing an individual column in a row which is selected by default with a radio button on page load

With the code below, I am trying to access a particular column "quantity" from a row in a table. What is happening is one of the rows is selected by default when page loads while the rest of the rows can be selected when user chooses. I created a click event handler to handle manual selection.

When accessing the column with a class name, it returns nothing. I need to assign this value to an input box in the same form. I would attach the image of the row enter image description here

Table Markup:

        <tr valign="top" class="row6">
            <td>
            {if $tpl_order_details[lineitems].quantity > 1}
                {if $radio_flag == "false"}
                    <input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" checked onclick="handleClick(this);"/>
                    {assign var=radio_flag value='true'}
                {else}
                    <input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" onclick="handleClick(this);" />
                {/if}   
            {/if}
            </td>   
            <td>
            <a href="http://{$smarty.server.SERVER_NAME}/search/?q={$tpl_order_details[lineitems].sku}" target="_new">{$tpl_order_details[lineitems].sku}</a>
            </td>
            <td>&nbsp;
            </td>
            <td>{$tpl_order_details[lineitems].item_description}</td>
            <td class="quantity_class" >{$tpl_order_details[lineitems].quantity}</td>
            <td>{$tpl_order_details[lineitems].item_status}</td>

Markup with the Input field outside the loop:

<table>
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity" 
 min="1" max="6"></td>
<td><button type="submit" value="Save" 
name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel" 
name="submit_action">Cancel</button></td>
</tr>
</table>

JavaScript:

// This is to handle the radio button selected by default on page load.
$( document ).ready(function() {
    var firstRadioValue = 0;
    firstRadioValue = $("input[name='line_item']:checked").val();
    $('input[name="split_quantity"]').attr('max', firstRadioValue);
    var quantity = $(".radio_class").parent().find(".quantity_class").val();
    alert(quantity);
});

// This is to handle the radio button that user actually chooses.    
var currentRadioValue = 0;
function handleClick(line_item) {
    alert('New value: ' + line_item.value);
    currentRadioValue = line_item.value;
    $('input[name="split_quantity"]').attr('max', currentRadioValue);
}

Upvotes: 0

Views: 53

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34416

You're not going far enough up the tree to find the class. You have:

var quantity = $(".radio_class").parent().find(".quantity_class").val();

which gets you to the parent <td> The element you're looking for is a sibling of this:

<td class="quantity_class" >...

What you want to do is go one element higher (the table row), then find the class you're looking for from there, so use closest(). Note that .quantity_class doesn't have a value so you have to get the text in the table cell:

var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();

In addition, I do not see any markup with the max attribute or any markup with the name of split_quantity.

EDIT - based on a conversation with the user it was found that there needed to be a number of changes. First, the table holding split_quantity needed to be identified so it could be targeted in the grander markup:

<table id="split_quantity_id">
    <tr>
        <td><label for="new_quantity">Enter New Quantity</label></td>
        <td><input type="number" id="split_quantity" name="split_quantity" min="1" max="6"></td>
        <td><button type="submit" value="Save" name="submit_action">Submit</button></td>
        <td><button type="submit" value="Cancel" name="submit_action">Cancel</button></td>
    </tr>
</table>

Then we got rid of the onclick="handleClick(this) inline JavaScript in favor of letting jQuery handle the click event. Finally we refactored the functions:

$(function() {
    var firstRadioValue = 0;
    firstRadioValue = $("input[name='line_item']:checked").closest('tr').find('.quantity_class').text();
    $('input[name="split_quantity"]').attr('max', firstRadioValue);
    var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
    console.log(quantity);

    $('table').delegate('.line_item', 'click', function(){
        currentRadioValue = $(this).closest('tr').find('.quantity_class').text();
        console.log(currentRadioValue);
        $('#split_quantity_id').find('[name="split_quantity"]').attr('max', currentRadioValue);
    });
});

NOTE: It was also discovered that the OP is using Smarty 2 which is an older version of Smarty using an older version of jQuery, so .delegate() is used instead of on().

Upvotes: 2

Related Questions