[JS] Related menus: form order? - Softwareontwikkeling

donderdag 22 mei 2003 19:39

Acties:

Verwijderd

Topicstarter

Mijn vraag gaat over het volgende artikel:

http://webreference.com/dev/menus/related.html

In dit artikel staan de menus in een bepaalde volgorde. In mijn geval heb ik een form geplaatst tussen menu 1 en 2, met als resultaat dat de menus niet meer werken.

Wat moet ik wijzigen aan dit script zodat de volgorde van de forms niet meer uit maakt?

donderdag 22 mei 2003 19:51

Acties:

André

Analytics dude

Hoe ziet jouw script er nu uit dan?

donderdag 22 mei 2003 20:02

Acties:

Verwijderd

Topicstarter

code:

<FORM NAME="f1" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Menu 1</p>
           <SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)">
            <option value="#">blabla
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </form>
      <form action="form_submit.php" method="post">
        <p>Form ertussen</p>
           <input name="textfield" type="text" id="textfield">
          <input name="Submit" type="submit" id="Submit" value="OK">
        </form>
    </td>
    <td> 
      <FORM NAME="f2" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
          <SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="relate2(this.form,0,this.selectedIndex,0)">
            <p>Menu 2</p>
            <option value="#">blabla
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </form>
      <FORM NAME="f3" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Menu 3</p>
          <SELECT NAME="m3" ID="m3" CLASS=saveHistory onChange="jmp(this.form,0)">
            <option value="#">blabla
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </form>

Zo ziet het script er ongeveer uit (zonder JS dan, omdat dat hetzelfde is als het artikel).

[ Voor 27% gewijzigd door Verwijderd op 23-05-2003 08:46 ]

donderdag 22 mei 2003 20:18

Acties:

André

Analytics dude

Dat formulier wat er tussen staat klopt van geen kant. Er staat geen naam in het formulier wn je submitknop heeft als naam en id de naam submit....

En je kunt zulke lappen code beter tussen [ code ] en [/ code ] plaatsen. En natuurlijk een beetje indenten.

donderdag 22 mei 2003 21:42

Acties:

crisp

Devver

Pixelated

André schreef op 22 mei 2003 @ 20:18:
Dat formulier wat er tussen staat klopt van geen kant. Er staat geen naam in het formulier wn je submitknop heeft als naam en id de naam submit....

En je kunt zulke lappen code beter tussen [ code ] en [ /code ] plaatsen. En natuurlijk een beetje indenten.

Een name attribuut voor een form is uiteraard niet verplicht. Verder is de name="Submit" ook geen belemmering voor eventuele javascript submits (name="submit" uiteraard wel), maar is inderdaad vrij nutteloos.
Kortom: ik zie niet in waarom dit niet zou werken; ben dan ook benieuwd naar de volledige code en eventuele javascript errors...

[ Voor 3% gewijzigd door crisp op 22-05-2003 21:42 ]

Intentionally left blank

vrijdag 23 mei 2003 07:39

Acties:

Verwijderd

Topicstarter

code:

<html>
<head>
<title>Related menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
    .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

if(v){a=new Array();}

function getFormNum (formName) {
    var formNum =-1;
    for (i=0;i<document.forms.length;i++){
        tempForm = document.forms[i];
        if (formName == tempForm) {
            formNum = i;
            correctForm = tempForm;
            break;
        }
    }
    return formNum;
}


function jmp(form, elt)
// The first parameter is a reference to the form.
{
    if (form != null) {
        with (form.elements[elt]) {
            if (0 <= selectedIndex)
                location = options[selectedIndex].value;
        }
    }
}

var catsIndex = -1;
var itemsIndex;
var subItemsIndex;

function newCat(){
    catsIndex++;
    a[catsIndex] = new Array();
    itemsIndex = -1;
}

function soort(txt,url) {
    itemsIndex++;
    a[catsIndex][itemsIndex] = new Array();
    a[catsIndex][itemsIndex].text = txt;
    a[catsIndex][itemsIndex].value = url;
    subItemsIndex = 0;
}

function optie(txt,url) {
    a[catsIndex][itemsIndex][subItemsIndex] = new myOptions(txt,url);
    subItemsIndex++;
}

function myOptions(txt,url){
    this.text = txt;
    this.value = url;
}

// array vullen

if (v) { // ns 2 fix
newCat();
soort("soort1","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
newCat();
soort("soort2","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
soort("soort3","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
soort("soort4","#");
optie("n.v.t.","#");
newCat();
} // if (v)

function relate(formName,elementNum,j) {
// relate first to second (and third) menus
// ie change first menu, changes second, then change third
//
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
    formNum++; // reference next form, assume it follows in HTML
    with (document.forms[formNum].elements[elementNum]) {
        for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
        for(i=0;i<a[j].length;i++){
            options[i] = new Option(a[j][i].text,a[j][i].value); 
        }
        options[0].selected = true;
    }
// change third menu
relate2(formName,elementNum,0,1);
 }
} else {
jmp(formName,elementNum);
}
}

function relate2(formName,elementNum,j,fromRelate) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
    // find first menu's selection
    // fromRelate means "coming from relate function?" 
    //   then increment formNum so k refers to first form, 
    //   not the nonexistent one before it (-1)
    if (fromRelate) formNum++; // assumes forms follow each other 
    k = document.forms[formNum-1].elements[elementNum].selectedIndex;
    if(k<0)k=0; // precaution against missing selected in first menu list - abk
    formNum++; // reference next form, assume it follows in HTML
    with (document.forms[formNum].elements[elementNum]) {
        for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
        for(i=0;i<a[k][j].length;i++){
            options[i] = new Option(a[k][j][i].text,a[k][j][i].value); 
        }
        options[0].selected = true;
    }
 }
} else {
jmp(formName,elementNum);
}
}

function IEsetup(){
    if(!document.all) return;
    IE5 = navigator.appVersion.indexOf("5.")!=-1;
    if(!IE5) {
        for (i=0;i<document.forms.length;i++) {
            document.forms[i].reset();
        }
    }
}

window.onload = IEsetup;

//-->
</SCRIPT></head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr align="left" valign="top"> 
      <FORM NAME="f1" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 1 met menu 1</p>
        <p>
          <SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)">
            <option value="#">optie 1
<option value="#">optie 2
<option value="#">n.v.t.
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </p>
        </form>
      <form action="form_submit.php" method="post" onsubmit="this.elements['field1'].value = document.forms['f1'].elements['m1'].value;">
        <p>Form tussen related menus 1 en 2</p>
        <p>
          <input type="hidden" name="field1">
          <input name="naam_soort" type="text" id="naam_soort">
        </p>
        <p> 
          <textarea name="omschrijving_soort" id="omschrijving_soort"></textarea>
        </p>
        <p> 
          <input name="Submit_soort" type="submit" id="Submit_soort" value="Toevoegen">
        </p>
        </form>
    </td>
    <td> 
      <FORM NAME="f2" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 2 met menu 2</p>
        <p> 
          <SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="relate2(this.form,0,this.selectedIndex,0)">
            <option value="#">soort 1
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </p>
        </form>
      <FORM NAME="f3" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 3 met menu 3</p>
        <p>
          <SELECT NAME="m3" ID="m3" CLASS=saveHistory onChange="jmp(this.form,0)">
            <option value="#">optie 1
            <option value="#">optie 2
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
        </p>
        </form>
      </td>
  </tr>
</table>
</body>
</html>

Ok, bij deze dan de hele code. Wanneer je het form tussen menu 1 en 2 eruit knipt, dan werkt het script wel goed. Waarom werkt het script met een form er tussen niet?

[ Voor 16% gewijzigd door Verwijderd op 23-05-2003 08:47 ]

vrijdag 23 mei 2003 09:16

Acties:

crisp

Devver

Pixelated

maak van regel 106 eens dit:

JavaScript:

1	while (!document.forms[++formNum].elements[0].options); // reference next form, (if it has a select)

Intentionally left blank

vrijdag 23 mei 2003 09:35

Acties:

Verwijderd

Topicstarter

Hmmm, vreemd... Het script zet nu de options van SELECT 3 in SELECT 2 en doet verder helemaal niets met SELECT 3. De volgorde van de menus klopt nu niet meer...

vrijdag 23 mei 2003 10:55

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 23 May 2003 @ 09:35:
Hmmm, vreemd... Het script zet nu de options van SELECT 3 in SELECT 2 en doet verder helemaal niets met SELECT 3. De volgorde van de menus klopt nu niet meer...

ja, er zitten wel meer dingen in die uitgaan van opeenvolgende forms. Het beste zou zijn om het gewoon te herschrijven en de relaties tussen de forms bijvoorbeeld in een array te stoppen.

Intentionally left blank

vrijdag 23 mei 2003 11:07

Acties:

Verwijderd

Topicstarter

Herschrijven??? Ik heb echt geen id hoe ik dat zou moeten doen

vrijdag 23 mei 2003 11:16

Acties:

crisp

Devver

Pixelated

herschrijven als in een andere logica inbouwen om de juiste forms te benaderen. Beetje javascript kennis is daarbij wel gewenst ja

even een snelle opzet:

HTML:

<html>
<head>
<title>Related menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
    .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

if(v){a=new Array();}

function getFormNum (formName) {
    var formNum =-1;
    for (i=0;i<formNames.length;i++){
        if (formName == formNames[i]) {
            formNum = i;
            break;
        }
    }
    return formNum;
}


function jmp(form, elt)
// The first parameter is a reference to the form.
{
    if (form != null) {
        with (document.forms[form].elements[elt]) {
            if (0 <= selectedIndex)
                location = options[selectedIndex].value;
        }
    }
}

var catsIndex = -1;
var itemsIndex;
var subItemsIndex;

function newCat(){
    catsIndex++;
    a[catsIndex] = new Array();
    itemsIndex = -1;
}

function soort(txt,url) {
    itemsIndex++;
    a[catsIndex][itemsIndex] = new Array();
    a[catsIndex][itemsIndex].text = txt;
    a[catsIndex][itemsIndex].value = url;
    subItemsIndex = 0;
}

function optie(txt,url) {
    a[catsIndex][itemsIndex][subItemsIndex] = new myOptions(txt,url);
    subItemsIndex++;
}

function myOptions(txt,url){
    this.text = txt;
    this.value = url;
}

// array vullen

if (v) { // ns 2 fix
newCat();
soort("soort1","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
newCat();
soort("soort2","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
soort("soort3","#");
optie("optie1","#");
optie("optie2","#");
optie("n.v.t.","#");
soort("soort4","#");
optie("n.v.t.","#");
newCat();
var formNames = new Array('f1', 'f2', 'f3');
} // if (v)

function relate(formName,elementNum,j) {
// relate first to second (and third) menus
// ie change first menu, changes second, then change third
//
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
    formNum++; // reference next form, assume it follows in HTML
    with (document.forms[formNames[formNum]].elements[elementNum]) {
        for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
        for(i=0;i<a[j].length;i++){
            options[i] = new Option(a[j][i].text,a[j][i].value); 
        }
        options[0].selected = true;
    }
// change third menu
relate2(formName,elementNum,0,1);
 }
} else {
jmp(formName,elementNum);
}
}

function relate2(formName,elementNum,j,fromRelate) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
    // find first menu's selection
    // fromRelate means "coming from relate function?" 
    //   then increment formNum so k refers to first form, 
    //   not the nonexistent one before it (-1)
    if (fromRelate) formNum++; // assumes forms follow each other 
    k = document.forms[formNames[formNum-1]].elements[elementNum].selectedIndex;
    if(k<0)k=0; // precaution against missing selected in first menu list - abk
    formNum++; // reference next form, assume it follows in HTML
    with (document.forms[formNames[formNum]].elements[elementNum]) {
        for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
        for(i=0;i<a[k][j].length;i++){
            options[i] = new Option(a[k][j][i].text,a[k][j][i].value); 
        }
        options[0].selected = true;
    }
 }
} else {
jmp(formName,elementNum);
}
}

function IEsetup(){
    if(!document.all) return;
    IE5 = navigator.appVersion.indexOf("5.")!=-1;
    if(!IE5) {
        for (i=0;i<document.forms.length;i++) {
            document.forms[i].reset();
        }
    }
}

window.onload = IEsetup;

//-->
</SCRIPT></head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr align="left" valign="top"> 
      <FORM NAME="f1" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 1 met menu 1</p>
        <p>
          <SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form.name,0,this.selectedIndex)">
            <option value="#">optie 1
<option value="#">optie 2
<option value="#">n.v.t.
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form.name,0);">
        </p>
        </form>
      <form action="form_submit.php" method="post" onsubmit="this.elements['field1'].value = document.forms['f1'].elements['m1'].value;">
        <p>Form tussen related menus 1 en 2</p>
        <p>
          <input type="hidden" name="field1">
          <input name="naam_soort" type="text" id="naam_soort">
        </p>
        <p> 
          <textarea name="omschrijving_soort" id="omschrijving_soort"></textarea>
        </p>
        <p> 
          <input name="Submit_soort" type="submit" id="Submit_soort" value="Toevoegen">
        </p>
        </form>
    </td>
    <td> 
      <FORM NAME="f2" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 2 met menu 2</p>
        <p> 
          <SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="relate2(this.form.name,0,this.selectedIndex,0)">
            <option value="#">soort 1
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form.name,0);">
        </p>
        </form>
      <FORM NAME="f3" METHOD="GET" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
        <p>Form 3 met menu 3</p>
        <p>
          <SELECT NAME="m3" ID="m3" CLASS=saveHistory onChange="jmp(this.form.name,0)">
            <option value="#">optie 1
            <option value="#">optie 2
          </select>
          <INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form.name,0);">
        </p>
        </form>
      </td>
  </tr>
</table>
</body>
</html>

Ik ben zelf niet zo te spreken over dit script, kan allemaal veel korter en duidelijker volgens mij (en wie heeft er tegenwoordig nog Netscape 2), maar dit zou moeten werken..

Intentionally left blank