Keuzeformulier [OPGELOST]

[sjoerdd87]

Hallo,

Ik wilde graag een keuzeformulier maken met Formbuilder ik krijg dit echter niet voor elkaar zie bijlage, iemand die mij misschien kan helpen of misschien dat dit kan met een andere module?

Als er iets niet duidelijk is hoor ik het graag.

Alvast bedankt.

[sjoerdd87]

Zoiets als: http://www.zwano-webdesign.com/offerte- ... en-website

[velden]

Ik heb het ooit gemaakt zo, maar helaas bestaat die site niet meer. Ik kan nog wel wat terugvinden in een beperkte backup.

Ik gebruikte daarvoor een jQuery script: http://www.pengoworks.com/workshop/jque ... plugin.htm

Waar je op moet letten is dat de website eigenaar dan altijd de optelling moet controleren! Het is immers mogelijk om javascript te manipuleren en dan bijvoorbeeld het totaal bedrag te verminderen voordat het formulier verzonden wordt.

Ik maakte in FormBuilder text-input velden aan en die velden kregen een id met vaste prefix:

Aantal: id prefix 'c_' (dus bijvoorbeeld 'c_productA'). Zou ook een dropdown list kunnen zijn

Stuksprijs: id prefix 'p_' (bijvoorbeeld 'p_productA')
(read only en met default waarde: bijv. '€90.00' LET OP PUNT ipv comma!)

Subtotaal: id prefix 't_' (bijvoorbeeld 't_productA')
(read only)

Dit doe je dan per product natuurlijk.

Uiteindelijk krijg je dan nog één veld voor het totaal (readonly) met als id 'totaal'.

De opmaak van het het form deed ik met een custom form template waarin alle velden 'hard coded' in stonden. Dus het was NIET mogelijk voor de website eigenaar om daar eenvoudig een product aan toe te voegen.

Code: Select all

	
voorbeeldstukje:
<tr>
<td class="col1{if $c_nootjes->valid != 1} invalid{/if}">{$c_nootjes->input}</td>
<td class="col2">{$c_nootjes->name}</td>
<td class="col3">&nbsp;</td>
<td class="col4">{$p_nootjes->input}</td>
<td class="col5">{$t_nootjes->input}</td>
         </tr>

...

         <tr>
<td class="totaalprijs" colspan="4">Totaalprijs</td>
<td class="totaal col5">{$totaal->input}</td>
         </tr>
         <tr>
<td class="submit" colspan="4">&nbsp;</td>
<td class="submit col5">{$submit}</td>
         </tr>

Verder gebruikte ik dit javascript om de berekening uit te voeren:

Code: Select all

$(document).ready(function() {
	$("input[id^=c_]").bind("keyup", recalc);
	function recalc(){
    // run the calc() method on each of the "total" fields
    $("input[id^=t_]").calc(
        // the equation to use for the calculation
        "qty * price",
        // we now define the values for the variables defined in the equation above
        {
            // instead of using a static value, we use a jQuery object which grabs all the quantities
            qty: $("input[id^=c_]"),
            // now we define the jQuery object which reads in the "price" from the table cell
            price: $("input[id^=p_]")
        },
        // this function is execute after the calculation is completed, which allows us to
        // add formatting to our value
        function (s){
            // return the number as a dollar amount
            return "€ " + s.toFixed(2);
        },
        // once all calculations are completed, we execute the code below
        function ($this){
            // now we get the sum() of all the values we just calculated
            var sum = $this.sum();

            // now that we have the grand total, we must update the screen
            $("input#totaal").val(
                // round the results to 2 digits
                "€ " + sum.toFixed(2)
            );
        }
    );
}
recalc();
}
)

[sjoerdd87]

Maar er is geen simpele module voor om het zo te maken? zodat klanten hier zelf iets aan toe kunnen voegen enz.?

[sjoerdd87]

Krijg dit nog niet goed werkend, maar nu heb ik een andere idee.

Ik wil met keuzerondjes gaan werken, als je bijvoorbeeld Ja selecteert je hieronder een tekst invoer veld krijg, en als je niks of nee selecteert je geen tekst invoer veld hebt.

Hoe kan ik dit voor elkaar krijgen?

De keuzerondjes heb ik al, maar krijg het nog niet werkend zodat ik een tekst invoer veld krijg.

Alvast bedankt.

[erpee]

Heb je hier wat aan? (Zelf natuurlijk "even" in je form verwerken ...

Code: Select all

<!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=iso-8859-1" />
<__script__>
var gVar="";
function fun(self,taxname)
{
if(self.checked == true)
{
if(gVar != "")
{
document.getElementById(gVar).style.visibility='hi dden';
}
document.getElementById(taxname).style.visibility= 'visible';
gVar=taxname;
}
}
</__script>
</head>

</__body>
<tr>
<td>

<form>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button1" onclick="fun(this,'texbox1')"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2" onclick="fun(this,'texbox2')"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3" onclick="fun(this,'texbox3')"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4" onclick="fun(this,'texbox4')"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1" id="texbox1" style="visibility:hidden">
<br>
texbox 2:
<input type="text" name="texbox2" id="texbox2" style="visibility:hidden">
<br>
texbox 3:
<input type="text" name="texbox3" id="texbox3" style="visibility:hidden">
<br>
texbox 4:
<input type="text" name="texbox4" id="texbox4" style="visibility:hidden">
</form>

</td>
</tr>

<__body>
</__html>

[sjoerdd87]

Heb het anders opgelost, maar toch bedankt voor de hulp.

Heb gewoon een keuzerondjes formulier gemaakt, met hierin ook de keuze anders, en daaronder een leeg veld gezet zodat mensen daar wat in kunnen vullen.

Gr. Sjoerd.

[velden]

Zou je ook willen delen hoe je dat hebt opgelost?

[sjoerdd87]

Zou je ook willen delen hoe je dat hebt opgelost?

Gedaan!