Solved

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

Posted on 2011-09-23
10
350 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
 
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now