Avatar billede overisen Novice
29. december 2015 - 15:02 Der er 13 kommentarer og
1 løsning

Reset onChange hvis bruger ændrer tal i formular

Jeg bruger nedenstående lille script til at lægge tal sammen efterhånden som bruger indtaster i de tre input-felter. Det virker fint. Problemet er blot at hvis man efterfølgende ændre i et eller flere af tallene forsætter opsummeringen. Kan scriptet udvides således man sikre at det er de aktuelle tal i de tre felter der indgår i summen?


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body {
    background-color: #F4E4F9;
}
</style>
</head>

<body>
<p>
Test
</p>

<script type="text/javascript">
var sum = 0;
function sumup(tal)
{
  tal = parseInt(tal);
  sum += tal;
  document.getElementById('total').innerHTML = sum;
}
</script>
<head>

<body>
<form action='' method='POST'>
<input type='text' name='tal1' onChange = 'sumup(this.value)' /><br/>
<br><input type='text' name='tal2' onChange = 'sumup(this.value)' /><br/>
<br><input type='text' name='tal3' onChange = 'sumup(this.value)' /><br/>
</form>
sum:<b id='total'>0 </p>
</body>
</html>
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 16:43 #1
det nemmeste er at lave dit indput som et array, og løbe det igennem for hver ændring
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body {
    background-color: #F4E4F9;
}
</style>
<script type="text/javascript">
function sumup(){   
    var sum = 0;
    var ar_tal=document.getElementsByName("tal[]");       
    for(i=0, lng=ar_tal.length; i<lng;i++){           
        tal = (parseInt(ar_tal[i].value) ) ? ar_tal[i].value : 0 ;       
        sum  += parseInt(tal);
    } 
    document.getElementById('total').innerHTML = sum;
}
</script>
</head>
<body>
<p>
Test
</p>
<form action='' method='POST' id='form_indtast'>
<input type='text' name='tal[]'  /><br/>
<br><input type='text' name='tal[]'  /><br/>
<br><input type='text' name='tal[]'  /><br/>
</form>
sum:<span id='total'>0 </span>
<script type="text/javascript">
var el = document.getElementById("form_indtast");
el.addEventListener("change", function() {
    sumup();
});
</script>
</body>
</html>
Avatar billede overisen Novice
29. december 2015 - 18:55 #2
Tak for det hurtige svar. Det virker præcist som ønsket. Der er dog det lille problem at de indtastede data sendes til em mail via en "sender.php". Det virker ikke hvis indtastningsfelterne har samme navn: name='tal[]. Er det noget som let kan løses?
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 20:21 #3
Det virker ikke hvis indtastningsfelterne har samme navn: name='tal[]. Er det noget som let kan løses?

du modtager det i php som et numerisk array af de indput der har en værdi, som du bare løber igennem

hvordan bruger du det pt i php ??, det kan være der skal findes en smartere løsning

måske et assoc array
Avatar billede overisen Novice
29. december 2015 - 20:57 #4
Jeg ved ikke om det giver mening, men er er et uddrag af min "sender.php":

 
  $headers="From: ".$_POST['name']."<".$_POST['email'].">";
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/plain; charset=utf-8\r\n";
  $headers .="Content-Transfer-Encoding: 8bit";
 
  if (@$_POST['customer_copy'])
  {
  $headers .= "\r\nBcc: ".$_POST['email'];
  }
  $body .= "Den " . date("d/m y") . " kl. " . date("G:i") . " skrev " . $_POST['name'] . ":\r\n\r\n" .
  $_POST['email'] . "\r\n".
  'Ø90-nr: '. $_POST['O90'] . "\r\n".
  $_POST['emne'] . "\r\n".
  $_POST['subject'] . "\r\n\r\n".
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 21:04 #5
hvor bruger du tal1-tal3 ??
Avatar billede overisen Novice
29. december 2015 - 21:38 #6
De indgår i "sender.php" således:

$_POST['ejer_textfield'] . '  stald: '. $_POST['tal1'] .'  mark: '. $_POST['tal2'] . '  andet: '. $_POST['tal3'] .  "\n\n" .
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 22:02 #7
jeg lavede den med assoc array

html fil
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body {
    background-color: #F4E4F9;
}
</style>
<script type="text/javascript">
function sumup(){   
    var sum = 0;   
    // http://stackoverflow.com/questions/18074868/getelementsbyname-with-array-like-name
    var ar_tal=document.querySelectorAll("input[name^='tal[']");   
    for(i=0, lng=ar_tal.length; i<lng;i++){           
        tal = (parseInt(ar_tal[i].value) ) ? ar_tal[i].value : 0 ;       
        sum  += parseInt(tal);
    } 
    document.getElementById('total').innerHTML = sum;   
}
</script>
</head>
<body>
<p>
Test
</p>
<form action='sender.php' method='POST' id='form_indtast'>
<input type='text' name='tal[tal1]'><br>
<input type='text' name='tal[tal2]'><br>
<input type='text' name='tal[tal3]'><br>
<input type='submit' ><br>
</form>
sum:<span id='total'>0 </span>


<script type="text/javascript">
var el = document.getElementById("form_indtast");
el.addEventListener("change", function() {
    sumup();
});
</script>

</body>
</html>



sender.php
<?php
// test
echo "<pre>";
print_r($_POST);
echo "</pre>";


$tal = $_POST['tal'];
echo '  stald: '. $tal['tal1'] .'  mark: '. $tal['tal2'] . '  andet: '. $tal['tal3'];

//echo '  stald: '. $_POST['tal']['tal1'] .'  mark: '. $_POST['tal']['tal2'] . '  andet: '. $_POST['tal']['tal3'];
?>
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 22:16 #8
også vil det være nærliggende at omdøbe tal1-tal3 til mere sigende navne
<input type='text' name='tal[stald]'><br>
<input type='text' name='tal[mark]'><br>
<input type='text' name='tal[andet]'><br>


og i php
$tal = $_POST['tal'];
echo '  stald: '. $tal['stald'] .'  mark: '. $tal['mark'] . '  andet: '. $tal['andet'];


men det er bare mig
Avatar billede overisen Novice
29. december 2015 - 22:35 #9
Hvis du gør det, får du så ikke problemer med udtrykket:

var ar_tal=document.getElementsByName("tal[]");

i scriptet?
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 22:42 #10
#9
lagde du mærke til jeg ændrede
var ar_tal=document.getElementsByName("tal[]");
til
var ar_tal=document.querySelectorAll("input[name^='tal[']");
Avatar billede overisen Novice
29. december 2015 - 23:00 #11
Det virker fint i formularen. Problemet er blot at de indtastede data ikke kommer med over i "sender.php"

Her er to rækker fra "sender.php"

række 1 virker ikke
række 2 virker ok (uden sammenlægninger i formularen)

$_POST['ejer_textfield'] . '  stald: '. $_POST['tal[stald]'] .'  mark: '. $_POST['tal[mark]'] . '  andet: '. $_POST['tal[andet]'] .  "\n\n" .
  $_POST['1arb_textfield'] . '  stald: '. $_POST['arb1_stald'] .'  mark: '. $_POST['arb1_mark'] . '  andet: '. $_POST['arb1_andet'] .  "\n\n" .
Avatar billede olsensweb.dk Ekspert
29. december 2015 - 23:12 #12
lav dette om
$_POST['tal[stald]'] .'  mark: '. $_POST['tal[mark]'] . '  andet: '. $_POST['tal[andet]'] .  "\n\n" .

til
$_POST['tal']['stald'] .'  mark: '. $_POST['tal']['mark'] . '  andet: '. $_POST['tal']['andet'] .  "\n\n" .


eller som jeg skrev i #8
$tal = $_POST['tal'];
echo '  stald: '. $tal['stald'] .'  mark: '. $tal['mark'] . '  andet: '. $tal['andet'];


dvs trække $_POST['tal'] ud i en variabel for sig selv, hvis man ikke lige er vand til at læse multidim array, eller bare syntesdet ser pænere ud
Avatar billede overisen Novice
30. december 2015 - 15:33 #13
Perfekt - det var lige det der skulle til. Kan du give mig et svar så jeg kan give dig point?

Under henvisning til dit svar vil jeg nok stille et nyt spørgsmål om hvordan man laver sammentællingen pr række hvis der er tale om et heltg skema med f.eks 10 rækker og dermed 10 sammentællinger uafhængig af hinaden
Avatar billede olsensweb.dk Ekspert
30. december 2015 - 17:27 #14
svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester