Solved

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

Posted on 2011-09-23
10
363 Views
Last Modified: 2012-06-27
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
Comment
Question by:jsvb1977
  • 5
  • 4
10 Comments
 
LVL 28

Expert Comment

by:sammySeltzer
ID: 36591028
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36593532
>undo those changes and apply another css class.

which one all the previous changes or only the last hit on add?
0
 

Author Comment

by:jsvb1977
ID: 36593761
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 82

Expert Comment

by:leakim971
ID: 36593798
>any changes inside the specific panel.

all the changes of a panel or only the last change?
0
 

Author Comment

by:jsvb1977
ID: 36593813
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36593871
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
 

Author Comment

by:jsvb1977
ID: 36593928
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36593935
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
 

Author Comment

by:jsvb1977
ID: 36599869
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
 

Author Comment

by:jsvb1977
ID: 36599983
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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question