Avatar billede cyberdude Nybegynder
24. juli 2005 - 12:42 Der er 8 kommentarer

tilføje 5 rækker i formular

Hejsa

Jeg sider og bøvler med en bestillings formular, som har følgende felter :
<tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>

Som standart vises der 5 rækker... men er der nu en der ønsker at bestille mere end 5 forskellige vare vises der i bunden et

<a href="#" title="opdater og tilføj 5 tomme rækker">Opdater</a>

Men hvordan hulen gør jeg det lige sådan at der rent faktisk genereres 5 nye rækker og disse bliver vist i bunden af den liste der i forvejen findes, det skal være muligt at trykke "uendeligt" antal gange på knappen...

Nogen bud ??
Avatar billede roenving Novice
24. juli 2005 - 12:44 #1
Findes linket også inde i tabellen ?-)
Avatar billede roenving Novice
24. juli 2005 - 12:54 #2
Ideen kunne være at gøre således:

-- sæt et id på den første af dine tabelrækker, samt på den første, som kommer  efter det sted, der skal indsættes ...
Ved klik på linket udføres:

-- Hent tr med id til variabel
-- Opret ny ved at klone rækken
-- Tøm alle input-felter i den nye række (for en sikkerheds skyld !-)
-- insertBefore rækken efter ...

-- hvis linket (og submit osv. !-) er udenfor tabellen, gør det det en anelse lettere !o]
Avatar billede cyberdude Nybegynder
24. juli 2005 - 13:23 #3
linket og submit er uden for tabellen....

her er hele tabellen / opbygningen

<table width="100%" border="0" cellspacing="0" cellpadding="5">
                        <form action="/pages/vis/97/1/86" name="bestilling" method="post">
                            <tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>
                            <tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>
                            <tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>
                            <tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>
                            <tr>
                                <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
                                <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
                                <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
                            </tr>
</table>
                        <table width="100%" border="0" cellspacing="2" cellpadding="0">   
<tr>
<td align="left" width="20%"><a href="#" title="opdater og tilføj 5 tomme rækker">Opdater</a></td>
                                <td align="left" width="80%"><input type="submit" name="Submit_send_bestilling" value="Send Bestilling" class="button_100"></td>
                            </tr>
                            </form>
                        </table>
Avatar billede roenving Novice
24. juli 2005 - 13:24 #4
Fixer det lige, men jeg vil da lige starte med at skrive, at du har ulovlig nesting, men det er kun et spørgsmål om at flytte form-tags udenfor tabellerne, så det er ikke det svære !-)
Avatar billede roenving Novice
24. juli 2005 - 13:34 #5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Indsæt flere rækker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function insertRows(){
  var raekke = document.getElementById('stamRaekke');
  var nyRaekke = raekke.cloneNode(true);
  var inps = nyRaekke.getElementsByTagName("INPUT");
  for(i=0;inps.length>i;i++){
    inps[i].value = "";
  }
  raekke.parentNode.appendChild(nyRaekke);
  for(i=0;4>i;i++){
    nyRaekke = nyRaekke.cloneNode(true);
    raekke.parentNode.appendChild(nyRaekke);
  }
}

</script>
</head>
<body>
  <form action="/pages/vis/97/1/86" name="bestilling" method="post">
    <table width="100%" border="0" cellspacing="0" cellpadding="5">
      <tr id="stamRaekke">
        <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
        <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
        <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
      </tr>
      <tr>
        <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
        <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
        <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
      </tr>
      <tr>
        <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
        <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
        <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
      </tr>
      <tr>
        <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
        <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
        <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
      </tr>
      <tr>
        <td align="left" width="10%"><input type="text" name="varenr[]" value="" maxlength="8" class="txtfield_60"></td>
        <td align="right" width="10%"><input type="text" name="antal[]" value="" maxlength="10" class="txtfield_30"></td>
        <td align="left" width="80%"><input type="text" name="varebeskrivelse[]" value="" class="txtfield_350"></td>
      </tr>
    </table>
    <table width="100%" border="0" cellspacing="2" cellpadding="0">   
      <tr>
        <td align="left" width="20%"><a href="#" title="opdater og tilføj 5 tomme rækker" onclick="insertRows();return false;">Opdater</a></td>
        <td align="left" width="80%"><input type="submit" name="Submit_send_bestilling" value="Send Bestilling" class="button_100"></td>
      </tr>
    </table>
  </form>
</body>

</html>
Avatar billede olebole Juniormester
24. juli 2005 - 17:47 #6
<ole>

Husk lige at ændre klonens ID, så snart kloningen er foretaget ... ellers vil der fremkomme flere elementer med samme ID  ;o)

/mvh
</bole>
Avatar billede roenving Novice
24. juli 2005 - 17:51 #7
Ups, ja ...

<script language="javascript" type="text/javascript">
function insertRows(){
  var raekke = document.getElementById('stamRaekke');
  var nyRaekke = raekke.cloneNode(true);
  nyRaekke.id = "";
  var inps = nyRaekke.getElementsByTagName("INPUT");
  for(i=0;inps.length>i;i++){
    inps[i].value = "";
  }
  raekke.parentNode.appendChild(nyRaekke);
  for(i=0;4>i;i++){
    nyRaekke = nyRaekke.cloneNode(true);
    raekke.parentNode.appendChild(nyRaekke);
  }
}

</script>
Avatar billede cyberdude Nybegynder
08. oktober 2005 - 13:00 #8
har ikke glemt det, men kommer til denne opgave snart igen, det var blot for at være på forkant med opgaven, jeg stillede spørgsmålt så tideligt
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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