• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 402
  • Last Modified:

How to populate a textbox field with value from hidden field using javascript

I am building a table with about 1000 rows of data using asp.net. The table contains buttons and textboxes etc [see screenshot].

Once the table renders in the browser, i allow the end user to click the button and add a value to a text box, then they can undo their changes with another button.

trouble is, since this is such a large table that is required to be built each time the page loads, the intergation [postback] on the client side is sluggish.

I would like to render the table once in the browser, then use js for the interactive peices:
Click a button =  add value to textbox and apply a css class to the header row.
Click another button = undo those changes and apply another css class.

How can I do this using JavaScript instead of the asp.net methods i am using on postback?
<tr id="ContentPlaceHolder1_hr2" class="headerrow">
		<td class="number">2</td>
		<td colspan="6">00157 ARTICHOKES BABY TRAY PAK 16/9 CT</td>
		<td>1<span class="tdlabel"> Sold</span></td>
		<td>0<span class="tdlabel"> Allocated</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnFIFO2" value="FIFO" id="ContentPlaceHolder1_btnFIFO2" disabled="disabled" class="aspNetDisabled" /></td>
	</tr>
	<tr class="contentrow">
		<td><input type="hidden" name="ctl00$ContentPlaceHolder1$hdnj3" id="ContentPlaceHolder1_hdnj3" value="2" /></td>
		<td>32049503</td><td>**Ocean Mist        </td>
		<td>08/26/11</td><td>        </td>
		<td><span>10</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnAddAllocation_3" value="add" id="ContentPlaceHolder1_btnAddAllocation_3" class="addbutton" /></td>
		<td><input name="ctl00$ContentPlaceHolder1$txbAllocatedQuantity3" type="text" id="ContentPlaceHolder1_txbAllocatedQuantity3" style="width:40px;" /></td>
		<td colspan="2"><input id="ContentPlaceHolder1_cbQC3" type="checkbox" name="ctl00$ContentPlaceHolder1$cbQC3" /></td>
	</tr>
	<tr id="ContentPlaceHolder1_hr3" class="headerrowmod">
		<td class="number">3</td>
		<td colspan="6">00480 BEANS GREEN 25 LB</td>
		<td>2<span class="tdlabel"> Sold</span></td>
		<td>0<span class="tdlabel"> Allocated</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnFIFO3" value="FIFO" id="ContentPlaceHolder1_btnFIFO3" /></td>
	</tr>
	<tr class="contentrow">
		<td><input type="hidden" name="ctl00$ContentPlaceHolder1$hdnj5" id="ContentPlaceHolder1_hdnj5" value="3" /></td>
		<td>32025501</td>
		<td>**Red Barn          </td>
		<td>08/19/11</td>
		<td>        </td>
		<td><span>8</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnAddAllocation_5" value="add" id="ContentPlaceHolder1_btnAddAllocation_5" class="addbutton" /></td>
		<td><input name="ctl00$ContentPlaceHolder1$txbAllocatedQuantity5" type="text" value="2" id="ContentPlaceHolder1_txbAllocatedQuantity5" style="width:40px;" /></td>
		<td colspan="2"><input id="ContentPlaceHolder1_cbQC5" type="checkbox" name="ctl00$ContentPlaceHolder1$cbQC5" /></td>
	</tr>
	<tr class="contentrow">
		<td><input type="hidden" name="ctl00$ContentPlaceHolder1$hdnj6" id="ContentPlaceHolder1_hdnj6" value="3" /></td>
		<td>32037901</td>
		<td>***Hogeland Farm    </td>
		<td>08/19/11</td>
		<td>        </td>
		<td><span>130</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnAddAllocation_6" value="add" id="ContentPlaceHolder1_btnAddAllocation_6" class="addbutton" /></td>
		<td><input name="ctl00$ContentPlaceHolder1$txbAllocatedQuantity6" type="text" id="ContentPlaceHolder1_txbAllocatedQuantity6" style="width:40px;" /></td>
		<td colspan="2"><input id="ContentPlaceHolder1_cbQC6" type="checkbox" name="ctl00$ContentPlaceHolder1$cbQC6" /></td>
	</tr>
	<tr class="contentrow">
		<td><input type="hidden" name="ctl00$ContentPlaceHolder1$hdnj7" id="ContentPlaceHolder1_hdnj7" value="3" /></td>
		<td>32097701</td>
		<td>                    </td>
		<td>EXPECTED</td>
		<td>        </td>
		<td><span>728</span></td>
		<td><input type="submit" name="ctl00$ContentPlaceHolder1$btnAddAllocation_7" value="add" id="ContentPlaceHolder1_btnAddAllocation_7" class="addbutton" /></td>
		<td><input name="ctl00$ContentPlaceHolder1$txbAllocatedQuantity7" type="text" id="ContentPlaceHolder1_txbAllocatedQuantity7" style="width:40px;" /></td>
		<td colspan="2"><input id="ContentPlaceHolder1_cbQC7" type="checkbox" name="ctl00$ContentPlaceHolder1$cbQC7" /></td>
	</tr>

Open in new window

9-23-2011-8-41-59-AM.png
0
jsvb1977
Asked:
jsvb1977
  • 5
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
>undo those changes and apply another css class.

which one all the previous changes or only the last hit on add?
0
 
jsvb1977Author Commented:
the 'undo' would apply to any changes inside the specific panel. each 'panel' is visually segmented by a darker-gray bg color. the css class defines the bg color on the 'panel header'.

... the 'panel header' is simply a table row that has a css class applied to it.

Jason
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leakim971PluritechnicianCommented:
>any changes inside the specific panel.

all the changes of a panel or only the last change?
0
 
jsvb1977Author Commented:
all the changes inside the panel. I havent built this logic in a code behind method [accessed during postback] but i image i would do it by grabbing the id of the button that is clicked, parsing out the row number from that id, then looping through all the other rows that fall within that panel and clearing the text box values... and also changing the css style of the header row so the bg color switches back to the light gray.
0
 
leakim971PluritechnicianCommented:
put this in the header section :
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" language="javascript">
 $("document").ready(function() {
    
    $(":submit[value='add']").click(function(e) {
        e.preventDefault();
        var $h = $(this).closest("tr").find(":hidden:eq(0)");
        var $t = $(this).closest("td").next("td").find(":text");        
        $t.val( $h.val() );
        $(this).closest("tr").prevAll("tr[class^='headerrow']:first").css("background-color","#555");        
    })
    $(":submit[value='FIFO']").click(function(e) {
        e.preventDefault();
        $header = $(this).closest("tr");
        $header.css("background-color","#DDD");
        $header.nextUntil("tr[class^='headerrow']").find(":text").val("") // that panel and clearing the text box values
    })
})
</script>

Open in new window


Test page : http://jsfiddle.net/2cukX/
0
 
jsvb1977Author Commented:
holy crap, dude! nicely done...
A couple of things:
1. what is that test page?
2. i wont be able to test this until Monday morn, but do you forsee any issues with linking to jquery 1.4.x?
3. how do i prevent the page from posting back when the buttons are clicked? isn't that the default behavior?
4. i am going to work on this offline, but given what you have done already i will throw it out there:
- the way this web app will work is that it will take the Qty Sold Value and add it to the text box when the user clicks the add button. I will need to perform some math so that if the available qty is less than the total quantity, i will need to only add that amount to the text box.

again, nicely done -- and that test page is really helpful! I cant wait to try this out...
Jason
0
 
leakim971PluritechnicianCommented:
1. http://doc.jsfiddle.net/
2. no problem with 1.4, just change the version on th test page and click on update button to test with 1.4
3. already the case
4. good luck



0
 
jsvb1977Author Commented:
leakim971:

Trying to work out the math condition but am failing:
                [b]var $r = $(this).closest("td").prev("span").find(":text");[/b]
                var $h = $(this).closest("tr").find(":hidden:eq(0)");
                var $t = $(this).closest("td").next("td").find(":text");
                if ($r.val() < $h.val()) {
                    $t.val($r.val());
                } else {
                    $t.val($h.val());
                }

Open in new window


I think the if condition is written correctly, but i think how i am trying to populate the var $r is incorrect. The HTML of the value I am trying to store in the var looks like this:

        <td><span>130</span></td>
        <td><input type="submit" name="ctl00$ContentPlaceHolder1$btnAddAllocation_6" value="add" id="ContentPlaceHolder1_btnAddAllocation_6" class="addbutton" /></td>

Open in new window


Can you assist? I feel like I am close.
Jason
0
 
jsvb1977Author Commented:
This 'seems' to be working: is this how you would do it?

                var $r = $(this).closest("td").prev("td").find("span");
                var $h = $(this).closest("tr").find(":hidden:eq(0)");
                var $t = $(this).closest("td").next("td").find(":text");
                if ($r.text() < $h.val()) {
                    $t.val($r.text());
                } else {
                    $t.val($h.val());
                }

Open in new window

0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now