I want to copy text from a blogger blogspot caption table and add it to the img alt, so that it will appear in the fancybox slideshow as the title/caption.
So, this is the HTML I have :
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
And my script is:
$("tr-caption").each(function(){
var Caption = $(this).text();
if (Caption && Caption !== ''){
$(this).parent(img).attr('alt', Caption );
}
});
And this is the output I'd hope for....
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="This is my Caption" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
But it's not working...
Here's a jsfiddle: http://jsfiddle.net/NCqW2/6/
Any help greatly appreciated! Thanks for taking some time to look!
Replacing
$(this).parent(img).attr('alt', Caption );
with
$(this).parent().prev().find('img').attr('alt', Caption );
should do it.
Related
Hello im working on a game fan guide page but now I will not go any further and search for help.
I need a way to get the next or/and previous img on click a previous arrow and next arrow.
All this is new for me and i have test many but nothing have work, i hope anyone can help me out.
now i have see my html have make issus but i have fix and now i can post my html.
I have the CSS style and HTML for a better view split but in my html it is alle in one and a meta for viewport.
edit: sry, but i have make thinking errors. it is not enough to change the pic i have to change the wohle div content.
explane on click next have to change div id="card1" class="card_content" to div id="card2" class="card_content"
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
background-color: black;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}
<table>
<tr>
<td>
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</td>
</tr>
</table>
<div id="card1" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="card2" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png">
</td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="fade" class="card_overlay"></div>
The code below may help you.
// index.html
<img src="01.png" id="pic">
// script.js
document.getElementById("pic").setAttribute("src", "02.png")
Got it done with
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off">
But how do i make the javascript: void with a script.js
Have an html table as follows (# of rows vary)..
<table id="issuetable">
<tbody>
<tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a> <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
</td>
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
<tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a> <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
How can I use javascript once the page finishes loading to iterate through each row and delete the cell "issue_actions" only if the row contains an image with alt="IT Help"?
My own suggestion would be:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
The use of .empty() removes the content of the <td> elements, but does not remove the <td> itself, which should prevent the table layout being distorted by rows with differing cell-counts.
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
The following uses remove(), which demonstrates the slight visual problem:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
References:
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
siblings().
Use the pseudo selector :has and then, find your element you want to remove :
$('tr:has(img[alt="IT Help"]) .issue_actions').remove();
Here is the original site. usahvacsupply.com Once you search an item, the search results take over the whole page and kill the background. I'm not sure how to control the overflow. The part of the site where the overflow goes haywire is http://www.usahvacsupply.com/servlet/Categories. I'll post more code if needed. The code on the bottom corresponds with the http://www.usahvacsupply.com/servlet/Categories page. any help would be appreciated.
<table id="body" width="960" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="100%">
<script type="text/javascript">
if (!createBookmark) {
var createBookmark = function() {
if (window.sidebar) // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title, location.href, '');
else if (window.external) // IE Favorite
window.external.AddFavorite(location.href, document.title);
else // all others
alert("Please press CTRL+D to bookmark this page.");
};
}
</script>
<table id="layout" class="panel-layout" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td id="p1" valign="top">
<script type="text/javascript">
var ProStores;
if (!ProStores)
ProStores = {};
ProStores.PageLink = function(link) {
var strParams = 's=' + link.getAttribute('page');
var strThis = location.href;
if (strThis.indexOf('?') > -1) {
if (strThis.search(/s=[0-9]+/) > -1)
link.href = strThis.replace(/s=[0-9]+/, strParams);
else
link.href = strThis + '&' + strParams;
}
else
link.href = strThis + '?' + strParams;
};
</script>
<link href="/servlet/0-3-30d-727500-com.prostores.panel.List%7Estyle.css/Asset" title="style" type="text/css" rel="stylesheet">
<style type="text/css">
<table id="cataloglist.31" class="list-boundary" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" rules="none">
<tbody>
<tr>
<td valign="top" align="left" colspan="1">
<h1 align="left">Search Results</h1>
<div class="" align="left" style="padding:2px">
<p>
Found
<b>1000</b>
product(s) for
<b>All</b>
(1-25 of 1000)
</p>
</div>
</td>
</tr>
<tr>
<td valign="middle" colspan="1">
<div class="product-list-container">
<div class="top">
<div class="right">
<div class="left"></div>
</div>
</div>
<div class="titlebar group-title">
<b> Breakers | Bryant Carrier Payne Day&Night </b>
</div>
<div class="panel-content">
<center>
<table class="" width="100%" cellspacing="2" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="1" style="height:1px"></td>
</tr>
<tr>
<td class="item-cell" width="100%" valign="bottom" height="100%" style="padding:8px">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
</td>
</tr>
<tr>
</tbody>
</table>
</center>
</div>
<div class="bottom">
</div>
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I can see that your problem isn't occuring anymore, but when you search for a product that doesn't exist. Your div.footerBorder gets floated over the background to the left. Fix that by applying:
margin-left: 10px;
To your
/servlet/0-0-30d-13e0e1158d0-legacycss/Asset
Inside your ".footerBorder" on row 240, replace the whole rule to:
.footerBorder {
width: 960px;
min-height: 160px;
background: url("/images/store_version1/footer.gif") no-repeat;
margin-left: 10px;
}
Edit:
If that conflicts on other pages, let me know and I'll help you with it. Cheers!
I really hope that one of you JS Gurus can shed light on this problem.
Currently I'm working on a webpage that has small table with 5 text lines in column one.
And an image in column two.
The client is asking for the following:
open the page, the "default image" should show
roll-on the text, the "temp image" should show
roll-off the text, the "default image" should show
click on the text, that temp image should become the "default
image"
I was able to achieve objectives #1, #2, and #3.
However, to be able to achieve #4, the client's old code simply made identical pages, each with a different "default image". And assigned each link to point to that page.
Is it possible to achieve objective #4 without having to make duplicate pages?
Maybe, there could be a javascript code that refreshes the page, and alters the default image according to the link (text) clicked?
Am I even making any sense? Sorry, I've hardly ever used forums. I'm not sure if I'm using the correct etiquette's here.
Here is the code that I'm using:
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src=' "+imageName+" ' border='0' height='207' width='400'/>";
obj.innerHTML = imgTag;
return;
}
</script>
<table cellpadding="6" cellspacing="6">
<tbody>
<tr>
<td width="33%" valign="top" nowrap><span style="font-size: 12pt;"> <a id="one" href="#"
OnMouseOver="changeIt('/images/stories/article/compressor_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/compressor_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Compressor Stations</strong></a></span></td>
<td valign="top" nowrap><strong>4,000,000 hp</strong> </td><td rowspan="5" valign="top"> </td>
<td rowspan="5" valign="top">
<div id="image1"><img src="images/stories/article/composite_experience.jpg" alt="one" border="0" height="207" width="400" /></div></td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="two" href="#"
OnMouseOver="changeIt('/images/stories/article/export_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/export_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Export, Storage, and<br />Loading Systems</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>1,000,000,000 bbls</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="three" href="#"
OnMouseOver="changeIt('/images/stories/article/pipeline_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/pipeline_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Pipeline Systems</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>100,000 miles</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="four" href="#"
OnMouseOver="changeIt('/images/stories/article/production_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/production_experience.jpg','image1');"
style="text-decoration: none;"><strong>Production and<br />Processing Facilities</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>2,000,000 bpd</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="five" href="#"
OnMouseOver="changeIt('/images/stories/article/pump_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/pump_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Pump Stations</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>300,000 hp</strong> </td>
</tr>
</tbody>
</table>
Thank you all in advance.
I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.
I don't know much about jQuery. Please help me to solve this problem.
In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".
And again the total sum of all the prices should appear in the button as a Total.
Please note: all the row values are coming from my database table based on the selection of items by users.
I have used only this code to show values in my invoice.jsp page:
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center" >
<s:textfield value="%{price}" name="" size="6"></s:textfield>
</td>
</tr>
</s:iterator>
And my invoice.jsp output looks like this:
I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).
I also tried this but I am still unable to solve my problem.
My full JSP code:
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74%">
<s:form action="dfs" id="form3" theme="simple">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="your_content">
<tr>
<td valign="top" height="10%">
<div id="invNum">Invoice# 12688</div>
<div id="ttielMain">Vision Books</div>
<div id="Orgaddress"> Thamel Kathmandu Nepal</div>
<div id="phoneNum"> Tel# 00977-1-12173803</div>
<div id="websiteOrg"> www.thebestbookfinder.com</div>
</td>
</tr>
<tr>
<td valign="top" width="100%" align="left">
----------------------------------------------------------- -----------------------------------
</td>
</tr>
<tr>
<td height="6%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
<td width="65%" align="left">Title</td>
<td width="10%" align="left">Unit Price</td>
<td width="10%" align="center">Qty</td>
<td width="15%" align="left">Line Total</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="65%" align="left">
-------------------------------------------------------
</td>
<td width="10%" align="left">----------</td>
<td width="10%" align="center">-----</td>
<td width="15%" align="left">-------------</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="65%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center"><s:textfield value="%{price}" name="" size="6"></s:textfield></td>
</tr>
</s:iterator>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
<s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">Discount:<sj:textfield name="amt" size="1" placeholder=" %"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
Total: <s:property value="%{'' + #attr.total}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
As #flow said, use .change():
$(function() {
$('input[name^="quantity"]').change(function() {
var unitprice = $(this).siblings('input[name^="unitprice"]').val();
$(this).siblings('input[name^="price"]')
.val($(this).val() * unitprice);
});
});
Use .change() on your inputs.
jQuery Docs - Change