[JeZZifelt]

Jag ville markera tydligt när man lägger in något i en varukorg och tänkte att det enklaste var att lägga till en onclick och göra en animerad bild som visar en grön bock när man klickar och sedan återgår till det vanliga plustecknet.
KOD:

<input type="image" name="my-add-button" src="jcart/images/plus2.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus2check.gif'" />


Produkterna ligger listade var för sig i ul och li taggar. Sedan har jag subprodukter som ligger i en div inom huvudproduktens ul som även de har animerade onclick bilder.

Det ser ut att funka jättebra, tills jag inser att när jag lagt till en produkt i varukorgen och lägger till en annan så kommer den gröna bocken upp på båda produkterna. Detta händer dock inte när jag trycker på subprodukternas plustecken. De beter sig precis som jag vill, när jag klickar på en visas bocken och sedan återgår till plustecken, när jag klickar nästa visas bara bock för den produkten jag klickat på o.s.v.

Varför fungerar det inom subprodukternas divar men inte i huvudlistan?

Vore bra om det fanns något enkelt alternativ att lösa detta på, utan att behöva t.ex. döpa varje produktbild för sig. Det är nämligen en ganska lång lista, så hoppas på att det går att fixa någon enkel lösning.

Tacksam för er hjälp!

[frecka]

Du försöker ändra ett src attribut på en input tagg. Lägg din onclick på din bildtagg så funkar det. alltså <img> taggen

Ursprungligen postat av JeZZifelt

Jag ville markera tydligt när man lägger in något i en varukorg och tänkte att det enklaste var att lägga till en onclick och göra en animerad bild som visar en grön bock när man klickar och sedan återgår till det vanliga plustecknet.
KOD:

<input type="image" name="my-add-button" src="jcart/images/plus2.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus2check.gif'" />


Produkterna ligger listade var för sig i ul och li taggar. Sedan har jag subprodukter som ligger i en div inom huvudproduktens ul som även de har animerade onclick bilder.

Det ser ut att funka jättebra, tills jag inser att när jag lagt till en produkt i varukorgen och lägger till en annan så kommer den gröna bocken upp på båda produkterna. Detta händer dock inte när jag trycker på subprodukternas plustecken. De beter sig precis som jag vill, när jag klickar på en visas bocken och sedan återgår till plustecken, när jag klickar nästa visas bara bock för den produkten jag klickat på o.s.v.

Varför fungerar det inom subprodukternas divar men inte i huvudlistan?

Vore bra om det fanns något enkelt alternativ att lösa detta på, utan att behöva t.ex. döpa varje produktbild för sig. Det är nämligen en ganska lång lista, så hoppas på att det går att fixa någon enkel lösning.

Tacksam för er hjälp!

[allstars]

vad gör knappen - laddar den om sidan eller sker det ett event som lägger till produkten i kundvagnen? Förklara lite mer.

[JeZZifelt]

Ursprungligen postat av frecka

Du försöker ändra ett src attribut på en input tagg. Lägg din onclick på din bildtagg så funkar det. alltså <img> taggen

Jo, fast jag har ju bara input-taggen.. Har alltså ingen bildtagg.. :S

Ursprungligen postat av allstars

vad gör knappen - laddar den om sidan eller sker det ett event som lägger till produkten i kundvagnen? Förklara lite mer.

Den lägger till produkten i kundvagnen. Det är ju inget problem med själva den biten, utan problemet är att när jag klickar på bilden sker "onclick" på alla knappar som redan blivit tryckta på, jag vill ju endast att den knappen jag trycker på just DÅ, ska ändra bild på onclick.
Jag känner att jag förklarar mig väldigt luddigt, men vet inte hur jag ska beskriva det.

[Clarence]

Ursprungligen postat av JeZZifelt

Jo, fast jag har ju bara input-taggen.. Har alltså ingen bildtagg.. :S


Den lägger till produkten i kundvagnen. Det är ju inget problem med själva den biten, utan problemet är att när jag klickar på bilden sker "onclick" på alla knappar som redan blivit tryckta på, jag vill ju endast att den knappen jag trycker på just DÅ, ska ändra bild på onclick.
Jag känner att jag förklarar mig väldigt luddigt, men vet inte hur jag ska beskriva det.

Koden du postar bör endast ändra SRC på det egna elementet, det verkar något annat som ställer till det och utan att se mer komplett kod vågar jag inte ens gissa på vad.

[JeZZifelt]

[kod]

<?php
include_once('jcart/jcart.php');
session_start();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Language" content="Swedish" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="jcart/css/jcart.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss-articles/" />
<script language="JavaScript">
function OpenCloseDiv(divName){
if (divName.style.display == "none") {

divName.style.display="block";

}
else {
divName.style.display="none";
}
}
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>

<script type="text/javascript" src="floating.js"></script>
</head>
<body>
<div id="header">
<h1></h1>
<h2></h2>
</div>

<div id="wrap">
<a name="top" id="top"></a>

<div id="center2">
<h2></h2>
<p></p>
<br />

<!--// NR 1 //-->
<ul>
<li>
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1A" />
<input type="hidden" name="my-item-name" value="Produktnamn 1" />
<input type="hidden" name="my-item-price" value="50" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<strong>Produktnamn 1</strong><br />
<input type="image" name="my-add-button" src="jcart/images/plus.gif" value="add to cart" class="button" onclick="this.src='jcart/images/pluscheck.gif'" />
Standard <a onclick="OpenCloseDiv(nr1)" href="javascript:void(null);" style="color:#606060;"><img src="jcart/images/pil.gif" alt="" class="button2" width="14" height="14" /> Visa alternativ</a>
</fieldset></form>
</li>
</ul>

<div id="nr1" style="DISPLAY: none">
<table width="360" border="0" class="alttable">
<tr>
<td>&nbsp;Alternativ:</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1B" />
<input type="hidden" name="my-item-name" value="Produktnamn 1, alt 1" />
<input type="hidden" name="my-item-price" value="45" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus3.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus3check.gif'" />
Alt 1
</fieldset></form>
</td>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1C" />
<input type="hidden" name="my-item-name" value="Produktnamn 1, alt 2" />
<input type="hidden" name="my-item-price" value="100" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus2.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus2check.gif'" />
Alt 2
</fieldset></form>
</td>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1D" />
<input type="hidden" name="my-item-name" value="Produktnamn 1, alt 3" />
<input type="hidden" name="my-item-price" value="65" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus4.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus4check.gif'" />
Alt 3
</fieldset></form>
</td>
</tr>
<tr>
<td><a onclick="OpenCloseDiv(nr1)" href="javascript:void(null);" style="color:#606060;">&nbsp;G&ouml;m alternativ</a></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<!--// SLUT NR 1 //-->

<!--// NR 2 //-->
<ul>
<li>
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="2A" />
<input type="hidden" name="my-item-name" value="Produktnamn 2" />
<input type="hidden" name="my-item-price" value="55" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<strong>Produktnamn 2</strong><br />
<input type="image" name="my-add-button" src="jcart/images/plus.gif" value="add to cart" class="button" onclick="this.src='jcart/images/pluscheck.gif'" />
Standard <a onclick="OpenCloseDiv(nr2)" href="javascript:void(null);" style="color:#606060;"><img src="jcart/images/pil.gif" alt="" class="button2" width="14" height="14" /> Visa alternativ</a>
</fieldset></form>
</li>
</ul>

<div id="nr2" style="DISPLAY: none">
<table width="360" border="0" class="alttable">
<tr>
<td>&nbsp;Alternativ:</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="2B" />
<input type="hidden" name="my-item-name" value="Produktnamn 2, alt 1" />
<input type="hidden" name="my-item-price" value="50" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus3.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus3check.gif'"/>
Alt 1
</fieldset></form>
</td>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="2C" />
<input type="hidden" name="my-item-name" value="Produktnamn 2, alt 2" />
<input type="hidden" name="my-item-price" value="100" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus2.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus2check.gif'"/>
Alt 2
</fieldset></form>
</td>
<td width="33%">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="2D" />
<input type="hidden" name="my-item-name" value="Produktnamn 2, alt 3" />
<input type="hidden" name="my-item-price" value="70" />
<input type="hidden" name="my-item-url" value="" />
<label><input type="hidden" name="my-item-qty" value="1" size="3" /></label>
<input type="image" name="my-add-button" src="jcart/images/plus4.gif" value="add to cart" class="button3" onclick="this.src='jcart/images/plus4check.gif'"/>
Alt 3
</fieldset></form>
</td>
</tr>
<tr>
<td><a onclick="OpenCloseDiv(nr2)" href="javascript:void(null);" style="color:#606060;">&nbsp;G&ouml;m alternativ</a></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<!--// SLUT NR 2 //-->

</div>

<div id="right">
<br />
<div id="floatdiv" style="position:relative; margin:0; padding:0px; z-index:100; width:95%; margin-right:10px;">
<div id="jcart"><?php $jcart->display_cart();?></div>

<?php
//echo '<pre>';
//var_dump($_SESSION['jcart']);
//echo '</pre>';
?>

</div>
</div>
<div style="clear:both;"> </div>

<script type="text/javascript">
floatingMenu.add('floatdiv',
{
targetRight: 10,
targetTop: 10,
snap: true
});
</script>

<div id="footer">
<p></p>
</div>

</div>
<?php
//echo '<pre>';
//var_dump($_SESSION['jcart']);
//echo '</pre>';
?>

<div class="clear"></div>

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/jcart.min.js"></script>
</body>
</html>

[/kod]

Så ser en förkortad version av hela koden ut. Hoppas ni kan lyckas klura ut vad det kan bero på!
Knapparna till alternativen beter sig som de ska, det är alla "huvudprodukter" som krånglar till det..