[JS] Checkbox uitvinken moet 1 waarde verwijderen in textbox - Softwareontwikkeling

vrijdag 17 april 2009 11:57

Acties:

0 Henk 'm!

Topicstarter

Beste mensen,

Ik heb dagenlang geGoogled om een oplossing te vinden voor mijn probleem, helaas niet gelukt. Ik heb wel gevonden hoe de waarde te resetten maar dit is niet de bedoeling...
Om maar gelijk met het probleem op de proppen te komen:

Ik heb meerdere checkboxen met waarden, en deze waarden moeten in een textbox gezet worden.
De checkboxen worden dynamisch door PHP aangemaakt, dit werkt verder gewoon.
Het erin zetten is me gelukt met een

code:

1	document.getElementById('to').value += naam;

maar het verwijderen lukt niet.
De waarden worden allemaal afgescheiden van elkaar met een ", " en de bedoeling is dat als er meerdere zijn geselecteerd en je vink een checkbox uit, dat dan alleen deze wordt verwijderd.

Ik ben verder niet echt bekend met javascript, maar ik denk zelf dat het moet lukken met een check, waar de value op de waarde van de checkbox lijkt, maar ik heb geen idee hoe dit te doen.

Het script is voor een soort message systeem, en het verzenden, ontvangen etc lukt allemaal. Alleen het verwijderen van de gebruiker als je de checkbox uit vinkt niet.

Ik zou het ten zeerste appreciëren als jullie mij zouden kunnen helpen.

Hieronder mijn code:

code:

<?php
if(isset($_GET["to"])){
    $to=$_GET["to"].", ";
}
if(isset($_GET["sub"])){
    $sub=$_GET["sub"];
}
if(isset($_GET["msg"])){
    $msg=$_GET["msg"];
}
include("connect.php");
$getit=mysql_query("SELECT `user` FROM `users`")or die(mysql_error());
$total=mysql_num_rows($getit);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nieuw Bericht</title>
<link rel="Stylesheet" type="text/css" href="../CSS/mail.css">
<script language="javascript">
function to(name){
    document.getElementById('to').value += name;
}
</script>
</head>
<body>
<div class="adressen">
<form name="adressen">
<input name="Iedereen" type="checkbox" onchange="to('<?php $names=mysql_query("SELECT * FROM `users`")or die(mysql_error());
                                                    while($name=mysql_fetch_array($names)){ echo $name["user"].", ";}?>')" />Iedereen<br />
<?php
$names=mysql_query("SELECT * FROM `users`")or die(mysql_error());
while($name=mysql_fetch_array($names)){
?>
<input name="<?php echo $name["user"];?>" type="checkbox" onchange="<?php echo "to('".$name["user"].", ')";?>" /><?php echo $name["user"];?><br />
<?php
}
?>
</form>
</div>
<div class="new_mail">
<table>
<form name="newmail" method="post" action="send.php">
    <tr>
<td>Aan:</td>
<td><input name="to" id="to" type="text" size="66" value="<?php echo $to;?>"></td>
    </tr>
    <tr>
<td>Onderwerp:</td>
<td><input name="subject" type="text" size="66" value="<?php echo $sub;?>"></td>
    </tr>
    <tr>
<td>Bericht:</td>
<td><textarea name="message" cols="50" rows="10"><?php echo $msg;?></textarea></td>
    </tr>
    <tr>
<td><input type="submit" value="Verzenden!" /></td>
<td></td>
    </tr>
</form>
</table>
</div>
</body>
</html>

vrijdag 17 april 2009 12:16

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Mag ik vragen waarom je ze uberhaupt comma-separated in een textbox zet? De checkboxes zelf doen namelijk al exact wat je wilt.

Als makkelijke oplossing overigens kun je natuurlijk de textbox iedere keer opnieuw vullen, ipv proberen de uitgeklikte checkbox eruit te filteren.

[ Voor 58% gewijzigd door Bosmonster op 17-04-2009 12:17 ]

vrijdag 17 april 2009 12:19

Acties:

0 Henk 'm!

HuHu

Je gebruikt de functie to() dus niet alleen voor het toevoegen, maar ook voor het verwijderen van users. Je aanpak moet dan dus iets anders zijn.

Ik zou ongeveer het volgende doen:

code:

function to() {
  document.getElementById('to').value = ''; // leeg maken

  foreach userCheckbox {
    if userCheckbox is checked {
      document.getElementById('to').value += userCheckbox.value;
    }
  }
}

Dit is natuurlijk pseudo-code, maar het gaat om het idee. Je maakt het veld leeg, loopt daarna over alle checkboxes heen en voor elke checkbox die aangevinkt is voeg je de naam toe aan het to-veld.

vrijdag 17 april 2009 13:19

Acties:

0 Henk 'm!

Raventhorn

Topicstarter

@Bosmonster
Ik haal ze terug via PHP om ze te bezorgen bij de juiste gebruikers, en daar explode ik de array met als seperator de ", "...
en weet je mischien ook hoe ik dat zou kunnen doen? (die opnieuw vullen dan he

)

@HuHu
dan maak je toch de hele tekstbalk leeg? de bedoeling is dat alleen de naam van de uitgevinkte checkbox wordt weggehaald :\

edit:
Oke, ik snap het principe, alleen... hoe zet ik het in elkaar?
Ik ben niet erg bekend met Javascript, en ik heb ook geen idee hoe ik die checkboxes dan kan aanroepen, of hoe ik deze het beste kan noemen etc...

[ Voor 36% gewijzigd door Raventhorn op 17-04-2009 13:41 ]

vrijdag 17 april 2009 13:39

Acties:

0 Henk 'm!

HuHu

Ja, je maakt hem helemaal leeg en gaat hem daarna opnieuw vullen met alles wat op dat moment nog aangevinkt is. Dat is het makkelijkste om te doen.

Effectief komt het er dus op neer dat als je een rijtje namen hebt staan en je vinkt er eentje uit, dat die dan verdwijnt. Dat op de achtergrond de hele lijst opnieuw wordt gemaakt is geen probleem, maar alleen maar makkelijker voor jezelf om te maken.

[ Voor 46% gewijzigd door HuHu op 17-04-2009 13:40 ]

vrijdag 17 april 2009 13:40

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Raventhorn schreef op vrijdag 17 april 2009 @ 13:19:
@Bosmonster
Ik haal ze terug via PHP om ze te bezorgen bij de juiste gebruikers, en daar explode ik de array met als seperator de ", "...
en weet je mischien ook hoe ik dat zou kunnen doen? (die opnieuw vullen dan he )

Ehm ja, je kunt toch gewoon de waardes van de checkboxes doorsturen en uitlezen in PHP

vrijdag 17 april 2009 13:46

Acties:

0 Henk 'm!

Raventhorn

Topicstarter

@HuHu
daar ben ik nu inderdaad ook achter, ik vatte eerst niet helemaal wat je bedoelde.
Ik heb alleen geen idee hoe ik dit moet opzetten, ik ben met JS echt een leek

ik snap de opzet wel, en in welke volgorde, ik weet alleen niet welke commands ik ervoor moet gebruiken...

@Bosmonster
Ik voeg de namen van de geselecteerde personen in in de tekstbox, om deze vervolgens uit te lezen, zo kan de gebruiker van het formulier ook zien naar welke personen hij het bericht stuurt in de "Aan:" balk, in plaats van in de contactenlijst.
Op het moment telt de DB pas een paar entries maar ik weet niet exact hoeveel het er gaan worden, dus dan is dit overzichtelijker

vrijdag 17 april 2009 14:49

Acties:

0 Henk 'm!

Raventhorn

Topicstarter

Het is me gelukt om het deels werkend te krijgen, het probleem is nu dat als er al een naam staat deze overschreven word en dezelfde naam nogmaals toegevoegd wordt (dus als je eerst 'Piet' aanklikt en dan 'Kees' dan staat er "Kees, Kees, ")

mijn code is nu alsvolgt:

code:

function to(name) {
  document.getElementById('to').value = ''; // leeg maken
  
  for (var j=0; j<=<?php print $total;?>;j++) {
    if(document.getElementById('user'+ j).checked) {
      document.getElementById('to').value += name;
    }
  }
}

Heeft dit misschien te maken met dat de functie wordt uitgevoerd met een onchange?
Hopelijk kunnen jullie me ook met dit probleempje helpen?

vrijdag 17 april 2009 14:57

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Raventhorn schreef op vrijdag 17 april 2009 @ 14:49:
code:
1
2
3
4
function to(name) {
...
      document.getElementById('to').value += name;
...

With all due respect; verdiep je eens even in de basic-basics van programmeren danwel JS

Je geeft nu klaarblijkelijk de naam mee aan de functie en zet die keer op keer achter elkaar in de textbox. Als je nou gewoon eens gebruik maakt van de for-loop waar je op dat moment bij het zetten van de value in zit...

[ Voor 28% gewijzigd door RobIII op 17-04-2009 14:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 17 april 2009 15:15

Acties:

0 Henk 'm!

Raventhorn

Topicstarter

@RobIII
Daar dacht ik dus ook aan, maar als ik de name uit function to() haal, dan krijg ik in plaats van de gebruikers de titel van de pagina te zien.
Maar ik snap wel wat je bedoeld, en het was idd een stomme zet gezien ik met PHP al redelijk op weg ben

Ik heb het verder wel opgelost, ik zat te moeilijk te denken

ik heb de name van de checkboxes veranderd naar de namen die ik nodig had, en moest ipv die += name natuurlijk de naam of value van de checkbox hebben...

Om mensen die met hetzelfde probleem kampen, of in de toekomst nog problemen mee krijgen, te helpen zal ik de code posten:

code:

function to() {
    document.getElementById('to').value = ''; // leeg maken

    for (var j=0; j<=<?php print $total;?>;j++) {
        if(document.getElementById('user'+ j).checked) {
            document.getElementById('to').value += document.getElementById('user'+ j).name;
        }
    }
}

$total is PHP variabele met het totaal aantal entries
laatste .name is de naam die de box meekrijgt met dat ID

In ieder geval iedereen hartelijk bedankt voor de hulp!

vrijdag 17 april 2009 15:16

Acties:

0 Henk 'm!

HuHu

En die <= moet natuurlijk een < zijn, anders pak je er één teveel mee (die niet bestaat).

vrijdag 17 april 2009 18:31

Acties:

0 Henk 'm!

Gommers

Is dit niet veel makkelijker.. Ik heb voor onclick gekozen, omdat je in IE eerst een ander element moet selecteren voor dat onchange wordt uitgevoerd.

HTML:

<!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" />
<title>Checkbox</title>
<script type="text/javascript">
function update(obj)
{
    if(obj.checked == false)
    {
        document.getElementById('sendto').value = document.getElementById('sendto').value.replace(obj.name+", ","");
    }
    else
    {
        document.getElementById('sendto').value += obj.name+", ";
    }
}
</script>
</head>
<body>

<form method="post">
    <label for="to">
        <b>Send to:</b>
    </label>
    <input type="text" name="sendto" id="sendto" />
    <p>
        <input type="checkbox" onclick="update(this)" name="email1@domein.nl"/><label for="email1@domein.nl">email1@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email2@domein.nl"/><label for="email2@domein.nl">email2@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email3@domein.nl"/><label for="email3@domein.nl">email3@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email4@domein.nl"/><label for="email4@domein.nl">email4@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email5@domein.nl"/><label for="email5@domein.nl">email5@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email6@domein.nl"/><label for="email6@domein.nl">email6@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email7@domein.nl"/><label for="email7@domein.nl">email7@domein.nl</label><br />
        <input type="checkbox" onclick="update(this)" name="email8@domein.nl"/><label for="email8@domein.nl">email8@domein.nl</label>
    </p>
</form>
</body>
</html>

Pagina: 1

Reageer