23 svar · 1 686 visningar · startad av Asa
Har en sida med olika texter som har varsin radioknapp. Har 3 olika grupper med radioknappar. Varje grupp heter ex radiogrupp_1, radiogrupp_2 och har ett varsitt unikt value.
Jag vill nu när jag klickar i en radioknapp att den ska skriva ut det valda info i ex en div ruta som står för just den knappen. Klickar jag sen i en av grupp 2 ska den också komma fram i diven. Vill även sen uppdatera ett pris.
value kommer se ut som följande: value="unikt_värde;priset"
Hoppas på hjälp! Webforum är bäst :)
1. Välj grupp 1
* Infotext 1 grupp 1 - 100:- ( name ="radio_grupp1" value = "Infotext 1 grupp 1;100" )
* Infotext 2 grupp 1 - 200:- ( name ="radio_grupp1" value = "Infotext 1 grupp 2;200" )
2. Välj grupp 2
* Infotext 1 grupp 2 - 100:- ( name ="radio_grupp2" value = "Infotext 1 grupp 2;100" )
* Infotext 2 grupp 2 - 100:- ( name ="radio_grupp2" value = "Infotext 1 grupp 2;200" )
3. Välj grupp 3
* Infotext 1 grupp 3 - 100:- ( name ="radio_grupp3" value = "Infotext 1 grupp 3;100" )
* Infotext 2 grupp 3 - 200:- ( name ="radio_grupp3" value = "Infotext 1 grupp 3;200" )
* agerar radioknapp i mitt exempel ovan
Ska vara som apple har:
http://store.apple.com/se/buy-mac/macbook-air?product=MD711S/B&step=config#
Hittade denna:
http://dabrook.org/examples/cdia/javascript/05/form.html
Men fattar inte hur jag får in ett till värde som skall skickas med och skrivas ut.
För mina värden ser ju ut så här:
value = "Infotext;100"
Man måste splitta på något vis man jag vet inte hur :/
Koden jag använder nu när jag testar mig fram är:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var totalPris = 0;
function calcTotal()
{
$("input:checked").each(function()
{
//This happens for each checked input field
var valueX = $(this).attr("value").split(';');
var namn = valueX[0];
var pris = valueX[1];
totalPris += parseInt(pris);
});
}
//This happens when the page loads
calcTotal();
$("span.pris").html("" + totalPris + ":-");
$("input:checkbox, input:radio").click(function()
{
totalPris = 0;
calcTotal();
$("span.pris").html("" + totalPris + ":-");
});
});
</script>
<title></title>
</head>
<body>
<form action="" method="post">
<fieldset id="packages">
<legend>Packages</legend>
<ol>
<li>
<input type="radio" name="package" id="package_basic" value="Info;99" checked />
<label for="package_basic">Basic: This package is aight. ($99)</label>
</li>
<li>
<input type="radio" name="package" id="package_pro" value="Info2;149" />
<label for="package_pro">Professional: This package straight rocks. ($149)</label>
</li>
</ol>
</fieldset>
<fieldset id="delivery_speed">
<legend>Delivery Speed</legend>
<ol>
<li>
<input type="radio" name="speed" id="speed_1day" value="Info3;49" />
<label for="speed_1day">1 day ($49)</label>
</li>
<li>
<input type="radio" name="speed" id="speed_3days" value="Info4;0" checked />
<label for="speed_3days">3 days (no charge)</label>
</li>
<li>
<input type="radio" name="speed" id="speed_5days" value="Info5;-39" />
<label for="speed_5days">5 days (-$39)</label>
</li>
</ol>
</fieldset>
<fieldset id="browser_support">
<legend>Browser Support</legend>
<input type="checkbox" name="browser" id="browser" value="Info6;100" />
<label for="browser">Will work in IE 12 ($100)</label>
</fieldset>
<span class="pris" style="font:30px helvetica"></span>
</form>
</body>
</html>
är det bara presentations innehåll eller det är något du skall posta in? Var skall "info" texten presenteras? per grupp?
Hur stora möjligheter har du med att ända din markup?
Jag hade använt mig av html5 data-xxx attribut och hämtat innehåll där ifrån.
du hade kunnat göra om din funktion att både köras när domready och när du ändra ett av input fälten (snälla använd inte click på input när du menar att du vill uppdatera priset när du gör en ändring):
$(document).ready(function() {
function calcTotal() {
var totalPris = 0;
$("input:checked").each(function() {
//This happens for each checked input field
var valueX = $(this).attr("value").split(';');
var namn = valueX[0];
var pris = valueX[1];
totalPris += parseInt(pris, 10);
});
$("span.pris").html(totalPris + ":-");
}
//This happens when the page loads
calcTotal();
$("input:checkbox, input:radio").change(calcTotal);
});
Skall även kunna sparas till databasen i nästa steg. Infotexten kan visas ex så här:
Package: Valt värde
Delivery Speed: Valt värde
Om man klickat i checkbox
Checkoxar: Alla valda checkboxar
Totalsumman: xxx kr
Som Apple har här: http://store.apple.com/se/buy-mac/macbook-pro - klicka på Välj
Kan säkert ändra mycket. Sidan ligger på citynetwork.
var vill du att den presenteras? efter ol? eller du har en summerings div element som du vill presentera det?
Är varje fieldset en grupp för sig?
value="" är ju den datan du vill jobba med i backend ... men om Info nu bara är för presentation så hade jag inte lagt den i value.
Kommer ha en summerings div element med ex namnet totalpriset.
Ja det är det.
Okej, jag kommer ju behöva skicka med unika värdet också för just det valet kom jag på.
Är pris och namn typ som jag vill skicka och presentera medan unikaIDförValetienGrupp och kanske pris skall skickas till backend.
Kanske egentligen behöver id´t och hämta från db på nästa steg.
Så en div med all summering av info texterna?
Ja ska helst ser ut så här:
---------------------------
Modell Min modell
Storlek Medium
Panel Liggande
Tillvalspaket Stora
Tillval Brevlåda
Skorsten
---------------------------
Totalpris 500kr
är det ungefär denna struktur du kommer att köra? för Modell, storlek osv är ju en huvudgrupp som man behöver lista ut hur de hör ihop med dina radio/checkbox boxar.
Ja precis, det kommer se ut så och tillval kommer då kunna vara många för de ska vara checkboxar. Men även radioval
Storlek
* Medium 100:-
* Large 200:-
* XL 300:-
Panel
* Liggande panel 0:-
* Stående panel 0:-
* Lockpanel 100:-
Paket
* Inget paket 0:-
* LILLA PAKETET 250:-
* MELLANPAKETET 500:-
* STORA PAKETET 750:-
Tillval
Insida
* Oinredd 0:-
* Interiörpaket 1 590:-
* Interiörpaket 2 590:-
# Isolering (kan även väljas till här)
Målning
* Måla själv 0:-
* Färdigmålad 390:-
* Grundmålad utsida 190:-
Övriga
# Blomlådor 300:-
# Ljugarbänk 250:-
# Brevlåda 200:-
* = radio
# = checkbox
Ja, så mycket har jag förstått, men har du en plan på markup:en? Eller var datan skall komma ifrån (dvs hur vet en radio knapp vilken "grupp" den tillhör)?
Det enklaste är att göra något i stil med:
<input type="radio" name="painting" value="värdet i databasen" checked data-info="info1" data-price="99" data-group="Målning" />
där har du infon, pris och gruppen i varje element, så spelar det inte en jätte stor roll hur din HTML markup bli, annars bli det enklare om kan presentera hur du kommer presentera ditt kod struktur... för på något sätt måste input:en hitta vilken grupp den tillhör.
Det har jag inte tänkt på att lägga in. Men kan testa göra så.
Typ så här?
name="storlek"
name="panel"
name="paket"
name="tillval_insida"
name="tillval_malning"
name="tillval_ovriga"
Går det att ha så för att kolla grupp den tillhör?
Men hur använder man min kod med din exempel input du skrev då?
Typ så här?
name="storlek" name="panel" name="paket" name="tillval_insida" name="tillval_malning" name="tillval_ovriga"Går det att ha så för att kolla grupp den tillhör?
Ja? du kan exempelvis ha id på din rubrik med samma värde som dina name? så man kan hämta ut en "bättre" info än bara "name"? Som sagt.... det går att lösa på många sätt.
Kika här hur sidan kommer se ut ungefär.
Steg två skall alla förvalda radioknappar visas i min lilla box till höger. Sen ändras om man ändrar nåt val. Tillval så ska allt man klickar i komma under varann.
något i denna stil kanske:
<script type="text/javascript">
$(document).ready(function() {
var inputs = $("input:checkbox, input:radio");
var createList = function(group) {
var markup = [];
$.each(group, function(a,b) {
var header = $("#caption_" + a).text();
markup.push('<div class="header">' + header + '</div>');
$.each(this, function(){
markup.push('<div class="item">');
markup.push(this.info);
markup.push('<div class="price">');
markup.push(this.price);
markup.push('</div>');
markup.push('</div>');
})
});
return markup.join('');
};
function calcTotal() {
var totalPris = 0;
var obj = {};
inputs.filter(':checked').each(function() {
var $this = $(this);
var price = parseInt($this.data('price'), 10);
var info = $this.data('info');
if(!obj[this.name]) {
obj[this.name] = [];
}
obj[this.name].push({
info: info,
price: price
});
totalPris += price;
});
$("#summary").html(createList(obj));
$("span.pris").html(totalPris + ":-");
}
calcTotal();
inputs
.on('change', calcTotal);
});
</script>
<form action="" method="post">
<fieldset>
<legend id="caption_tillval_malning">MÅLNING & FÄRGVAL</legend>
<ol>
<li>
<label>
<input type="radio" name="tillval_malning" value="0" checked data-info="Måla själv" data-price="0" />
Jag kommer måla själv.
</label>
</li>
<li>
<label>
<input type="radio" name="tillval_malning" value="3900" checked data-info="Färdigmålad" data-price="3900" />
Färdigmålad utsida i önskad kulör (Grundfärg och täckfärg eller slamfärg)
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend id="caption_ovriga_tillval">ÖVRIGA TILLVAL</legend>
<ol>
<li>
<label>
<input type="checkbox" name="ovriga_tillval" value="0" checked data-info="Loft med räcke och stege" data-price="1500" />
Loft med räcke och stege, 120 cm högt
</label>
</li>
<li>
<label>
<input type="checkbox" name="ovriga_tillval" value="3900" checked data-info="Färdigmålad" data-price="900" />
Riktigt dörrtrycke med låskista för standard Assa-lås eller motsvarande (Standard är ett kulknäppe i mässing)
</label>
</li>
</ol>
</fieldset>
<span class="pris" style="font:30px helvetica"></span>
</form>
<div id="summary"></div>
Precis så :) Tack
Om jag nu vill ha en koll inne i denna:
var createList = function(group) {
var markup = [];
$.each(group, function(a,b) {
var header = $("#caption_" + a).attr("value");
markup.push('<div class="header" style="float:left;width:30%;font-weight:bold">' + header + '</div>');
$.each(this, function(){
markup.push('<div class="item" style="float:right;width:60%;">');
markup.push(this.info);
markup.push('</div>');
markup.push('<div class="clear"></div>');
})
});
return markup.join('');
};
Som kollar om värdet i "data-info" är tomt eller bara -
På så vis ska den inte skriva ut något allt i summeringen av all text.
Vill även ha priset presenterat så här: 11 000:- och inte 11000:-