[JavaScript] Collection interfereert met PHP afhandeling

[Reveller]

Binnen mijn CMS heb ik een form waarin de boomstructuur van de website wordt getoond. Vereenvoudigd:

code:

<form id="menu" action="menu.php">
  <input name="node[99][title]" type="text" value="Handleiding">
  <input name="node[11][title]" type="text" value="Nieuws">
  <input name="node[72][title]" type="text" value="Andere Dingen">
  <input type="submit" value="Opslaan">
</form>

Als dit form gesubmit wordt, doorloop ik de array en sla de eventuele wijzigingen op:

PHP:

$node = $_POST['node'];

foreach ($node as $key => $value)
{
  $result = db_query("UPDATE nodes SET title = '%s' 
                      WHERE nid = %d", $value['title'], $key);
}

Nu wil ik echter ook een clientside check uitvoeren om te kijken of de gebruiker geen input boxes leeg heeft gelaten. Als dat wel het geval is, kleuren ik ze rood, met dank aan Crisp. Hij kwam immers met de oplossing:

code:

function check()
{
  var objForm = document.forms['menu'];
  
  for(var i = 0; i < objForm.elements['node[]'].length; i++)
  {
    if(objForm.elements['node[]'][i].value.length == 0)
    {
      alert(objForm.elements['node[]'][i].value);
      objForm.elements['node[]'][i].style.backgroundColor = "red";
    }
  }
}

Daar stond wel de volgende opmerking bij:

crisp schreef op maandag 15 november 2004 @ 23:24:
Als je een collection wilt, geef ze dan ook allemaal dezelfde name:

HTML:

<form id="menu" action="#">
  <input name="node[]" type="text" value="Handleiding">
  <input name="node[]" type="text" value="Nieuws">
  <input name="node[]" type="text" value="">
  <input type="button" onclick="check();" value="Opslaan">
</form>

En zie hier mijn probleem: om het clientside javascript aan de praat te krijgen, moet ik mijn node[77][title] vervangen door node[]. Mijn serverside afwerking komt hierdoor wel in de knoei.

Vraag: is er een oplossing zodat ik en mijn clientside checks kan uitvoeren en de serverside afhandeling kan behouden zoals die nu is?

[André]

Je kunt met getElementsByTagname je form doorlopen en dan met indexOf alle inputs opzoeken die "node[" en "][title]" in de naam hebben.

[Reveller]

Zou iemand dat wat meer uiteen kunnen zetten?

[ Voor 132% gewijzigd door Reveller op 21-11-2004 22:53 ]

[Reveller]

Ik heb nu dit:

code:

<script>
function check()
{
  x = document.forms['menu'].elements.getElementsByTagName('input');

  for (i = 0; i < x.length; i++)
  {
    if (x[i].value.indexOf('title['))
      alert(x[i].value);

  }
}
</script>

<form id="menu" action="#">
  <table border="0">
    <tr>
      <td>
        <input name="title[]" type="text" value="Handleiding"><br>
        <input name="title[]" type="text" value="Nieuws"><br>
        <input name="alias[]" type="text" value="Dingen"><br>
        <input name="alias[]" type="text" value="">
      </td>
    </tr>
    <tr>
      <td align="right">
        <input type="button" onclick="check();" value="Opslaan">
      </td>
    </tr>
  </table>
</form>

Ik had eigenlijk verwacht dat alleen "Handleiding" en "Nieuws" ge-alert zouden worden. Echter, ook "Dingen", "" en "Opslaan" worden geretourneerd. hoe kan dat nu?

[André]

Je zat heel ver in de goede richting:

code:

function check()
{
  x = document.forms['menu'].getElementsByTagName('input');

  for (i = 0; i < x.length; i++)
  {
    if (x[i].name.indexOf('title[') > -1) { alert(x[i].value); }
  }
}

[Verwijderd]

Reveller schreef op donderdag 18 november 2004 @ 18:50:

code:

<form id="menu" action="menu.php">
  <input name="node[99][title]" type="text" value="Handleiding">
  <input name="node[11][title]" type="text" value="Nieuws">
  <input name="node[72][title]" type="text" value="Andere Dingen">
  <input type="submit" value="Opslaan">
</form>

Ontstaat hier niet een probleem omdat de variabele title niet is gedefinieerd?

HTML:

<input name="node[99]['title']" type="text" value="Handleiding">

Let op de ' om title.

[Reveller]

Dubbelpost...

[ Voor 255% gewijzigd door Reveller op 21-11-2004 22:54 ]

[Reveller]

* kick * ik hoop dat iemand mijn vraag kan beantwoorden? ik zit echt vast namelijk

[Reveller]

Uiteindelijk ben ik nu zo ver dat het scriptje werkt op 1 ding na - ik weet niet waar ik de cnt variabele moet ophogen om ervoor te zorgen dat de eerste dubbele waarden geel worden, het tweede paar oranje, etc. Wie kan mij hierbij helpen? Ik heb al overal in het script cnt++ gezet, maar ik krijg niet de goede uitkomst....

code:

<script>

function check()
{
  x = document.forms['menu'].getElementsByTagName('input');
  a = 0;

  for (i = 0; i < x.length; i++)
  {
    if (x[i].name.indexOf('title') > -1)
    {
      x[i].style.backgroundColor = "white";

      if (x[i].value.length == 0)
        x[i].style.backgroundColor = "red";
    }

    if (x[i].name.indexOf('alias') > -1)
    {
      a++;
    }
  }

  var color = new Array("yellow", "orange", "lime", "aqua", "blue");
  var cnt   = 0;

  for (i = 0; i < x.length; i++)
  {
    if (x[i].name.indexOf('alias') > -1)
    {
      x[i].style.backgroundColor = "white";

      for (j = 0; j < x.length; j++)
      {
        if (x[j].name.indexOf('alias') > -1)
        {
          if (x[i].value == x[j].value)
          {
            if (i != j)
            {
              x[i].style.backgroundColor = color[cnt];
            }
          }
        }
      }
    }
  }
}

</script>


<form id="menu" action="#">
  <table border="0">
    <tr>
      <td>
        <input name="node[21][title]" type="text" value="Handleiding"><br>
        <input name="node[44][title]" type="text" value="Handleiding"><br>
        <input name="node[44][title]" type="text" value="Nieuws"><br>
        <input name="node[95][title]" type="text" value="Dingen">
      </td>
      <td>
        <input name="node[21][alias]" type="text" value="vrijdag/handleiding"><br>
        <input name="node[44][alias]" type="text" value="vrijdag/handleiding"><br>
        <input name="node[44][alias]" type="text" value="dingen/"><br>
        <input name="node[95][alias]" type="text" value="dingen/">
      </td>
    </tr>
    <tr>
      <td colspan="2" align="right">
        <input type="button" onclick="check();" value="Opslaan">
      </td>
    </tr>
  </table>
</form>

[ Voor 99% gewijzigd door Reveller op 21-11-2004 22:52 ]

[Reveller]

* kick *