Re: Array iteration - set keyup on input - sets all inputs to same value, not dynamic value

Thursday, February 6, 2014

Note to Moderator:

I would like to point out the Google Groups is owned by Google, and I don't think they would appreciate it if you started deleting perfectly good solutions to member's problems.

I am going to email my solution directly to Jack Drysdale and see what he has to say about this situation.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>In-Out matching</title>
<script>
// rate_A_B_1
// 0123456789
function Out2In(s) {
return s.substr(0,5)+s[7]+s[6]+s[5]+s.substr(8);
}
function OnLoad() {
var InOut = {}, o, i, in_, out, a = document.getElementById("rates").
getElementsByTagName("input");
// Build an index of input tags by their class names
for (i = 0; i < a.length; i++) {
if (a [i].className == "in")
if (o = InOut [a [i].name])
o.in = a[i];
else
InOut [a [i].name] = {in:a[i]};
if (a [i].className == "out")
if (o = InOut [Out2In(a [i].name)])
o.out = a[i];
else
InOut [Out2In(a [i].name)] = {out:a[i]};
}
// Install a onkeyup handler to the input tags with a class == 'in'
// pointing to the tags with class == 'out'
for (i in InOut) {
if ((in_ = InOut[i].in) && (out = InOut[i].out)) {
in_.onkeyup = function (elo, eli) {
return function () {elo.value = eli.value;};
} (out, in_);
}
}
}
/*
What I'm trying to do is (after the form loads, when the page is ready) add
an onkeyup event to all "in" inputs that have a matching "out" input
(ie, an "in" A_C_1 will get an onkeyup that will set the value of "out"
C_A_1 to its value. But I do not want "out"s to overwrite "in"s..
so apply only to "in" class inputs.)
*/
</script>
</head>
<body onload='OnLoad()'>
<form name="rates" id="rates">
Rate 01: <input name="rate_A_B_1" class="in"><br />
Rate 02: <input name="rate_A_C_1" class="in"><br />
Rate 03: <input name="rate_C_A_1" class="out"><br />
Rate 04: <input name="rate_A_D_1" class="in"><br />
Rate 05: <input name="rate_D_A_1" class="out"><br />
Rate 06: <input name="rate_A_E_1" class="in"><br />
Rate 07: <input name="rate_E_A_1" class="out"><br />
Rate 08: <input name="rate_A_F_1" class="in"><br />
Rate 09: <input name="rate_A_G_1" class="in"><br />
Rate 10: <input name="rate_G_A_1" class="out"><br />
...
Rate 89: <input name="rate_A_Z_1" class="in"><br />
Rate 90: <input name="rate_B_C_1" class="in"><br />
Rate 91: <input name="rate_C_B_1" class="out"><br />
Rate 92: <input name="rate_B_D_1" class="in"><br />
Rate 93: <input name="rate_D_B_1" class="out"><br />
</form>
</body>
</html>

On Wednesday, February 5, 2014 12:33:47 PM UTC-5, Jack Drysdale Jr wrote:
Hello, everyone.

I've been working with JavaScript for a long time - nothing real fancy, mind you - but I'm scratching my head over this one.  I'm sure I'm missing something extremely simple.  I could use extra eyes, on this.

BTW, I'm in a DoD network, so sites like jsfiddle are blocked.  :(

I've got a form that will vary in length each time it's loaded.   It's dynamically generated from a database query.  I'll try to keep the pseudo-code simple.

EDIT: I forgot to add ID to the inputs in my pseudo-code.  They are there in the code on my dev system.  Sorry for the omission.

<form name="rates" id="rates">
  Rate 01: <input name="rate_A_B_1" class="in"><br />
  Rate 02: <input name="rate_A_C_1" class="in"><br />
  Rate 03: <input name="rate_C_A_1" class="out"><br />
  Rate 04: <input name="rate_A_D_1" class="in"><br />
  Rate 05: <input name="rate_D_A_1" class="out"><br />
  Rate 06: <input name="rate_A_E_1" class="in"><br />
  Rate 07: <input name="rate_E_A_1" class="out"><br />
  Rate 08: <input name="rate_A_F_1" class="in"><br />
  Rate 09: <input name="rate_A_G_1" class="in"><br />
  Rate 10: <input name="rate_G_A_1" class="out"><br />
    ...
  Rate 89: <input name="rate_A_Z_1" class="in"><br />
  Rate 90: <input name="rate_B_C_1" class="in"><br />
  Rate 91: <input name="rate_C_B_1" class="out"><br />
  Rate 92: <input name="rate_B_D_1" class="in"><br />
  Rate 93: <input name="rate_D_B_1" class="out"><br />
</form>


What I'm trying to do is (after the form loads, when the page is ready) add an onkeyup event to all "in" inputs that have a matching "out" input (ie, an "in" A_C_1 will get an onkeyup that will set the value of "out" C_A_1 to its value.  But I do not want "out"s to overwrite "in"s.. so apply only to "in" class inputs.)

So I thought, "Simple."  Here's my js.  Although I am using MooTools for some things, I'm mixing MooTools with straight JS for this.

var inInput = $$('.in'), x, thisID, thisIDary, elmnt;
for(x in inInput){
  if(typeof(inInput[x].id) !== 'undefined'){
    thisID = inInput[x].id.trim();
    thisIDary = thisID.split("_");
    outID = thisIDary[0] + "_" + thisIDary[2] + "_" + thisIDary[1] + "_" + thisIDary[3];
    outID = outID.trim(); outID = document.id(outID);
    $(thisID).addEvent('keyup',function(){
      $(outID).set('value',$(thisID).get('value'));
      }
    }
  }

Unfortunately, this will set a keyup event on all "in" class inputs that will set the associated "out" to the  value of the last "in" input of the form.

I'm sure I'm missing something simple.  Could someone please point out my error?

Thank you,

JD

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii