Javascript uitkomst in html projecteren alleen voor1 ID en niet bij elk form en submi

[da1roy]

Hallo,

Ik heb mij zojuis aangemeld in de hoop dat er hier wat javascript experts rondsurfen.

Ik heb een script om van div opties de prijs op te tellen.
De totaal prijs word boven en onder het formulier geprint.

Precies zoals ik dat wil, Alleen nu voeg ik zojuist een zoek formulier aan mijn site toe.
Wordt de totaalprijs van mijn totaal script ook boven en onder mijn zoekform weergegeven.

Met andere woorden dat gaat het script dus bij elke form tag doen.
en bij elke submit button..

Dit is de code

[JS]
$(document).ready(function()
{
var total = 0;

function calcTotal()
{
$("input:checked").each(function()
{
//This happens for each checked input field
var value = $(this).attr("value");
total += parseInt(value);
});
}

//This happens when the page loads
calcTotal();
$("form").before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');
$(":submit").before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');

$("input:checkbox, input:radio").click(function()
{
total = 0;
calcTotal();
$("p.total").html("Totaal <strong>&euro;" + total + "</strong>");
});
});

[/JS]

Zou het mogelijk zijn om er een ID aan te koppelen, dat de submit en form tag een bepaald ID bevat.
Of is er een andere oplossing?

Ik hoop dat julllie mij verder kunnen helpen.

 

[Robin S]

Hej Roy, welkom op 't forum

Om te zorgen dat jQuery het goede element pakt, kun je de selectors (regel 17, 18) wat aanpassen en een id meegeven. (In het voorbeeld "myFormId").
[JS]var id = "myFormId";
$("form#" + id).before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');
$("#" + id + " :submit").before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');[/JS]

Om te zorgen dat dat werkt, moet je natuurlijk even zorgen dat die id-attribute ook in je HTML terug te vinden is:

<form id="myFormId">
    <!-- ... -->
</form>

Hoop dat dit helpt
Gr. Robin

 

[da1roy]

Werkt prima Robin. Thnx.

Alleen krijg ik het totaal nu alleen nog onderaan de pagina en niet meer bovenin.
Ik heb in de html alleen id="myFormId" erbij gezet en .js aangepast naar:

[JS]$(document).ready(function()
{
var total = 0;

function calcTotal()
{
$("input:checked").each(function()
{
//This happens for each checked input field
var value = $(this).attr("value");
total += parseInt(value);
});
}

//This happens when the page loads
calcTotal();
var id = "myFormId";
$("form" + id).before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');
$("#" + id + " :submit").before('<p class="total">Totaal <strong>&euro;' + total + '</strong></p>');

$("input:checkbox, input:radio").click(function()
{
total = 0;
calcTotal();
$("p.total").html("Totaal <strong>&euro;" + total + "</strong>");
});
});[/JS]

Ik krijg verder geen fouten, alleen mis ik een stukje output?

 

[Robin S]

Zijn er dan meerdere <form>-elementen waar de totaalprijs neergezet moet worden? In dat geval zou je met een klasse moeten werken - vervang gewoon id door class in je HTML, en # door . in je javascript

Btw, er mist nog een # op regel 18 in je script:
[JS]$("form#" + id) //...
//-----^[/JS]
(Of dus een . als de totaalprijs bij meerdere <form>-elementen neergezet moet worden )

Edit: Even wat documentatie
jQuery selectors: http://api.jquery.com/category/selectors/
jQuery ID-selector: http://api.jquery.com/id-selector/
jQuery class-selector: http://api.jquery.com/class-selector/
jQuery descendant-selector: http://api.jquery.com/descendant-selector/

 

[da1roy]

Btw, er mist nog een # op regel 18 in je script

Dat was hem, lol zelfs met kopieeren plakken kan men schijbaar nog fouten maken
Bedankt voor de hulp alles lijkt nu goed te gaan.

 

[Robin S]

Haha Graag gedaan, blij dat 't werkt