webForumDet fria alternativet
Logga in / Bli medlem

Select, onchange -> ny värden i textinputs.

JavaScript

4 svar · 689 visningar · startad av renkott

renkottMedlem sedan maj 20098 inlägg
Frågan#1

http://durkslag.com/php/java.html

Jag skulle önska ett java script som reagerar på selecten.

Rad1:
Väljs 1 på rad1 så skrivs det i första fältet till höger ut "Artikel 1" och "10:-" i andra fältet.
Väljs 2 på rad1 så skrivs det i första fältet till höger ut "Artikel 2" och "20:-" i andra fältet.
Osv.

Rad 2 vill jag att ska funka på samma sätt som Rad1.

Hoppas ni förstår vad jag mennar och kan tänka er att hjälpa mig.

Peter SMedlem sedan dec. 20025 483 inlägg
#2

Hoppas sktrukturen framgår så att du själv kan lägga till fler options och selects, annars får du hojta till :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        s1: {
            1: ["Artikel 1", "10:-"],
            2: ["Artikel 2", "20:-"],
            3: ["Artikel 3", "30:-"]
        },
        s2: {
            1: ["Artikel 10", "100:-"],
            2: ["Artikel 11", "110:-"],
            3: ["Artikel 12", "120:-"]
        }
    };

    window.onload = function(){
        var elms = document.getElementsByTagName("select");
        for (var i = 0; i < elms.length; ++i)
            if (elms[i].name in mappings)
                elms[i].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
        } else {
            tb1.value = mappings[this.name][opt.value][0];
            tb2.value = mappings[this.name][opt.value][1];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">

      <input name="t1_2" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
  </form>
  </body>
</html>
renkottMedlem sedan maj 20098 inlägg
#3

Great :bire
Om jag vill hämta data från samma register, finns det något smidigare sätt än så här att lösa det? Försökte mig på s2 = s1 men det fick jag inte att funka, vilket kanske inte är så konstigt med en array?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        s1: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        },
        s2: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        },
        s3: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        }
                
    };

    window.onload = function(){
        var elms = document.getElementsByTagName("select");
        for (var i = 0; i < elms.length; ++i)
            if (elms[i].name in mappings)
                elms[i].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        var tb3 = this.form.elements["t" + rowIndex + "_3"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
            tb3.value = "";
        } else {
            tb1.value = mappings[this.name][opt.value][0];
            tb2.value = mappings[this.name][opt.value][1];
            tb3.value = mappings[this.name][opt.value][2];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">
      <input name="t1_2" value="">
      <input name="t1_3" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
      <input name="t2_3" value="">
     
<br><br>
Rad 3:<br>
  <select name="s3">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t3_1" value="">
      <input name="t3_2" value="">
      <input name="t3_3" value="">      
  </form>
  </body>
</html>
Peter SMedlem sedan dec. 20025 483 inlägg
#4

Like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        1: ["Artikel 1", "10", "kr/st"],
        2: ["Artikel 2", "20", "kr/a 100pack"],
        3: ["Artikel 3", "30", "kr/h"]       
    };

    window.onload = function(){
        var elms = document.forms[0].elements;
        var selects = ["s1", "s2", "s3"];
        for (var i = 0; i < selects.length; ++i)
            elms[selects[i]].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        var tb3 = this.form.elements["t" + rowIndex + "_3"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
            tb3.value = "";
        } else {
            tb1.value = mappings[opt.value][0];
            tb2.value = mappings[opt.value][1];
            tb3.value = mappings[opt.value][2];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">
      <input name="t1_2" value="">
      <input name="t1_3" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
      <input name="t2_3" value="">
     
<br><br>
Rad 3:<br>
  <select name="s3">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t3_1" value="">
      <input name="t3_2" value="">
      <input name="t3_3" value="">      
  </form>
  </body>
</html>
renkottMedlem sedan maj 20098 inlägg
#5

UNDERBART :e
Tack så mycket för hjälpen :r

272 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
131 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)