JS/jquery, hente data fra dynamiske felt

[Zezner]

Hei, jeg sitter å knoter litt med js/jquery.. Skal lage en preview utifra noe data som skrives inn i et form. I det ene input-feltet i formet legges det til nye felt hver gang man trykker tab (eller altså velger neste felt). Så fra disse dynamiske feltene skal jeg hente ut data fra de to første feltene og legge dem inn i previewen. Det jeg har gjort nå er å kjøre en funksjon som legger på et tall på slutten av id'en til disse feltene, så de får navnene contestant_1, contestant_2 osv utifra hvor mange felt som er åpnet.

Jeg vil da altså at contestant_1 og _2 skal legges inn i boksene i previewen

 

Det jeg så har gjort er at en annen funksjon venter på et keyup event fra en av disse input feltene. MEN den klarer ikke å reagere på dem etter at de har fått _1 og _2. Hvis jeg hardkoder inn at det første feltet heter _1, så kommer de opp i previewen.

På bildene ser dere at jeg har skrevet inn Boks1 og Boks2 i de to første feltene, men bare Boks1 som kommer opp.

 

Denne koden blir kjørt når noe skjer i feltet

$('#tname').keyup(update_tname);
$('#contestant_1').keyup(update_contestant_1);
$('#contestant_2').keyup(update_contestant_2); 

Dette er funksjonen som oppdaterer, er vel kun de to siste som har noe betydning på akkurat dette.

function update_contestant_1(){
  console.log("Inne i update_contestant_1");
  $('#preview').slideDown();
  $('#pview_contestant_1').fadeIn();
 // Values to preview
  var contestant_1 = $('#contestant_1').val();
  $('#display_contestant_1').html(contestant_1);
        }

Slik ser inputfeltet ut

<lable for="contestant" class="col-md-2 control-label">Contestants:</lable>
          <div class="input-group input-group-option col-md-4">
              <input class="form-control" type="text" id="contestant_" name="option[]"  placeholder="Write contestant here..." required></input>
                <span class="input-group-addon input-group-addon-remove">
                    <span class="glyphicon glyphicon-remove"></span>
                </span>
          </div>

Og dette er funksjonene som opprettet nye felt, endrer id og sletter dem

$(function () {
  // Variable for counting how many contestants fields that are open
  var i=0;
    $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function () {
        var sInputGroupHtml = $(this).parent().html();
// Uncomment comments below to inherit div classes from div on index page.
// This is not in use now, because we need a offset to line input fields below each other
        // var sInputGroupClasses = $(this).parent().attr('class');
        // $(this).parent().parent().append('<div class="' + sInputGroupClasses + '">' + sInputGroupHtml + '</div>');
        $(this).parent().parent().append('<div class="input-group input-group-option col-md-4 col-md-offset-2">' + sInputGroupHtml + '</div>');
        // Adds a number at the end of the ID
        i++;
        console.log(i);
        var newID='contestant_'+i;
        $(this).attr('id',newID);
    });

    $(document).on('click', 'div.form-group-options .input-group-addon-remove', function () {
        $(this).parent().remove();
        // Counts down so the next contestants field that opens, has the right number
        i--;
        console.log(i);
        var newID='contestant_'+i;
        $(this).attr('id',newID);
    });

});

Det eneste jeg kan tenke meg som gjør at det ikke fungerer er at koden som skal oppdatere ikke ser at id'ene blir forandret.. Uten at jeg vet hvordan man skal få den til å gjøre det

 

Håper noen skjønner problemet mitt og kan gi meg et dytt i riktig rettning.

 

Mvh. Zezner

[Slemdorull]

Hva er funksjonen du har lagt på keyup som ikke vil execute?

Kan du også legge til source til preview du bruker nå, så kan jeg mulig hjelpe deg med det du lurer på

[Zezner]

Funksjonen som skal kjøres ligger som andre bolk med kode i mitt første innlegg, hvis det var den du mente..

Dette er koden til previewen

<!-- New preview -->
<div class="col-md-10"

          <div class="container">
          <!-- Header for the page -->
            <div class="page-header">
          <!-- Small is for subtext in the header -->
              <h1>Cruntch!<br><small>Playing</small></h1>
            </div>

          <!-- Name of the tournament -->
            <div class="col-md-10" id="pview_tname">
              <h2 id="display_tname"></h2>
            </div>

          <!-- Two buttons to represent two alternatives -->
            <div class="col-md-10 vote_btn_wrap" id="pview_contestants">
          <!-- Red alternative -->
              <div class="col-md-8 vote_btn">
                <button id="display_contestants" type="button" class="btn btn-default btn-lg btn-block" name="button">[alternative1]</button>
              </div>
          <!-- Blue alternative -->
              <div class="col-md-8 vote_btn">
                <button id="display_contestants" type="button" class="btn btn-default btn-lg btn-block" name="button">[alternative2]</button>
              </div>
          <!-- Button wrap end -->
            </div>
<!-- End of container for preview -->
          </div>
<!-- End of preview -->
</div>

Endret 20. mai 2015 av Zezner